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

Question

我试图有一个可编辑的表，其中每行是一个视图，可以单独提交，为了收获模型验证等的所有好处。

这是我得到的:
模型:

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; }
}

列表视图:

@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")
}

Row (partial) 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>
}

这里有一个控制器:

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;
    }
}

我测试了整个事情作为一个列表(表-> ul, tr -> li, td ->div)的工作，没有问题!但作为一个表，它只适用于第一次提交。当我再次提交同一行时，什么都没有发生。我对它进行了调试，问题似乎是没有为通过ajax生成的表单抛出表单提交事件。我很有信心这与asp mvc无关。我想说，这一定是一个问题，把一个表单直接放到一个tr。

以前有人遇到过这个问题吗?你知道有什么变通办法吗?

谢谢!

Answer 1

我想说，直接将表单放入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>