asp.net-mvc-4 – 提交相同的部分视图多次调用数据到控制器？

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

您的问题是部分基于单个AdminProductDetailModel对象呈现html,但您尝试发布一个集合.当您动态添加新对象时,您将继续添加类似于< input name =“productTotalQuantity”的重复控件.> (这也是由于重复的id属性而创建无效的html),因为它们需要是< 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 A List中有详细解释.使用Index方法通常更好,因为它也允许您从列表中删除项目(否则将是必须重命名所有现有的控件,以便索引器是连续的).

你的问题的两种可能的方法.

选项1

使用BeginItemCollection帮助器进行部分视图.该帮助器将为基于GUID的Index值呈现隐藏的输入.您需要在部分视图和渲染现有项目的循环中.你的部分会看起来像

@model IKLE.Model.ProductModel.AdminProductDetailModel
@using(Html.BeginCollectionItem()) 
{
  <div class="editor-field">
    @Html.LabelFor(model => model.fkConfigChoiceCategorySizeId)
    @Html.DropDownListFor(model => model.fkConfigChoiceCategorySizeId,"--Select Size--")
    @Html.ValidationMessageFor(model => model.fkConfigChoiceCategorySizeId)
  </div>
  ....
}

选项2

手动创建表示一个新对象的html元素,并使用’fake’索引器,将它们放在隐藏的容器中,然后在Add按钮事件中,克隆html,更新索引器和Index值,并将克隆的元素附加到DOM中.为了确保html是正确的,在for循环中创建一个默认对象,并检查它生成的html.这种方法的一个例子在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 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的优点是您强烈地将视图打印到您的模型,但这意味着每次添加新项目时都会调用该服务器.选项2的优点是它完全是客户端,但如果您对模型进行任何更改(例如,将属性添加到验证属性),那么您还需要手动更新html,从而使维护更难.

最后,如果您使用客户端验证(jquery-validate-unobtrusive.js),那么每次向DOM添加新元素时,都需要重新解析验证器,如this answer所述.

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

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

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