MVC4添加/嵌套从集合中删除（使用jQuery？） [英] MVC4 adding/deleting from nested collections (with jQuery?)

问题描述

我想学ASP.net MVC与web表单长时间工作后，所以如果道歉我困惑的事情。我无法超越了简单的编辑页每模型结构。我公司员工，谁是xrefed到项目，我想编辑这一切都在一个页面上。

I'm trying to learn ASP.net MVC after working with webforms for a long time, so apologies if I'm confusing things. I'm having trouble moving beyond the simple edit page-per-model structure. I have Employees, who are xrefed to Projects, and I want to edit this all on one page.

我有一个员工模型：

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模型：

And here's my ProjectXref model:

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

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

I created an Editor Template for the 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行对我的员工与相关联的每个项目。

...and in my Employee Edit view, I simply use EditorFor to render tr rows for each project my employee is associated with.

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

我坚持什么现在做这些。我开始了一些jQuery删除了我的ProjectXref：

I'm stuck with what to do with these now. I started out with some jQuery to delete out my ProjectXref:

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

这看起来不错，但如果我删除的第一个项目，然后提交，没有以下的项目在我的帖子出现。我认为这与任何神奇的结合是怎么回事做;我的Projects_0__Title字段丢失，所以MVC跳过试图绑定别的。

Which looks fine, but if I delete the first project then submit, none of the following projects show up in my post. I think it has to do with whatever magic binding is going on; my "Projects_0__Title" field is missing, so MVC skips trying to bind anything else.

我的目标：
我想修改我的网页上动态我的项目名单，这意味着要删除的项目，添加一个新项目或编辑项目（改变员工的相对于项目的作用）的能力。我错在试图让MVC做到这一点？随着我见过的教程，最希望你编辑和每个添加新ProjectXrefs一个单独的页面，但是，似乎是坏的UI。

MY GOAL: I would like to modify my list of projects dynamically on my page, meaning the ability to delete projects, add a new project, or edit the project (change the employee's role relative to the project). Am I wrong in trying to get MVC to do this? With the tutorials I've seen, most would have you edit and add new ProjectXrefs each with a separate pages, but that seems like bad UI.

在我的脑海里，我希望能够为新ProjectXref编辑HTML代码添加到我的形式，当形式发布，有ASP.net认识到它作为一个新的ProjectXref并绑定它是这样。与此同时，如果我删除了关联到我现有的ProjectXref领域，我希望ASP.net认识到，我ProjectXrefs的一个领域，现在不见了，因此删除ProjectXref。我该怎么错了路与EditorTemplates？

In my mind, I would expect to be able to add new ProjectXref editor HTML to my form, and when the form is posted, have ASP.net recognize it as a new ProjectXref and bind it as such. At the same time, if I delete out the fields associated to my existing ProjectXref, I would expect ASP.net to recognize that the fields for one of my ProjectXrefs is now missing, so to delete that ProjectXref. Am I going down the wrong path with EditorTemplates?

编辑：我的解决方案

由于@Parv夏尔马，我结束了创建一个新的属性，以我的类：

Thanks to @Parv Sharma, I ended up creating a new Property to my class:

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

然后我把它添加到我作为一个隐藏的看法：

I then added it to my view as a hidden:

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

然后我用AngularJS（必须学习一种反正）在我的UI从我的领域和present它读取JSON。

I then used AngularJS (had to learn one anyway) to read JSON from my field and present it in my UI.

推荐答案

我做到了这一点的方式是保持一个隐藏字段一个跟踪被添加或删除，并集合的一部分字段。结果
这只要您在集合中删除元素的方式，你只需要更新JSON和当它被调回读取JSON和更新集合相应结果
序列化或反序列化 JSON 您可以使用内置的的JavaScriptSerializer 或 newtonsoft.json

the way I achieved this was to keep a hidden field that keeps track of a the fields that are added or deleted and are part of the collection.
This way whenever you delete an element in the collection you just need to update the JSON and when it is posted back read the json and update the collection accordingly
to serialize or deserialize JSON you can use built in JavaScriptSerializer or newtonsoft.json

这篇关于MVC4添加/嵌套从集合中删除（使用jQuery？）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！