AjaxForm结果中的AjaxForm

Question

这是我的观点：

@foreach(var item in Model) {
 <tr id="TR@(item.Id)">
    @{Html.RenderPartial("_PhoneRow", item);}
 </tr>
}

_PhoneRow

@model PhoneModel
@using(Ajax.BeginForm("EditPhone", new { id = Model.Id }, new AjaxOptions {
UpdateTargetId = "TR" + Model.Id
})) {
<td>@Html.DisplayFor(modelItem => Model.PhoneNumber)</td>
<td>@Html.DisplayFor(modelItem => Model.PhoneKind)</td>
<td><input type="submit" value="Edit" /></td>
}

控制器：

public ActionResult EditPhone(long Id) {
  //Get model by id
  return PartialView("_EditPhoneRow", model);
}

public ActionResult SavePhone(PhoneModel model) {
  //Save Phone, and Get Updatet model
  return PartialView("_PhoneRow", model);
}

_EditPhoneRow

    @model PhoneModel
@using(Ajax.BeginForm("SavePhone", new { id = Model.Id }, new AjaxOptions {
UpdateTargetId = "TR" + Model.Id
})) {
<td>@Html.EditorFor(modelItem => Model.PhoneNumber)</td>
<td>@Html.EditorFor(modelItem => Model.PhoneKind)</td>
<td><input type="submit" value="Save" /></td>
}

所以当我点击Edit按钮时，_EditPhoneRow被完美地替换了，但是当我点击Save按钮时，没有任何get，问题在哪里呢?为什么当用新的局部视图更新行时，新的Ajax表单不工作呢？我认为这个问题是非常流行的，我只需要编辑-保存在任何行的Ajax，你的建议是什么？或者它的任何来源或好的样本？

Answer 1

您破坏了标记。禁止直接在<tr>下面嵌套<form>元素。当你破坏了标记，你可能会得到不确定的结果。在本例中，这个未定义的结果解释为当您单击第二个表单的submit按钮时，不会引发submit事件，也不会发生任何事情，因为unobtrusive-ajax库为该事件而存在/委托。workaround包含到使用另一个表中。

所以：

_PhoneRo.cshtml

@model PhoneModel
<td>
    @using (Ajax.BeginForm("EditPhone", new { id = Model.Id }, new AjaxOptions { UpdateTargetId = "TR" + Model.Id }))
    {
        <table>
            <tr>
                <td>@Html.DisplayFor(modelItem => modelItem.PhoneNumber)</td>
                <td>@Html.DisplayFor(modelItem => modelItem.PhoneKind)</td>
                <td><input type="submit" value="Edit" /></td>
            </tr>
        </table>
    }
</td>

_EditPhoneRow.cshtml

@model PhoneModel
<td>
    @using (Ajax.BeginForm("SavePhone", new { id = Model.Id }, new AjaxOptions { UpdateTargetId = "TR" + Model.Id }))
    {
        <table>
            <tr>
                <td>@Html.EditorFor(modelItem => modelItem.PhoneNumber)</td>
                <td>@Html.EditorFor(modelItem => modelItem.PhoneKind)</td>
                <td><input type="submit" value="Save" /></td>
            </tr>
        </table>
    }
</td>