asp.net mvc 4 - Submit same Partial View called multiple times data to controller? -

i have added button in view. when button clicked partial view added. in form can add partial view can. when submitting form data unable send partial view data controller. have made different model having attributes , have made list of model main model. can please give me trick can send partial view content controller?

in view

<div id="csqgroup">    </div> <div>   <input type="button" value="add field" id="addfield" onclick="addfieldss()" /> </div>  function addfieldss() {       $.ajax({     url: '@url.content("~/adminproduct/getcolorsizeqty")',     type: 'get',     success:function(result) {       var newdiv = $(document.createelement("div")).attr("id", 'csq' + mycounter);         newdiv.html(result);       newdiv.appendto("#csqgroup");       mycounter++;     },     error: function(result) {       alert("failure");     }   }); } 

in controller

public actionresult getcolorsizeqty() {   var data = new adminproductdetailmodel();   data.colorlist = commoncore.getalltypeoflist("color");   data.sizelist = commoncore.getalltypeoflist("size");   return partialview(data); }  [httppost] public actionresult adddetail(adminproductdetailmodel model) {   .... } 

in partial view

@model ikle.model.productmodel.adminproductdetailmodel <div class="editor-field">   @html.labelfor(model => model.fkconfigchoicecategorysizeid)   @html.dropdownlistfor(model => model.fkconfigchoicecategorysizeid, model.sizelist, "--select size--")   @html.validationmessagefor(model => model.fkconfigchoicecategorysizeid) </div> <div class="editor-field">   @html.labelfor(model => model.fkconfigchoicecategorycolorid)   @html.dropdownlistfor(model => model.fkconfigchoicecategorycolorid, model.colorlist, "--select color--")   @html.validationmessagefor(model => model.fkconfigchoicecategorycolorid) </div>    <div class="editor-field">   @html.labelfor(model => model.producttotalquantity)   @html.textboxfor(model => model.producttotalquantity)   @html.validationmessagefor(model => model.producttotalquantity) </div> 

your problem partial renders html based on single adminproductdetailmodel object, yet trying post collection. when dynamically add new object continue add duplicate controls <input name="producttotalquantity" ..> (this creating invalid html because of duplicate id attributes) need <input name="[0].producttotalquantity" ..>, <input name="[1].producttotalquantity" ..> etc. in order bind collection on post back.

the defaultmodelbinder required indexer collection items start @ 0 , consecutive, or form values include index=somevalue indexer somevalue (for example <input name="[abc].producttotalquantity" ..><input name="index" value="abc">. explained in detail in phil haack's article model binding list. using index approach better because allows delete items list (otherwise necessary rename existing controls indexer consecutive).

two possible approaches issue.

option 1

use beginitemcollection helper partial view. helper render hidden input index value based on guid. need in both partial view , loop render existing items. partial like

@model ikle.model.productmodel.adminproductdetailmodel @using(html.begincollectionitem())  {   <div class="editor-field">     @html.labelfor(model => model.fkconfigchoicecategorysizeid)     @html.dropdownlistfor(model => model.fkconfigchoicecategorysizeid, model.sizelist, "--select size--")     @html.validationmessagefor(model => model.fkconfigchoicecategorysizeid)   </div>   .... } 

option 2

manually create html elements representing new object 'fake' indexer, place them in hidden container, in add button event, clone html, update indexers , index value , append cloned elements dom. make sure html correct, create 1 default object in for loop , inspect html generates. example of approach shown in this answer

<div id="newitem" style="display:none">    <div class="editor-field">     <label for="_#__producttotalquantity">quantity</label>     <input type="text" id="_#__producttotalquantity" name="[#].producttotalquantity" value />     ....   </div>   // more properties of model </div> 

note use of 'fake' indexer prevent 1 being bound on post ('#' , '%' wont match ignored defaultmodelbinder)

$('#addfield').click(function() {   var index = (new date()).gettime();    var clone = $('#newitem').clone();   // update indexer , index value of clone   clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']'));   clone.html($(clone).html().replace(/"%"/g, '"' + index  + '"'));   $('#yourcontainer').append(clone.html()); } 

the advantage of option 1 typing view model, means making call server each time add new item. advantage of option 2 done client side, if make changes model (e.g. add validation attribute property) need manually update html, making maintenance bit harder.

finally, if using client side validation (jquery-validate-unobtrusive.js), need re-parse validator each time add new elements dom explained in this answer.

$('form').data('validator', null); $.validator.unobtrusive.parse($('form')); 

and of course need change post method accept collection

[httppost] public actionresult adddetail(ienumerable<adminproductdetailmodel> model) {   .... }