提交相同的部分视图调用多次数据到控制器？

我在视图中添加了一个button。 点击此button时，将添加部分视图。 在我的表格中，我可以添加尽可能多的部分视图。 提交此表单数据时，我无法将所有部分视图数据发送到控制器。 我做了一个具有所有属性的不同模型，并且已经为我的主模型列出了该模型的列表。 任何人都可以请给我一些技巧，以便我可以将所有的部分视图内容发送到我的控制器？

在我看来

<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"); } }); } 

在我的控制器

 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) { .... } 

在我的部分视图

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

Answer 1

您的问题是部分呈现基于单个AdminProductDetailModel对象的HTML，但您正试图回发一个集合。 当你dynamic地添加一个新的对象时，你继续添加重复的控件，看起来像<input name="productTotalQuantity" ..> （这也创build无效的HTML，因为重复的id属性），因为他们需要<input name="[0].productTotalQuantity" ..> ， <input name="[1].productTotalQuantity" ..>等等，以便在回发时绑定到集合。

DefaultModelBinder要求收集项目的索引器从零开始并且是连续的，或者表单值包括Index=someValue ，其中索引器是someValue （例如<input name="[ABC].productTotalQuantity" ..><input name="Index" value="ABC">这个在Phil Haack的文章Model Binding To List中有详细的解释，使用Index方法通常更好，因为它也允许你从列表中删除项目（否则它会是必须重命名所有现有的控件，使索引器连续）。

两个可能的办法来解决你的问题

选项1

使用BeginItemCollection助手作为局部视图。 该帮助程序将根据GUID呈现Index值的隐藏input。 您在部分视图和呈现现有项目的循环中都需要这个。 你的部分会看起来像

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

选项2

使用“假”索引器手动创build表示新对象的html元素，将它们放在隐藏的容器中，然后在添加button事件中克隆html，更新索引器和索引值并将克隆的元素附加到DOM。 为了确保html是正确的，在for循环中创build一个默认对象并检查它生成的html。 这个答案显示了这种方法的一个例子

 <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 your model </div> 

注意使用“假”索引器来防止这个绑定在回发（'＃'和'％'将不匹配，所以他们被DefaultModelBinder忽略）

 $('#addField').click(function() { var index = (new Date()).getTime(); var clone = $('#NewItem').clone(); // Update the indexer and Index value of the clone clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']')); clone.html($(clone).html().replace(/"%"/g, '"' + index + '"')); $('#yourContainer').append(clone.html()); } 

选项1的优点在于，您强烈地将模型的视图input到模型中，但这意味着每次添加新项目时都需要调用服务器。 选项2的优点是它的所有完成的客户端，但是如果你对你的模型做任何改变（例如添加一个validation属性到一个属性），那么你也需要手动更新HTML，使维护有点困难。

最后，如果你正在使用客户端validation（jquery-validate-unobtrusive.js），那么你需要在每次向DOM中添加新元素时重新parsingvalidation器，正如本答案所述 。

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

当然，你需要改变你的POST方法来接受一个集合

 [HttpPost] public ActionResult AddDetail(IEnumerable<AdminProductDetailModel> model) { .... }