AjaxForm in result of AjaxForm

Question

This is My View:

@foreach(var item in Model) {
 
    @{Html.RenderPartial(\"_PhoneRow\", item);}
 
}

Answer 1

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.

So:

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