jquery - A view to add and remove items from a collection on the same view -

i'm creating view allows user add , remove objects in list in particular way client wants. user has able add or remove multiple forms on page before submitting. when page posts needs display what's in list, option remove each item, plus allow user add/remove more objects before submitting again.

i'm able use jquery , partial view let user add or remove new forms before submitting. can't figure out how provide button remove objects in list previous submit.

can me out this? appreciated.

here's i've figured out far. in view:

@using (html.beginform()) {     <div id="recipients">         @foreach (var p in model)         {             @html.partial("_recipient", p)         }          <div id="recipients0"></div>     </div>     <button id="add" type="button">add</button>     <button id="remove" type="button">remove</button>     <input type="submit" value="save" /> }  <script type="text/javascript">     $('#add').click(function () {         var url = '@url.action("recipient")';         var div = $('#recipients');         var divlast = $('div[id^="recipients"]:last');          var num = parseint(divlast.prop("id").match(/\d+/g), 10) + 1;           var newdiv = $(document.createelement('div')).attr('id', 'recipients' + num)//rest of code          $.get(url, function (response) {             div.append(newdiv);             newdiv.append(response);         });     })     $('#remove').click(function () {         var div = $('#recipients');         var divlast = $('div[id^="recipients"]:last');         var num = parseint(divlast.prop("id").match(/\d+/g), 10);         alert("div[id='recipients" + num + "']");         $("div[id='recipients" + num + "']").remove();         //div.remove('div[id^="recipients' + num + '"]');     }) 

the partial view form add data new object:

@using (html.begincollectionitem("recipients")) {     @html.hiddenfor(m => m.id)     @html.labelfor(m => m.recipient)     @html.textboxfor(m => m.recipient)     @html.validationmessagefor(m => m.recipient)     <br />     @html.labelfor(m => m.amount)     @html.textboxfor(m => m.amount)     @html.validationmessagefor(m => m.amount)   } <td>     @ajax.actionlink(         "remove",         "remove",         "cashrecipients",          new ajaxoptions         {             httpmethod = "post",             onsuccess = "ondeletesuccess"         }     ) </td> <script src="~/scripts/jquery.unobtrusive-ajax.js"></script>  <script>     var ondeletesuccess = function (result) {         alert('howdy');     }; </script> 

my controller:

    public partialviewresult recipient()     {         return partialview("_recipient", new cashrecipientviewmodel());     }      // get:      public actionresult create()     {         list<cashrecipientviewmodel> model = new list<cashrecipientviewmodel>();          return view(model);     }      // post: cashrecipients/create     [httppost]     public actionresult create([bind(include = "id,amount,recipient")] ienumerable<cashrecipientviewmodel> recipients)     {          return view(recipients);      } 

my view model:

public class cashrecipientviewmodel {     public int? id { get; set; }     public decimal amount { get; set; }     [required(errormessage = "please enter name of recipient")]     public string recipient { get; set; } } 

having single 'remove' button not make sense , need 'remove' associated each item in collection. in addition, remove id attributes <div> elements , use relative selectors.

change partial to

@using (html.begincollectionitem("recipients")) {     <div class="item" data-id="@model.id"> // add enclosing element         @html.hiddenfor(m => m.id)         @html.labelfor(m => m.recipient)         @html.textboxfor(m => m.recipient)         @html.validationmessagefor(m => m.recipient)         @html.labelfor(m => m.amount)         @html.textboxfor(m => m.amount)         @html.validationmessagefor(m => m.amount)         <button type="button" class="remove">remove</button> // add button     </div> } 

the in main view, scripts be

var url = '@url.action("recipient")'; var recipients = $('#recipients'); $('#add').click(function () {     $.get(url, function (response) {         recipients.append(response);     }); }); $('#recipients').on('click', '.remove', (function() {     var container = $(this).closest('.item');     var id = container.data('id');     if (!id) {         container.remove();     } else {         // see notes below     } } 

for items have been added in view, value of property id null , code in if block remove item view. existing items may editing (where id has value), need consider how remove database. options include

1. adding additional property in view model (say) public bool isdeleted { get; set; } , including hidden input in partial it. set true when submit, can delete recipients.where(x => x.isdeleted);

   @html.hiddenfor(m => m.isdeleted, new { @class = "flag" })  } else {     container.find('.flag').val('true'); } 

2. making ajax call server method deletes item database, , if successful, remove associated container dom

   } else {     $.post(yourdeleteurl, { id: id }, function(response) {         if(response) {             container.remove()         } else {             // oops, went wrong         }     }); }