MVC.NET、JQuery - 如何提交由 JQuery 数据表组成的表单，其中的行包含复选框和文本输入？

Question

我有一个 jquery 数据表，其中有多行包含复选框和文本输入字段。我的目标是 select 所有选中复选框的行，然后通过 ajax 提交。我能够获取所有选中的复选框的 "id" 属性，但是如何获取该行其余列的值（标签和文本输入）？

我还需要通过 ajax 调用将这些 post 用于操作。我应该怎么做以及如何在 post 操作中捕获这些值？

我有一个学生模型。

public class Student {

public string studentid { get; set; }
public string firstname { get; set; }
public string lastname { get; set; }

}

视图绑定到此模型 (@model Project.Models.IEnumerable<Student>)，数据表生成如下：

<table>
<thead>
<tr>
<td>Select</td>
<td>StudentId</td>
<td>FirstName</td>
<td>LastName</td>
</tr>
</thead>
<tbody>
<tr>
    foreach (var student in Model)
    {
    <td><input type="checkbox" id="@student.studentid"/></td>
    <td>@student.studentid</td>
    <td>@student.firstname</td>
    <td><input type="text" value="@student.lastname"/></td>
    }
</tr>
<tbody>
</table>

姓氏字段是可编辑的，只有勾选了复选框的行才会在数据库中更新。

所以当我提交此表单时，在 post 操作中，我会这样做吗？

[HttpPost]
public ActionResult UpdateStudent(IEnumerable<Student> students)
{

}

我试过上面的方法，但是没有成功。有什么建议吗？

Answer 1

您不能使用 foreach 循环，因为它会生成没有索引器的重复 name 属性，因此它们无法绑定到集合（它还会生成无效的 html，因为重复的 id 属性）。您必须使用 for 循环并为 typeof Student.

建模 IList<Student> 或自定义 EditorTemplate

由于未选中的复选框不会 post 一个值，但文本框会，您需要首先创建一个视图模型，其中包含您可以绑定的（比如）bool IsSelected 属性使用 @Html.CheckBoxFor() 并确保值将始终 posted 与相应的文本框匹配。

public class StudentVM
{
    public string ID { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public bool IsSelected { get; set; }
}

然后在视图中

@model List<yourAssembly.StudentVM>
@using (Html.BeginForm())
{
    <table>
        ....
        <tbody>
            for(int i = 0; i < Model.Count; i++)
            {
                <tr>
                    <td>@Html.CheckBoxFor(m => m[i].IsSelected)</td>
                    <td>
                        @Html.HiddenFor(m => m[i].ID)
                        @Html.DisplayFor(m => m[i].ID)
                    </td>
                    ....
                    <td>@Html.TextBoxFor(m => m[i].LastName)</td>
                </tr>
            }
        </tbody>
    </table>
    <input type="submit" ... />
}

你的控制器方法可能看起来像

public ActionResult UpdateStudent()
{
    List<StudentVM> model = db.Students.Select(s => new StudentVM
    {
        ID = s.studentid,
        FirstName = s.firstname,
        LastName = s.lastname
    });
    return View(model);
}

[HttpPost]
public ActionResult UpdateStudent(List<StudentVM> model)
{
    var selectedStudents = model.Where(s => s.IsSelected);
    // save and redirect
}

MVC.NET、JQuery - 如何提交由 JQuery 数据表组成的表单，其中的行包含复选框和文本输入？

MVC.NET, JQuery - How to submit a form that is made up of a JQuery datatable with rows that contain checkboxes and text inputs?

ajax

asp.net-mvc

jquery

asp.net-ajax

asp.net-mvc-4