[英]Unable to bind html table data to mvc controller Model
I have this model我有这个模型
public class Model
{
public string itemlineId { get; set; }
public string shipmentID { get; set; }
public string containerID { get; set; }
public string containerType { get; set; }
}
I have a dynamic html table, what im trying to do is to post table data through ajax,and send it to the controller我有一个动态 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.");
}
});
});
so far all okay, when I try to read the post request in the browser I can see that the request has the correct data as json format到目前为止一切正常,当我尝试在浏览器中读取 post 请求时,我可以看到该请求具有正确的 json 格式数据
Model: [{itemlineId: "aa", shipmentID: "a", containerID: "aa", containerType: "aa"}]}
however when I check the controller the list doesn't contain any elements, and no values has been binded, I checked several posts but I can't figure ouut what I did wrong to bind the json data to the model in the controller但是,当我检查控制器时,列表不包含任何元素,并且没有绑定任何值,我检查了几篇文章,但我无法弄清楚将 json 数据绑定到控制器中的模型时我做错了什么
[HttpPost]
public JsonResult Create(List<Model> Model)
{
return Json("Success");
}
EDIT编辑
I think we both jumped the gun a bit there.我想我们都在那里跳了枪。 I did some digging and it looks like the
JSON.stringify
is actually going to be necessary because of the way that ajax posts the data;我做了一些挖掘,看起来
JSON.stringify
实际上是必要的,因为 ajax 发布数据的方式; I think your issue might actually be with the javascript.我认为您的问题实际上可能与 javascript 有关。 When I copied your code, there were errors.
当我复制您的代码时,出现错误。 I am running this right now which is working.
我现在正在运行它,它正在运行。 Assuming your posted code was copy and pasted, this:
假设您发布的代码已复制并粘贴,则:
data: JSON.stringify({ Model : Itemslists}),
should be应该
data: JSON.stringify({ Model : itemlists}),
Looks like it was just a typo with the name of the array.看起来这只是数组名称的拼写错误。
Working code:工作代码:
@{
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; }
}
}
You are stringifying your object:您正在对您的对象进行字符串化:
data: JSON.stringify({ Model : Itemslists}),
So you are passing a string into your controller, when your controller expects a List.因此,当您的控制器需要一个列表时,您将一个字符串传递给您的控制器。
Off the top of my head i'd say try just passing the object eg在我的头顶上,我会说尝试只传递对象,例如
data: Itemslists,
Or if there is a reason that you need to pass it as a string.或者,如果有理由需要将其作为字符串传递。 Change your controller to receive a string and then deserialize it:
更改您的控制器以接收一个字符串,然后将其反序列化:
(List<Model>)serializer.Deserialize(jsonString, typeof(List<Model>);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.