asp.net mvc - Remove / Delete a dynamically created partial view mvc -
i trying add remove/delete dynamically created partial view. add script.
$("#btnadd").on('click', function () { $.ajax({ async: false, url: '/employees/add' }).success(function (partialview) { $('#addschedule').append("<tbody>" + partialview + "</tbody>"); }); }); this add controller
public actionresult add() { var schedviewmodel = new facultyschedviewmodel(); return partialview("~/views/employees/_dynamicview.cshtml", schedviewmodel); } this partial view _dynamicview.cshtml
@using(html.begincollectionitem("new")){ <td> @html.actionlink("delete", "deletethis", "mycontroller", null) </td> <td> @html.editorfor(model => @model.schedule, new { htmlattributes = new { @class = "form-control" } }) </td> } what can't figure out
- how id generated beginitemcollection
- use id in remove script
- action on controller
edit 1. how connect button or link removing row
added view on the main of partial view
@for (int = 0; < @model.new.count(); i++) { @html.editorfor(model => @model.new[i]) }
the beginitemcollection add guid indexer controls name , id attributes. has no relevance @ identifying item delete. need add include value of property identifies facultyschedviewmodel object. assuming int id, change partial include button , add id data- attribute
@using(html.begincollectionitem("new")) { <tr> <td><button type="button" class="delete" data-id="@model.id">delete</button></td> <td>@html.editorfor(model => @model.schedule, new { htmlattributes = new { @class = "form-control" } })</td> </tr> } then script
var url = '@url.action("delete")'; // assumes in same controller $('.delete').click(function() { var id = $(this).data('id'); var row = $(this).closest('tr'); if (id) { // or if(id == 0) depending if property nullable row.remove(); // item never existed no need call server return; } $.post(url, { id: id }, function(response) { if(response) { row.remove(); // ok, remove row } else { // oops - display , error message? } }); }); and controller
[httppost] public jsonresult delete(int id) { // delete item in database return json(true); // or if there error, return json(null); indicate failure } side note:
$('#addschedule').append("<tbody>" + partialview + "</tbody>");adding newtbodyelement each item. instead main view should includetbodyelement , giveid$('#addschedule').append(partialview);or use$('#addschedule tbody')append(partialview);- does model posting have property named
new(as indicate inbeginitemcollectionmethod)?
Comments
Post a Comment