ajax - AjaxForm in result of AjaxForm -

this view:

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

controller:

public actionresult editphone(long id) { //get model id return partialview("_editphonerow", model); } public actionresult savephone(phonemodel model) { //save phone, , 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> } 

so when click edit button _editphonerow replaced perfectly, when click on save button there not get, problem?, why when updated row new partial view new ajax form not working? think issue popular, need edit-save ajax in row, suggestion? or source or sample it?

you have broken markup. forbidden nest <form> element directly beneath <tr>. , when have broken markup, might undefined result. in case undefined result translates fact when click on submit button of second form submit event not raised , nothing happens because unobtrusive-ajax library lived/delegated event. workaround consists using 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>