我在我的视图中添加了一个按钮.单击此按钮时,将添加部分视图.在我的表单中,我可以添加尽可能多的部分视图.当提交此表单数据时,我无法将所有部分视图数据发送到控制器.
我做了一个不同的模型,具有所有的属性,我已经列出了该模型到我的主要模型.任何人都可以给我一些技巧,以便我可以将所有部分视图内容发送到我的控制器？
我做了一个不同的模型,具有所有的属性,我已经列出了该模型到我的主要模型.任何人都可以给我一些技巧,以便我可以将所有部分视图内容发送到我的控制器？
在我看来
<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)
{
....
}
