帶有表的表單，將所有值提交給IEnumerable Controller操作

Question

我有一個表格，表格中列出了數據

@model IEnumerable<myType>
@Html.AntiForgeryToken()
@using (Ajax.BeginForm("Save", "NOC", null, ajaxopts, new { @encType = "multipart/form-data", @id = "myform", @name = "myform" }))
{

<table>
<tr>
<td><input type="hidden" name="myType[0].ID" id="myType[0].ID" value="16" /></td>
<td><input type="text" name="myType[0].Name" id="myType[0].Name" value="Jim" /></td>
<td><input type="checkbox" name="myType[0].Selected" id="myType[0].Selected" checked /></td>
</tr>
<tr>
<td><input type="hidden" name="myType[1].ID" id="myType[1].ID" value="17" /></td>
<td><input type="text" name="myType[1].Name" id="myType[1].Name" value="Bob" /></td>
<td><input type="checkbox" name="myType[1].Selected" id="myType[1].Selected" /></td>
</tr>
</table>
<button id="process" value="Save" class="btn btn-primary">Save</button>
}

在Chrome瀏覽器中，我可以在“表單數據”部分中看到要發布到控制器的數據列表。

myType[0].ID: 16
myType[0].Name: Jim
myType[0].Selected: on
myType[1].ID: 17
myType[1].Name: Bob

但是在控制器中我得到空

[HttpPost]
public async Task<ActionResult> SaveData(IEnumerable<myType> model)
{
  return Json("Hi");
} 

另外，如果我在Chrome Dev Tools上查看預覽，則在從Controller返回的預覽中看到“ Hi”。

我的Javascript看起來像這樣

$("#process").on("click", function (event){
  event.preventDefault();
  var formData = $("#myForm").serialize();
  $.ajax({
    url: url,
    type: "POST",
    data: formData
  })
});

模型是

public class myType
{
  public int ID { get; set; }
  public string Name { get; set; }
  public bool Selected { get; set; }
}

沒有顯示任何JavaScript錯誤，只是沒有數據發送給控制器？

任何幫助將不勝感激。

謝謝

Answer 1

您手動生成的html具有與模型不相關的name屬性。 為了回發到IEnumerable<myType> model您的元素需要

<input type="hidden" name="[0].ID />
<input type="hidden" name="[1].ID />

您還應該刪除id屬性，因為它們無效，並且任何嘗試使用它們的jquery函數都將失敗（例如. （點）將被解釋為類標識符）。

還要注意，由於on的值不會綁定到boolean值，因此您無法使用checkbox 。

根據您的評論，您可以使用javascript函數動態添加新元素來生成此html。 如果是這樣，建議您查看此答案 。 您還應該用一些對象填充初始模型，並使用for循環生成正確的html（使模型IList<myType> ）

for(int i = 0; i < Model.Count; i++)
{
  @Html.HiddenFor(m => m.ID)
  @Html.TextBoxFor(m => m.Name)
  @Html.CheckBoxFor(m => m.Selected)
}

然后檢查它生成的html。