2013-02-24 80 views
0

我試圖學習ASP.net MVC很長一段時間後,與webforms工作,所以道歉,如果我混亂的事情。我無法超越簡單的編輯每頁模型結構。我有員工,他們對項目有異議,我想在一頁上編輯。MVC4添加/刪除嵌套集合(使用jQuery?)

我有一個員工模型:

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,每個ProjectXref都有一個單獨的頁面,但這看起來像是糟糕的UI。

在我看來,我希望能夠將新的ProjectXref編輯器HTML添加到我的表單中,並且在表單發佈時,讓ASP.net將其識別爲新的ProjectXref並將其綁定爲此類。同時,如果我刪除與現有ProjectXref關聯的字段,我希望ASP.net能夠識別出我的一個ProjectXrefs的字段現在缺失,因此刪除該ProjectXref。我是否用EditorTemplates走錯了路?

編輯:我的解決方案

感謝@Parv夏爾馬,我結束了創建一個新的屬性上我的課:

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

然後我把它添加到我的觀點作爲一個隱藏的:

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

然後我用AngularJS(必須學會一個反正)從我場閱讀JSON在我的UI呈現它。

回答

1

我實現這一目標的方式是保留一個隱藏字段,用於跟蹤添加或刪除的字段並且是集合的一部分。
這每當你,你只需要更新JSON集合中刪除的元素,當它被調回讀取JSON和更新集合相應
序列化或反序列化JSON,你可以使用內置的JavaScriptSerializernewtonsoft.json

方式