将多次调用的同一局部视图提交给控制器？

Question

将多次调用的同一局部视图提交给控制器？

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

在我看来

<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&nbsp;，但你试图回发一个集合。当您动态地添加一个新的对象，你继续增加，看起来像重复控制<input name="productTotalQuantity" ..>（这也创造因为重复的无效的HTML&nbsp;id属性），其中作为他们需要<input name="[0].productTotalQuantity" ..>，<input name="[1].productTotalQuantity" ..>等等，以绑定到一个集合上回发。的DefaultModelBinder要求，对于藏品的索引从零开始，并是连续的，或者表单值包括Index=someValue其中P是someValue（例如<input name="[ABC].productTotalQuantity" ..><input name="Index" value="ABC">，这在菲尔哈克的文章中详细解释模型绑定到一个列表。使用索引方法通常更好，因为它还允许您从列表中删除项目（否则，有必要重命名所有现有控件，以便索引器是连续的）。两种可能的解决方法。选项1对部分视图使用BeginItemCollection帮助器。此帮助程序将Index基于GUID&nbsp;呈现值的隐藏输入。您需要在局部视图和渲染现有项目的循环中使用它。你的部分看起来像@model&nbsp;IKLE.Model.ProductModel.AdminProductDetailModel@using(Html.BeginCollectionItem())&nbsp;{ &nbsp;&nbsp;<div&nbsp;class="editor-field"> &nbsp;&nbsp;&nbsp;&nbsp;@Html.LabelFor(model&nbsp;=>&nbsp;model.fkConfigChoiceCategorySizeId) &nbsp;&nbsp;&nbsp;&nbsp;@Html.DropDownListFor(model&nbsp;=>&nbsp;model.fkConfigChoiceCategorySizeId,&nbsp;Model.sizeList,&nbsp;"--Select&nbsp;Size--") &nbsp;&nbsp;&nbsp;&nbsp;@Html.ValidationMessageFor(model&nbsp;=>&nbsp;model.fkConfigChoiceCategorySizeId) &nbsp;&nbsp;</div> &nbsp;&nbsp;....}选项2手动创建表示具有“假”索引器的新对象的html元素，将它们放在隐藏容器中，然后在“添加”按钮事件中，克隆html，更新索引器和索引值，并将克隆元素附加到DOM。要确保html正确，请在for循环中创建一个默认对象并检查它生成的html。此答案中显示了此方法的一个示例<div&nbsp;id="newItem"&nbsp;style="display:none"> &nbsp;&nbsp;<div&nbsp;class="editor-field"> &nbsp;&nbsp;&nbsp;&nbsp;<label&nbsp;for="_#__productTotalQuantity">Quantity</label> &nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type="text"&nbsp;id="_#__productTotalQuantity"&nbsp;name="[#].productTotalQuantity"&nbsp;value&nbsp;/> &nbsp;&nbsp;&nbsp;&nbsp;.... &nbsp;&nbsp;</div> &nbsp;&nbsp;//&nbsp;more&nbsp;properties&nbsp;of&nbsp;your&nbsp;model</div>注意使用'假'索引器来防止这个被绑定在帖子后面（'＃'和'％'不匹配，所以它们会被忽略DefaultModelBinder）$('#addField').click(function()&nbsp;{ &nbsp;&nbsp;var&nbsp;index&nbsp;=&nbsp;(new&nbsp;Date()).getTime();&nbsp; &nbsp;&nbsp;var&nbsp;clone&nbsp;=&nbsp;$('#NewItem').clone(); &nbsp;&nbsp;//&nbsp;Update&nbsp;the&nbsp;indexer&nbsp;and&nbsp;Index&nbsp;value&nbsp;of&nbsp;the&nbsp;clone &nbsp;&nbsp;clone.html($(clone).html().replace(/\[#\]/g,&nbsp;'['&nbsp;+&nbsp;index&nbsp;+&nbsp;']')); &nbsp;&nbsp;clone.html($(clone).html().replace(/"%"/g,&nbsp;'"'&nbsp;+&nbsp;index&nbsp;&nbsp;+&nbsp;'"')); &nbsp;&nbsp;$('#yourContainer').append(clone.html());}选项1的优点是您强烈键入模型的视图，但这意味着每次添加新项目时都要调用服务器。选项2的优点是它全部完成了客户端，但如果你对模型进行任何更改（例如向属性添加验证属性），那么你还需要手动更新html，使维护更加困难。最后，如果您正在使用客户端验证（jquery-validate-unobtrusive.js），那么每次向DOM添加新元素时都需要重新解析验证器，如本答案中所述。$('form').data('validator',&nbsp;null);$.validator.unobtrusive.parse($('form'));当然，您需要更改POST方法以接受集合[HttpPost]public&nbsp;ActionResult&nbsp;AddDetail(IEnumerable<AdminProductDetailModel>&nbsp;model){ &nbsp;&nbsp;....}