MVC4 从嵌套集合中添加/删除（使用 jQuery？）答案

【问题标题】：MVC4 adding/deleting from nested collections (with jQuery?)MVC4 从嵌套集合中添加/删除（使用 jQuery？）
【发布时间】：2013-02-24 06:59:10
【问题描述】：

在使用 webforms 很长一段时间后，我正在尝试学习 ASP.net MVC，如果我混淆了，请道歉。我无法超越每个模型的简单编辑页面结构。我有员工，他们被外部引用到项目，我想在一个页面上编辑所有内容。

我有一个 Employee 模型：

public class Employee
{
    public string UserID { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public List<ProjectXref> Projects { get; set; }
}

这是我的 ProjectXref 模型：

public class ProjectXref
{
    public Project Project { get; set; }
    public string Role { get; set; }
}

我为 ProjectXref 创建了一个编辑器模板：

@model Relationships.Models.ProjectXref

<tr>
    <td><span class="h3"> @Model.Project.ProjectName </span> </td>
    <td>@Html.EditorFor(model => model.Role)</td>
    <td>
        @Html.HiddenFor(model => model.Project.ProjectKey)
        <a class="btnDel" > </a>
    </td>
</tr>

...在我的员工编辑视图中，我只是使用 EditorFor 为与我的员工关联的每个项目呈现 tr 行。

@Html.EditorFor(model => model.Projects)

我现在不知道如何处理这些。我开始使用一些 jQuery 来删除我的 ProjectXref：

$(".btnDel").live("click", function () {
    $(this).parents('tr').remove();
    return false;
});

看起来不错，但如果我删除第一个项目然后提交，以下项目都不会出现在我的帖子中。我认为这与正在发生的任何魔术绑定有关。我的“Projects_0__Title”字段丢失，因此 MVC 跳过尝试绑定其他任何内容。

我的目标：我想在我的页面上动态修改我的项目列表，这意味着能够删除项目、添加新项目或编辑项目（更改员工相对于项目的角色）。我试图让 MVC 这样做是错的吗？在我看过的教程中，大多数人会让你编辑和添加新的 ProjectXrefs，每个都有单独的页面，但这似乎是糟糕的 UI。

在我看来，我希望能够将新的 ProjectXref 编辑器 HTML 添加到我的表单中，并且在发布表单时，让 ASP.net 将其识别为新的 ProjectXref 并将其绑定。同时，如果我删除与现有 ProjectXref 关联的字段，我希望 ASP.net 能够识别我的 ProjectXref 之一的字段现在丢失，因此删除该 ProjectXref。我是否使用 EditorTemplates 走错了路？

编辑：我的解决方案

感谢@Parv Sharma，我最终为我的班级创建了一个新属性：

public string ProjectsJson
{
    get { return JsonConvert.SerializeObject(Projects); }
    set { Projects = JsonConvert.DeserializeObject<List<ProjectXref>>(value); }
}

然后我将它作为隐藏添加到我的视图中：

@Html.HiddenFor(model => model.ProjectsJson)

然后我使用 AngularJS（无论如何都必须学习一个）从我的领域读取 JSON 并将其呈现在我的 UI 中。

【问题讨论】：

标签： jquery asp.net-mvc-4 nested-attributes

【解决方案1】：

我实现此目的的方法是保留一个隐藏字段，用于跟踪添加或删除的字段以及属于集合的一部分。
这样，每当您删除集合中的元素时，您只需要更新 JSON，当它被回发时，读取 json 并相应地更新集合
要序列化或反序列化JSON，您可以使用内置的JavaScriptSerializer 或newtonsoft.json

【讨论】：