使用AJAX插入表單時的模型綁定

Question

Figured我應該在頁面頂部寫下我的問題，因爲有一段代碼需要遵循。

我有一個包含內部視圖模型列表的外部視圖模型。當我點擊創建頁面上的保存並轉到創建POST功能public ActionResult Create(DeviceTypeEntryViewModel model)外部模型被填充，但其內部視圖模型列表爲空。我究竟做錯了什麼？

視圖模型是：

public class DeviceTypeEntryViewModel 
{ 
    public int ID { get; set; } 
    public string Type { get; set; } 
    public string Description { get; set; } 
    public List<AttributeEntryViewModel> Attributes { get; set; } 
} 

public class AttributeEntryViewModel 
{ 
    public int ID { get; set; } 
    public string Name { get; set; } 
    public string Description { get; set; } 
    public bool Private { get; set; } 
} 

創建視圖包含設備條目查看：

@model ICMDB.ViewModels.DeviceTypeEntryViewModel 

@{ 
    ViewBag.Title = "ICMD - Create Device Type"; 
} 

<h2>Create Device Type</h2> 

<div class="form-div"> 
    @using (Html.BeginForm()) { 
     @Html.ValidationSummary(true) 

     Html.RenderPartial("_DeviceTypeEntryPartial", Model); 
     <input type="submit" value="Save" class="form-button"/> 
    } 

    @using (Html.BeginForm("Index", "DeviceType")) 
    { 
     <input type="submit" value="Cancel" class="form-button"/> 
    }  
</div> 

Device項目視圖部分：

@model ICMDB.ViewModels.DeviceTypeEntryViewModel 

<fieldset> 
    @Html.HiddenFor(model => model.ID) 

    <div> @Html.LabelFor(model => model.Type) </div> 
    <div> 
     @Html.EditorFor(model => model.Type) 
     @Html.ValidationMessageFor(model => model.Type) 
    </div> 

    <div> @Html.LabelFor(model => model.Description) </div> 
    <div> 
     @Html.EditorFor(model => model.Description) 
     @Html.ValidationMessageFor(model => model.Description) 
    </div> 

    <table id="AttributesTable" class="editor-table"> 
     <tr> 
      <th>Name</th> 
      <th>Description</th> 
      <th>Private</th> 
     </tr> 

     @Html.EditorFor(model => model.Attributes) 
    </table> 

    <input id="addAttributeButton" type="button" value="Add" 
    onclick="AddAttribute()" /> 
</fieldset> 

編輯模板AttributeEntryViewModel：

@model ICMDB.ViewModels.AttributeEntryViewModel 

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

<tr> 
    <td> 
     @Html.EditorFor(model => model.Name) 
     @Html.ValidationMessageFor(model => model.Name) 
    </td> 
    <td> 
     @Html.EditorFor(model => model.Description) 
     @Html.ValidationMessageFor(model => model.Description) 
    </td> 
    <td> 
     @Html.EditorFor(model => model.AttributePrivate) 
    </td> 
</tr> 

AJAX調用來添加屬性行：

<script type="text/javascript"> 
    function AddAttribute() { 
     // and send it as AJAX request 
     $.ajax({ 
      url: '@Url.Action("AddAttribute")', 
      type: 'POST', 
      cache: false, 
      success: function (result) { 
       // when the AJAX succeeds add result to the table 
       $('#AttributesTable').append(result); 
      } 
     }) 
    } 
</script> 

在AJAX調用對方

控制器功能添加：

[HttpPost] 
public ActionResult AddAttribute() 
{ 
    var model = new AttributeEntryViewModel(); 
    return PartialView("EditorTemplates/AttributeEntryViewModel", model); 
} 

Answer 1

的問題是，當你使用AJAX來插入新條目到表格，輸入元素沒有proper naming默認模型聯編程序綁定他們回來。使用FireBug進行檢查，您會看到集合的索引不受尊重。爲了達到你的目的，我會向你推薦following blog post。