夏奈尔成功的一种形式阵列 [英] POST a form array without successful
问题描述
我开发一个ASP.NET MVC的Web 5用C＃和.NET Framework 4.5.1。
I'm developing an ASP.NET MVC 5 web with C# and .NET Framework 4.5.1.
我有这样的格式在 CSHTML 文件：
@model MyProduct.Web.API.Models.ConnectBatchProductViewModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Create</title>
</head>
<body>
@if (@Model != null)
{
<h4>Producto: @Model.Product.ProductCode, Cantidad: @Model.ExternalCodesForThisProduct</h4>
using (Html.BeginForm("Save", "ConnectBatchProduct", FormMethod.Post))
{
@Html.HiddenFor(model => model.Product.Id, new { @id = "productId", @Name = "productId" });
<div>
<table id ="batchTable" class="order-list">
<thead>
<tr>
<td>Cantidad</td>
<td>Lote</td>
</tr>
</thead>
<tbody>
<tr>
<td>@Html.TextBox("ConnectBatchProductViewModel.BatchProducts[0].Quantity")</td>
<td>@Html.TextBox("ConnectBatchProductViewModel.BatchProducts[0].BatchName")</td>
<td><a class="deleteRow"></a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: left;">
<input type="button" id="addrow" value="Add Row" />
</td>
</tr>
</tfoot>
</table>
</div>
<p><input type="submit" value="Seleccionar" /></p>
}
}
else
{
<div>Error.</div>
}
<script src="~/Scripts/jquery-2.1.3.min.js"></script>
<script src="~/js/createBatches.js"></script> <!-- Resource jQuery -->
</body>
</html>
这是操作方法：
[HttpPost]
public ActionResult Save(FormCollection form)
{
return null;
}
和两视图模型：
public class BatchProductViewModel
{
public int Quantity { get; set; }
public string BatchName { get; set; }
}
public class ConnectBatchProductViewModel
{
public Models.Products Product { get; set; }
public int ExternalCodesForThisProduct { get; set; }
public IEnumerable<BatchProductViewModel> BatchProducts { get; set; }
}
不过，我得到这个的FormCollection形式 VAR：
But I get this in FormCollection form var:
但我想获得一个的IEnumerable＆LT; BatchProductViewModel＆GT;模型：
public ActionResult Save(int productId, IEnumerable<BatchProductViewModel> model);
如果我用上面的方法签名两个参数为空。
If I use the above method signature both parameters are null.
我要一个的IEnumerable ，因为用户要动态地添加使用jQuery多行。
I want an IEnumerable because user is going to add more rows dynamically using jQuery.
这是的jQuery 脚本：
jQuery(document).ready(function ($) {
var counter = 0;
$("#addrow").on("click", function () {
counter = $('#batchTable tr').length - 2;
var newRow = $("<tr>");
var cols = "";
var quantity = 'ConnectBatchProductViewModel.BatchProducts[0].Quantity'.replace(/\[.{1}\]/, '[' + counter + ']');
var batchName = 'ConnectBatchProductViewModel.BatchProducts[0].BatchName'.replace(/\[.{1}\]/, '[' + counter + ']');
cols += '<td><input type="text" name="' + quantity + '"/></td>';
cols += '<td><input type="text" name="' + batchName + '"/></td>';
cols += '<td><input type="button" class="ibtnDel" value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function (event) {
$(this).closest("tr").remove();
counter -= 1
$('#addrow').attr('disabled', false).prop('value', "Add Row");
});
});
任何想法？
我已经检查这个 SO回答和的这篇文章，但我没有得到我的code工作。
I have checked this SO answer, and this article but I don't get my code working.
推荐答案
您需要生成控件以为循环的集合，以便它们能够被正确使用索引器命名（注意财产 BatchProducts 必须的IList＆LT; BatchProductViewModel＆GT;
You need to generate the controls for the collection in a for loop so they are correctly named with indexers (note that property BatchProducts needs to be IList<BatchProductViewModel>
@using (Html.BeginForm("Save", "ConnectBatchProduct", FormMethod.Post))
{
....
<table>
....
@for(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>
// add the following to allow for dynamically deleting items in the view
<input type="hidden" name="BatchProducts.Index" value="@i" />
<a class="deleteRow"></a>
</td>
</tr>
}
....
</table>
....
}
然后POST方法必须是
Then the POST method needs to be
public ActionResult Save(ConnectBatchProductViewModel model)
{
....
}
修改
注：另外您的编辑，如果你要动态地添加和删除 BatchProductViewModel 在他的项目视图中，您将需要使用 BeginCollectionItem 助手或在<一个讨论了HTML模板href=\"http://stackoverflow.com/questions/28019793/submit-same-partial-view-called-multiple-times-data-to-controller/28081308#28081308\">this回答
Note: Further to your edit, if you want to dynamically add and remove BatchProductViewModel items in he view, you will need to use the BeginCollectionItem helper or a html template as discussed in this answer
动态地添加新的项目模板是
The template to dynamically add new items would be
<div id="NewBatchProduct" style="display:none">
<tr>
<td><input type="text" name="BatchProducts[#].Quantity" value /></td>
<td><input type="text" name="BatchProducts[#].BatchName" value /></td>
<td>
<input type="hidden" name="BatchProducts.Index" value ="%"/>
<a class="deleteRow"></a>
</td>
</tr>
</div>
请注意虚拟索引和隐藏的输入prevents此模板回发不匹配的值。
Note the dummy indexers and the non-matching value for the hidden input prevents this template posting back.
然后脚本添加一个新的 BatchProducts 是
Then the script to add a new BatchProducts would be
$("#addrow").click(function() {
var index = (new Date()).getTime(); // unique indexer
var clone = $('#NewBatchProduct').clone(); // clone the BatchProducts item
// Update the index of the clone
clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']'));
clone.html($(clone).html().replace(/"%"/g, '"' + index + '"'));
$("table.order-list").append(clone.html());
});
这篇关于夏奈尔成功的一种形式阵列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
