jQuery 不显眼的 Ajax 表单在 'per-table-row' 场景中不起作用

Question

我正在尝试创建一个可编辑的表格，其中每一行都是一个可以单独提交的 View ，以便获得模型验证等的所有好处。

这是我得到的:
型号:

public class PeopleGroup
{
    public string Name { get; set; }
    public ICollection<PersonModel> People { get; set; }
}

public class PersonModel
{
    [Required]
    public uint Id { get; set; }

    [Required]
    [RegularExpression("[\\w\\s]{2,100}")]
    [StringLength(100)]
    public string FirstName { get; set; }

    [Required]
    [RegularExpression("[\\w\\s]{2,100}")]
    [StringLength(100)]
    public string LastName { get; set; }
}

ListView :

@model Mvc4TestApp.Models.PeopleGroup
@{
    ViewBag.Title = "People";
}

<h2>@Model.Name</h2>
<table>
    @foreach (var item in Model.People)
    {
    <tr id="@string.Format("Person-{0}", item.Id)">
        @Html.Partial("EditorSingle", item)
    </tr>
    }
</table>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

行(部分) View :

@model Mvc4TestApp.Models.PersonModel
@using (Ajax.BeginForm("Edit", new AjaxOptions() { InsertionMode = InsertionMode.Replace, UpdateTargetId = string.Format("Person-{0}", Model.Id) }))
{
    <td>@Html.EditorFor(x => x.FirstName)</td>
    <td>@Html.EditorFor(x => x.LastName)</td>
    <td>
        <input type="submit" value="OK" />
        @Html.HiddenFor(x => x.Id)
    </td>
}

这里是一个 Controller :

public class PeopleController : Controller
{
    public ActionResult Index()
    {
        return View(new PeopleGroup()
        {
            Name = "Presidents",
            People = GetPeople()
        });
    }

    public ActionResult Edit(PersonModel model)
    {
        if (ModelState.IsValid)
        {
            var people = GetPeople();
            var original = people.Where(x => x.Id == model.Id).SingleOrDefault();
            if (original != null)
                people.Remove(original);
            people.Add(model);
        }
        return PartialView("EditorSingle", model);
    }

    public ICollection<PersonModel> GetPeople()
    {
        ICollection<PersonModel> collection = Session["people"] as ICollection<PersonModel>;
        if (collection == null)
        {
            collection = new List<PersonModel>() {
                new PersonModel() { Id = 0, FirstName = "George", LastName = "Washington"},
                new PersonModel() { Id = 1, FirstName = "Abraham", LastName = "Lincoln"},
                new PersonModel() { Id = 2, FirstName = "Thomas", LastName = "Jefferson"}
            };
            Session["people"] = collection;
        }
        return collection;
    }
}

我将整个内容作为一个列表(table -> ul, tr -> li, td -> div)进行了测试，没有问题!但作为表格，它仅适用于第一次提交。当我再次提交同一行时，什么也没有发生。我调试了它，问题似乎是，对于通过 ajax 发送的表单，没有抛出任何表单提交事件。我非常有信心这与 ASP MVC 无关。我想说这一定是直接将表单放入 tr 中的问题。

以前有人遇到过这个问题吗？您知道任何解决方法吗？

谢谢!

Answer 1

I'd say it must be an issue with placing a form directly into a tr

是的，就是这样。您需要一个nested table :

@model Mvc4TestApp.Models.PersonModel
<td colspan="3">
    @using (Ajax.BeginForm("Edit", new AjaxOptions() { InsertionMode = InsertionMode.Replace, UpdateTargetId = string.Format("Person-{0}", Model.Id) }))
    {
        <table>
            <tr>
                <td>@Html.EditorFor(x => x.FirstName)</td>
                <td>@Html.EditorFor(x => x.LastName)</td>
                <td>
                    <input type="submit" value="OK" />
                    @Html.HiddenFor(x => x.Id)
                </td>
            </tr>
        </table>
    }
</td>