如何在 ASP.NET MVC 中创建可编辑的局部视图

Question

我目前正在尝试创建一个编辑视图，其中包含一些用户个人资料详细信息和用户分配到的角色列表。我认为我可以创建一个包含所有用户配置文件文本框的可编辑父视图，并插入一个包含所有角色复选框的部分视图。

但是，我发现当我尝试更新局部视图中的文本框时，这些更改不会反映在父模型中。显然，局部视图有自己的 ViewData 字典，该字典与父视图隔离。

我想知道是否有人有一个解决方案，允许我将对部分视图中的复选框所做的更改传递回父模型。我在下面包含了一些示例代码。这是父视图：

@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>

然后我们有子部分视图：

@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>

我想要找到一种方法让这两个视图都更新同一个模型，然后可以将其发送到控制器。任何帮助将不胜感激。

Answer 1

我通过完全消除部分视图并用显示和编辑器模板替换它们来解决这个问题。

从您的视图中获取RoleViewModel 列表中的内容，并在Views/Shared/EditorTemplates 下创建一个名为RoleViewModel.cshtml 的新视图（如果您从未使用过，您可能必须先创建EditorTemplates 目录之前）。

在您的顶级视图中，将 Partial 更改为 EditorFor，如下所示：@Html.EditorFor(model => model.Roles)

这种方法对我有用，它保留了我通过在模型上使用 IValidatable 接口获得的烘焙验证。