Form with Table，将所有值提交给IEnumerable Controller动作

Form with Table, submit all values to IEnumerable Controller action

本文关键字：提交 IEnumerable Controller 动作 Table with Form      更新时间：2023-09-26

我有一个表单的数据列在一个表结构

@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

但是在控制器中我得到null

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

另外，如果我在Chrome开发工具的预览中查看，我看到"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错误显示，只是没有数据到控制器?

任何帮助都将非常感激。

谢谢

您手动生成的具有与您的模型无关的name属性的html。为了发送回IEnumerable<myType> model，你的元素需要是

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

等。你还应该删除id属性，因为这些是无效的，任何试图使用它们的jquery函数都会失败(例如.(点)将被解释为类标识符)。

还请注意，您使用checkbox将不起作用，因为on的值不会绑定到boolean的值。

根据你的注释，你使用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)
}
相关文章：