当作ajaxForm在当作ajaxForm结果 [英] AjaxForm in result of AjaxForm

问题描述

这是我的看法：

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

所以，当我点击修改按钮的 _EditPhoneRow 替换完美，但是当我点击保存按钮没有任何得到，哪里出了问题？为什么当更新，新的局部视图，该行的新的Ajax形式不工作？我认为这个问题是非常受欢迎的，我只需要编辑，保存使用Ajax在任何行，你有什么建议？或任何来源或它很好的样本？

So When I click Edit Button the _EditPhoneRow Replaced Perfectly, but then when I click on Save button there is not any get, where is the problem?, why when updated the row with new partial view the new Ajax form not working? I think this issue is very popular, I just need Edit-Save With Ajax in any row, what is your suggestion? or any source or good sample for it?

推荐答案

您已经打破标记。禁止以嵌套＆LT;形式GT; 元素的正下方一个＆LT; TR＆GT; 。而当你打破了标记，你可能会得到未定义的结果。在你的情况下，这个不确定的结果转化的事实，当你点击第二种形式的提交按钮提交事件不会引发并没有任何反应，因为不显眼，Ajax库生活/委派此事件。该解决方法由成使用另一个表。

You have broken markup. It is forbidden to nest a <form> element directly beneath a <tr>. And when you have broken markup, you might get undefined result. In your case this undefined result translates by the fact that when you click on the submit button of the second form the submit event is not raised and nothing happens because the unobtrusive-ajax library lived/delegated for this event. The workaround consists into using another table.

所以：

_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>

这篇关于当作ajaxForm在当作ajaxForm结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！