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 Кнопка там не получить, где проблема? Почему при обновлении строки с новым частичным представлением новая форма Ajax не работает? Я думаю, что эта проблема очень популярна, мне просто нужно Edit-Save With Ajax в любом ряду, что вы предлагаете? или любой источник или хороший образец для этого?

Answer 1

Вы сломали разметку. Запрещено вкладывать <form> элемент непосредственно под <tr>, А когда вы сломали разметку, вы можете получить неопределенный результат. В вашем случае этот неопределенный результат преобразуется в тот факт, что при нажатии на кнопку отправки второй формы событие отправки не возникает и ничего не происходит, потому что библиотека unobtrusive-ajax жила / делегировалась для этого события. Обходной путь заключается в использовании другой таблицы.

Так:

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