javascript - A Partial View passing a collection using the Html.BeginCollectionItem helper -

i made small project understand answer stephen muecke here: submit same partial view called multiple times data controller?

almost works. javascript adds new fields partial view, , can tell they're bound model "temp" values inserted controller method partial view.

however, when submit new fields addrecord() method throws exception showing model isn't getting passed in ("object reference not set instance of object").

also, when view page source, begincollectionitem helper inserting hidden tag should around table in main view displays pre-existing records, not around new fields javascript adds.

what doing wrong? i'm pretty new @ patience!

my main view:

@model ienumerable<dynamicform.models.cashrecipient>  @using (html.beginform("adddetail", "cashrecipients", formmethod.post)) {     @html.antiforgerytoken()     <div id="csqgroup">     </div> }  <div>     <input type="button" value="add field" id="addfield" onclick="addfieldss()" /> </div>  <script>     function addfieldss()     {            //alert("ajax call");         $.ajax({             url: '@url.content("~/cashrecipients/recipientform")',             type: 'get',             success:function(result) {                 //alert("success");                 var newdiv = document.createelement("div");                  var newcontent = document.createtextnode("hi there , greetings!");                  newdiv.appendchild(newcontent);                   newdiv.innerhtml = result;                 var currentdiv = document.getelementbyid("div1");                   document.getelementbyid("csqgroup").appendchild(newdiv);             },             error: function(result) {                 alert("failure");             }         });     } </script> 

my partial view:

@model dynamicform.models.cashrecipient @using htmlhelpers.begincollectionitem  @using (html.begincollectionitem("recipients")) {     <div class="editor-field">         @html.labelfor(model => model.id)         @html.labelfor(model => model.cashamount)         @html.textboxfor(model => model.cashamount)         @html.labelfor(model => model.recipientname)         @html.textboxfor(model => model.recipientname)     </div>     <div class="form-group">         <div class="col-md-offset-2 col-md-10">             <input type="submit" value="save" class="btn btn-default" />         </div>     </div> } 

my model:

public class cashrecipient {     public int id { get; set; }     public string cashamount { get; set; }     public string recipientname { get; set; }   } 

in controller:

[httppost] [validateantiforgerytoken] public actionresult adddetail([bind(include = "id,cashamount,recpientname")] ienumerable<cashrecipient> cashrecipient) {     if (modelstate.isvalid)     {         foreach (cashrecipient p in cashrecipient) {             db.cashrecipients.add(p);         }         db.savechanges();         return redirecttoaction("index");      }      return view(cashrecipient); }  public actionresult recipientform() {     var data = new cashrecipient();     data.cashamount = "temp";     data.recipientname = "temp";     return partialview(data); } 

first start creating view model represent want edit. i'm assuming cashamount monetary value, therefore should decimal (add other validation , display attributes required)

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

then create partial view (say) _recipient.cshtml

@model cashrecipientvm <div class="recipient">     @using (html.begincollectionitem("recipients"))     {         @html.hiddenfor(m => m.id, new { @class="id" })         @html.labelfor(m => m.recipient)         @html.textboxfor(m => m.recipient)         @html.validationmesssagefor(m => m.recipient)         @html.labelfor(m => m.amount)         @html.textboxfor(m => m.amount)         @html.validationmesssagefor(m => m.amount)         <button type="button" class="delete">delete</button>     } </div> 

and method return partial

public partialviewresult recipient() {     return partialview("_recipient", new cashrecipientvm()); } 

then main method be

public actionresult create() {     list<cashrecipientvm> model = new list<cashrecipientvm>();     .... // add existing objects editing     return view(model); } 

and view be

@model ienumerable<cashrecipientvm> @using (html.beginform()) {     <div id="recipients">         foreach(var recipient in model)         {             @html.partial("_recipient", recipient)         }     </div>     <button id="add" type="button">add</button>     <input type="submit" value="save" /> } 

and include script add html new cashrecipientvm

var url = '@url.action("recipient")'; var form = $('form'); var recipients = $('#recipients'); $('#add').click(function() {     $.get(url, function(response) {         recipients.append(response);         // reparse validator client side validation         form.data('validator', null);         $.validator.unobtrusive.parse(form);     }); }); 

and script delete item

$('.delete').click(function() {     var container = $(this).closest('.recipient');     var id = container.find('.id').val();     if (id) {         // make ajax post delete item         $.post(yourdeleteurl, { id: id }, function(result) {             container.remove();         }.fail(function (result) {             // oops, went wrong (display error message?)         }     } else {         // never existed, remove container         container.remove();     } }); 

and form post

public actionresult create(ienumerable<cashrecipientvm> recipients)