dynamicuser
Reputation: 1552
Multiple forms on a single MVC page
Below is a screenshot of my page. It has 3 tabs - Details, Users and Rights. Each tab has its own submit button which I need to fire different code within the controller (of which there is no code as of yet).
My question is, how to I have 3 separate forms on a single MVC page and how do I get each Submit button to run the respective code?
View
<div class="row-fluid">
<div class="span12">
<!-- BEGIN INLINE TABS PORTLET-->
<div class="widget">
<div class="widget-title">
<h4><i class="icon-user"></i></h4>
</div>
<div class="widget-body">
<div class="row-fluid">
<div class="span8">
<!--BEGIN TABS-->
<div class="tabbable custom-tab">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab_1_1" data-toggle="tab">Role Details</a></li>
<li><a href="#tab_1_2" data-toggle="tab">Users</a></li>
<li><a href="#tab_1_3" data-toggle="tab">Rights</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab_1_1">
@using (Html.BeginForm("Details", "RoleController", FormMethod.Get, new { }))
{
@Html.ValidationSummary(true)
<div class="row-fluid">
<div class="span3">
@Html.HiddenFor(model => model.Id)
<div class="control-group">
<label class="control-label">@Html.DisplayNameFor(model => model.RoleName)</label>
<div class="controls controls-row">
@Html.EditorFor(model => model.RoleName)
@Html.ValidationMessageFor(model => model.RoleName)
</div>
</div>
<div class="control-group">
<label class="control-label">@Html.DisplayNameFor(model => model.Description)</label>
<div class="controls controls-row">
@Html.TextArea("Description", Model.Description, new { @cols = 400, @rows = 10 })
</div>
</div>
</div>
</div>
<input type="submit" class="btn btn-success" value="Save" />
}
</div>
<div class="tab-pane" id="tab_1_2">
@using (Html.BeginForm("UsersForRole", "RoleController", FormMethod.Post, new { }))
{
<!-- BEGIN DUAL SELECT-->
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTk5MjI0ODUwOWRkJySmk0TGHOhSY+d9BU9NHeCKW6o=" />
</div>
<div>
<table style="width: 100%;" class="">
<tr>
<td style="width: 35%">
<div class="d-sel-filter">
<span>Filter:</span>
<input type="text" id="box1Filter" />
<button type="button" class="btn" id="box1Clear">X</button>
</div>
<select id="box1View" multiple="multiple" style="height: 300px; width: 75%" runat="server">
</select><br />
<span id="box1Counter" class="countLabel"></span>
<select id="box1Storage">
</select>
</td>
<td style="width: 21%; vertical-align: middle">
<button id="to2" class="btn" type="button"> > </button>
<button id="allTo2" class="btn" type="button"> >> </button>
<button id="allTo1" class="btn" type="button"> << </button>
<button id="to1" class="btn" type="button"> < </button>
</td>
<td style="width: 35%">
<div class="d-sel-filter">
<span>Filter:</span>
<input type="text" id="box2Filter" />
<button type="button" class="btn" id="box2Clear">X</button>
</div>
<select id="box2View" multiple="multiple" style="height: 300px; width: 75%;">
@foreach (var user in Model.Users)
{
<option>@Html.DisplayFor(model => user.SurnameFirstName)</option>
}
</select><br />
<span id="box2Counter" class="countLabel"></span>
<select id="box2Storage">
</select>
</td>
</tr>
</table>
</div>
<div class="mtop20">
<input type="submit" value="Submit" class="btn" />
</div>
<!-- END DUAL SELECT-->
}
</div>
<div class="tab-pane" id="tab_1_3">
@using (Html.BeginForm("RightsForRole", "RoleController", FormMethod.Post, new { }))
{
<table class="table table-striped">
<thead>
<tr>
<th>Right Name</th>
<th>Description</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var right in Model.Rights)
{
<tr>
<td>@Html.DisplayFor(model => right.RightName)</td>
<td>@Html.DisplayFor(model => right.Description)</td>
<td>
<div class="success-toggle-button">
@Html.CheckBoxFor(model => right.Assigned, new { @class = "toggle" })
</div>
</td>
</tr>
}
</tbody>
</table>
}
</div>
</div>
</div>
<!--END TABS-->
</div>
<div class="span4">
<div class="control-group">
<label class="control-label">@Html.DisplayNameFor(model => model.DateCreated)</label>
<div class="controls controls-row">
@Html.EditorFor(model => model.DateCreated, new { @readonly = "readonly" })
</div>
</div>
<div class="control-group">
<label class="control-label">@Html.DisplayNameFor(model => model.CreatedBy)</label>
<div class="controls controls-row">
@Html.EditorFor(model => model.CreatedBy, new { @readonly = "readonly" })
</div>
</div>
<div class="control-group">
<label class="control-label">@Html.DisplayNameFor(model => model.LastUpdated)</label>
<div class="controls controls-row">
@Html.EditorFor(model => model.LastUpdated)
</div>
</div>
<div class="control-group">
<label class="control-label">@Html.DisplayNameFor(model => model.LastUpdateBy)</label>
<div class="controls controls-row">
@Html.EditorFor(model => model.LastUpdateBy)
</div>
</div>
</div>
</div>
</div>
</div>
</div>
UsersForRole controller
[HttpPost]
public ActionResult UsersForRole(RoleModel model)
{
if (ModelState.IsValid)
{
}
return View(model);
}
Upvotes: 1
Views: 2378
Answers (4)
Janty
Reputation: 1714
You can achieved the multiple form inside one form by only using three different Pages(Actions) and use tab as Actionlink. On the Actionlink you call the respective Action.
In your case there will be problem when you will post the form.
Otherwise you should use JQuery to achieve this situation.
Upvotes: 0
szpic
Reputation: 4496
I think that you may have something wrong in this line:
@using (Html.BeginForm("UsersForRole", "RoleController", FormMethod.Post, new { }))
Controler name in the Html.BeginForm shoudl be only Role unless your controller name is`RoleControllerController?
Upvotes: 4
Justin Harvey
Reputation: 14672
What you are doing looks fine, you just need to add the other Actions in your controller...
Details
RightsForRole
Upvotes: 4
Related Questions
- Multiple Forms in same page ASP.net MVC
- Multiple forms in one view page
- Multiple forms in one page MVC 5
- Multiple forms on MVC view
- MVC Multiple forms into 1 Controller
- Multiple page forms in ASP MVC
- Multiple forms in a single view
- .net Multiple Forms On one page issue
- Multiple forms in MVC3
- Asp.net MVC Razor more than one form on a page