【发布时间】：2015-05-23 13:32:41
【问题描述】：
我正在使用 C# 和 .NET Framework 4.5.1 开发一个 ASP.NET MVC 5 Web。
我在cshtml 文件中有这个form：
@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;
}
还有两个ViewModel：
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 form var 中得到了这个：
但我想得到一个IEnumerable<BatchProductViewModel> model：
public ActionResult Save(int productId, IEnumerable<BatchProductViewModel> model);
如果我使用上面的方法签名，两个参数都是空的。
我想要一个IEnumerable，因为用户将使用 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 answer 和 this article，但我的代码无法正常工作。
【问题讨论】：
-
请同时发布
BatchProductViewModel的代码...另外，在您的操作方法中，您确定您的意图是使用BatchProductViewModel而不是ConnectBatchProductViewModel？ -
@Ruslan 问题已更新。
-
你在视图中的模型是
ConnectBatchProductViewModel如果你想为BatchProductViewModel的集合生成一个视图，那么你的视图需要是IEnumerable<BatchProductViewModel>并且POST方法参数需要相同（不要使用FormCollection）并且BatchProductViewModel的控件需要在for循环中生成 -
并且
int productId永远不会被绑定，因为您的控件的名称是Product.Id（不是productId）。如果将方法更改为public ActionResult Save(ConnectBatchProductViewModel model)，您将看到它已正确绑定 -
我已经更新了我的问题。我已经更改了视图模型，并且得到了相同的结果。我想要一个
IEnumerable，因为我想使用 jQuery 动态添加更多行。
标签： c# html asp.net-mvc forms