我正在用C#和.NETFramework4.5.1开发一个ASP.NETMVC5Web
我在cshtml
文件中有这个表单
:
@model MyProduct.Web.API.Models.ConnectBatchProductViewModel
@{
布局=空;
}
<;!DOCTYPE html>;
<;html>;
<;头>;
<;meta name=“viewport”content=“width=设备宽度”/>;
<;标题>;创建</标题>;
</头>;
<;车身>;
@如果(@Model!=null)
{
<;h4>;Producto:@Model.Product.ProductCode,Cantidad:@Model.externalcodesforisproduct<;/h4>;
使用(Html.BeginForm(“Save”、“ConnectBatchProduct”、FormMethod.Post))
{
@Html.HiddenFor(model=>;model.Product.Id,新的{@Id=“productId”,@Name=“productId”});
<;div>;
<;table id=“batchTable”class=“订单列表”>;
<;thead>;
<;tr>;
<;td>;康蒂达<;/td>;
<;td>;Lote<;/td>;
<;/tr>;
<;/thead>;
<;t车身>;
<;tr>;
<;td>;@Html.TextBox(“ConnectBatchProductViewModel.BatchProducts[0].Quantity”)<;/td>;
<;td>;@Html.TextBox(“ConnectBatchProductViewModel.BatchProducts[0].BatchName”)<;/td>;
<;td>;lt;a class=“deleteRow”>;lt;/a>;lt;/td>;
<;/tr>;
<;/t车身>;
<;tfoot>;
<;tr>;
<;td colspan=“5”style=“文本对齐:左;”;
<;input type=“button”id=“addrow”value=“Add Row”/>;
<;/td>;
<;/tr>;
<;/t启动>;
<;/table>;
<;/div>;
<;p>;lt;输入类型=“提交”值=“选择”/>;lt;/p>;
}
}
其他的
{
<;div>;错误。<;/div>;
}
<;脚本src=”https://stackoverflow.com/questions/29161481/~/Scripts/jquery-2.1.3.min.js“></脚本>;
<;脚本src=”https://stackoverflow.com/questions/29161481/~/js/createBatches.js“></脚本><;!--资源jQuery-->;
</车身>;
</html>;
这就是行动方法:
[HttpPost]
公共操作结果保存(FormCollection表单)
{
返回null;
}
和两个ViewModel
:
公共类BatchProductViewModel
{
公共整数数量{get;set;}
公共字符串BatchName{get;set;}
}
公共类ConnectBatchProductViewModel
{
公共模型.产品产品{get;set;}
公共int ExternalCodesForThisProduct{get;set;}
public IEnumerable<;BatchProductViewModel>;BatchProducts{get;set;}
}
但是我在FormCollection表单中得到了这个:
但是我想得到一个IEnumerable<;BatchProductViewModel>;型号
:
公共操作结果保存(int-productId,IEnumerable<;BatchProductViewModel>;model);
如果使用上述方法签名,则两个参数都为null
我需要一个IEnumerable
,因为用户将使用jQuery动态添加更多行
这是jQuery
脚本:
jQuery(文档).ready(函数($){
var计数器=0;
$(“#添加行”)。在(“单击”上,函数(){
计数器=$('#batchTable tr')。长度-2;
var newRow=$(“<;tr>;”);
var cols=“”;
变量数量='ConnectBatchProductViewModel.BatchProducts[0].quantity'。替换(/\[.{1}\]/,'['+计数器+']);
var batchName='ConnectBatchProductViewModel.BatchProducts[0].batchName'。替换(/\[.{1}\]/,'['+计数器+']);
cols+='<;td>;<;输入类型=“文本”名称=“”+数量+”/>;<;/td>;
cols+='<;td>;<;input type=“text”name=“”+batchName+”/>;<;/td>;
cols+='<;td>;<;输入类型=“button”class=“ibtnDel”value=“Delete”>;<;/td>;
newRow.append(cols);
$(“table.order list”).append(newRow);
计数器++;
});
$(“table.order list”)。在(“click”、“.ibtnDel”上,函数(事件){
$(this).tr.remove();
计数器-=1
$('#addrow').attr('disabled',false).prop('value','addrow');
});
});
有什么想法吗
我已经检查了这个答案,还有这篇文章,但是我的代码没有工作
您需要在for
循环中为集合生成控件,以便使用索引器正确命名这些控件(请注意,属性BatchProducts
需要IList<;BatchProductViewModel>;
@使用(Html.BeginForm(“保存”、“连接批处理产品”、FormMethod.Post))
{
....
<;表格>;
....
@对于(int i=0;i<;Model.BatchProducts.Count;i++)
{
<;tr>;
<;td>;@Html.TextBoxFor(m=>;m.BatchProducts[i].Quantity)<;/td>;
<;td>;@Html.TextBoxFor(m=>;m.BatchProducts[i].BatchName)<;/td>;
<;td>;
//添加以下内容以允许动态删除视图中的项目
<;input type=“hidden”name=“BatchProducts.Index”value=“@i”/>;
<;a class=“deleteRow”>;<;/a>;
<;/td>;
<;/tr>;
}
....
<;/table>;
....
}
那么POST方法需要
公共操作结果保存(ConnectBatchProductViewModel模型)
{
….
}
编辑
注意:在编辑之后,如果要在视图中动态添加和删除BatchProductViewModel
项,则需要使用BeginCollectionItem
帮助程序或本答案中讨论的html模板
动态添加新项目的模板将是
<;div id=“NewBatchProduct”style=“display:none”>;
<;tr>;
<;td>;lt;输入type=“text”name=“BatchProducts[#].Quantity”值/>;lt;/td>;
<;td>;lt;输入type=“text”name=“BatchProducts[#].BatchName”值/>;lt;/td>;
<;td>;
<;input type=“hidden”name=“BatchProducts.Index”value=“%”/>;
<;a class=“deleteRow”>;<;/a>;
<;/td>;
<;/tr>;
<;/div>;
请注意,虚拟索引器和隐藏输入的不匹配值会阻止此模板发回
然后添加新的BatchProducts
的脚本将是
$(“#添加行”)。单击(函数(){
变量索引=(新日期()).getTime();//唯一索引器
var clone=$('#NewBatchProduct')。clone();//克隆BatchProducts项
//更新克隆的索引
html($(clone.html().replace(/\[\]/g,['+index+']);
html($(clone.html().replace(/“%”/g,“'+index+”));
$(“table.order list”).append(clone.html());
});