无法将 html 表数据绑定到 mvc 控制器模型

Question

我有这个模型

public class Model
{
public string itemlineId { get; set; }
public string shipmentID { get; set; }
public string containerID { get; set; }
public string containerType { get; set; }
}

我有一个动态的html表，我试图做的是通过ajax发布表数据，并将其发送到控制器

$("body").on("click", "#btnSave", function () {
//Loop through the Table rows and build a JSON array.
var itemlists= new Array();
$("#tblAttachShip TBODY TR").each(function () {
var row = $(this);
var itemList = {};
itemList.itemlineId = row.find("TD").eq(0).html();
itemList.shipmentID = document.getElementById("txtShipmentID").value
itemList.containerID = row.find("TD").eq(1).html();
itemList.containerType = row.find("TD").eq(2).html();
itemlists.push(itemList);
});
//Send the JSON array to Controller using AJAX.
$.ajax({
type: "POST",
url: "/Project/Create",
data: JSON.stringify({ Model : Itemslists}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
alert(r + " record(s) inserted.");
}
});
});

到目前为止一切正常，当我尝试在浏览器中读取 POST 请求时，我可以看到该请求具有正确的数据为 json 格式

Model: [{itemlineId: "aa", shipmentID: "a", containerID: "aa", containerType: "aa"}]}

但是当我检查控制器时，列表不包含任何元素，也没有绑定任何值，我检查了几个帖子，但我无法弄清楚我做错了什么将 json 数据绑定到控制器中的模型

[HttpPost]
public JsonResult Create(List<Model> Model)
{

return Json("Success");
}

Answer 1

编辑

我想我们俩都在那里跳了一下枪。我做了一些挖掘，看起来由于 ajax 发布数据的方式，JSON.stringify实际上是必要的;我认为你的问题实际上可能与javascript有关。当我复制您的代码时，出现了错误。我现在正在运行它，它正在工作。假设您发布的代码是复制和粘贴的，则：

data: JSON.stringify({ Model : Itemslists}),

应该是

data: JSON.stringify({ Model : itemlists}),

看起来这只是一个带有数组名称的错字。

工作代码：

@{
ViewBag.Title = "Home Page";
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script type="text/javascript">
$("body").on("click", "#btnSave", function () {
//Loop through the Table rows and build a JSON array.
var itemlists = new Array();
$("#tblAttachShip TBODY TR").each(function () {
var row = $(this);
var itemList = {};
itemList.itemlineId = row.find("TD").eq(0).html();
itemList.shipmentID = document.getElementById("txtShipmentID").value
itemList.containerID = row.find("TD").eq(1).html();
itemList.containerType = row.find("TD").eq(2).html();
itemlists.push(itemList);
});
//Send the JSON array to Controller using AJAX.
$.ajax({
url: './Home/Create',
type: 'POST',
data: JSON.stringify({ Model: itemlists }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
alert(r + " record(s) inserted.");
},
error: function (r) {
alert(JSON.stringify(r));
}
});
});
</script>
<input type="text" id="txtShipmentID" />
<table id="tblAttachShip">
<tbody>
<tr>
<td>aaa</td>
<td>aa</td>
<td>a</td>
</tr>
<tr>
<td>bbb</td>
<td>bb</td>
<td>b</td>
</tr>
</tbody>
</table>
<button id="btnSave">Save</button>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace WebApplication1.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult About()
{
ViewBag.Message = "Your application description page.";
return View();
}
public ActionResult Contact()
{
ViewBag.Message = "Your contact page.";
return View();
}
[HttpPost]
public JsonResult Create(List<Model> Model)
{

return Json(new { Message = "Success" });
}
}

public class Model
{
public string itemlineId { get; set; }
public string shipmentID { get; set; }
public string containerID { get; set; }
public string containerType { get; set; }
}
}

Answer 2

你正在串化你的对象：

data: JSON.stringify({ Model : Itemslists}),

因此，当控制器需要列表时，您将字符串传递到控制器中。

在我的头顶上，我会说尝试只是传递对象，例如

data: Itemslists,

或者，如果有原因需要将其作为字符串传递。 更改控制器以接收字符串，然后将其反序列化：

(List<Model>)serializer.Deserialize(jsonString, typeof(List<Model>);