MVC4 adding/deleting from nested collections (with jQuery?)

问题

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.

I have an Employee model:

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

And here's my ProjectXref model:

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

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>

...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)

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;
});

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.

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.

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?

Edit:My solution

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)

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

回答1:

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

来源：https://stackoverflow.com/questions/15049463/mvc4-adding-deleting-from-nested-collections-with-jquery

标签

jquery

asp.net-mvc-4

nested-attributes