how to create an editable partial view in ASP.NET MVC - asp.net-mvc

Question

I'm currently trying to create an edit view that consists of some user profile details and a list of roles that the user is assigned to. I thought that I could create an editable parent view that would contain all of the user profile textboxes and insert a partial view that would hold checkboxes for all of the roles.
However, I have found that when I try to update the textboxes in the partial view, those changes are not reflected in the parent model. Apparently, the partial view gets its own ViewData dictionary that is isolated from the parent's.
I was wondering if anyone had a solution that would allow me to pass changes made to a checkbox in a partial view back to the model of the parent. I have included some sample code below. Here is the parent view:
#model MvcWebsite.ViewModels.UserProfileEditViewModel
#{
ViewBag.Title = "Edit";
}
<h2>Edit</h2>
#using (Html.BeginForm()) {
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<fieldset>
<legend>UserProfile</legend>
#Html.HiddenFor(model => model.UserId)
<div class="editor-label">
#Html.LabelFor(model => model.UserName)
</div>
... other properties of the user profile omitted for brevity
<div class="editor-field">
#Html.Partial("RoleCheckBoxEditTable", Model.Roles)
</div>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
We then have the child partial view:
#model List<MvcWebsite.ViewModels.RoleViewModel>
<table>
<tr>
#{
int count = 0;
foreach (var roleViewModel in Model)
{
if(count++ % 3 == 0)
{
#: </tr> <tr>
}
<td>
#Html.HiddenFor(r => roleViewModel.RoleName)
#Html.HiddenFor(r => roleViewModel.RoleId)
#Html.CheckBoxFor(r => roleViewModel.Assigned)
</td>
<td>
#Html.LabelFor(r => roleViewModel.Assigned, roleViewModel.RoleName)
</td>
}
}
</tr>
</table>
What I would like is to find a way to make both of these views update the same model, which could then be sent to the controller. Any help would be greatly appreciated.

Answer 1

I got around this problem by eliminating Partial Views entirely and replacing them with Display and Editor Templates.
Take the stuff from your View for that list of RoleViewModel, and create a new View under Views/Shared/EditorTemplates with the name RoleViewModel.cshtml (you might have to create the EditorTemplates directory first if you've never used it before).
On your top-level view, change Partial to EditorFor like this: #Html.EditorFor(model => model.Roles)
This approach works for me, and it preserves the baked in validation that I get by using the IValidatable interface on my Models.