javascript - 将 JSON 字符串化的 javascript 对象发送到控制器时出现 POST 500 错误
问题描述
我目前正在使用 MVC 模式开发 ASP.net Web 应用程序。我已经建立了一个页面,人们可以在其中将项目添加到 gridstack 部分并拖动它们(Gridstack 是一个用于创建可拖动框/对象的插件)。我的目标是将这些框的最终坐标发送到我的控制器:
function saveData() {
var pagePositions = [];
// Fill our array
$('.grid-stack-item.ui-draggable').each(function () {
var $this = $(this);
pagePositions.push({
x: $this.attr('data-gs-x'),
y: $this.attr('data-gs-y'),
w: $this.attr('data-gs-width'),
h: $this.attr('data-gs-height'),
content: $('.grid-stack-item-content', $this).html()
});
});
// Convert array to object
var pagePosData = toObject(pagePositions);
alert(pagePosData);
$.ajax({
type: "POST",
url: "savePage",
data: { positions: JSON.stringify(pagePosData) }
});
} function toObject(arr) {
var rv = {};
for (var i = 0; i < arr.length; ++i)
if (arr[i] !== undefined) rv[i] = arr[i];
return rv;
}
上面的代码填充给定 html 元素的属性并将它们放入一个数组中。根据互联网上的几个主题,我假设发送数组会造成麻烦,所以我插入了一个函数,将数组转换为 javascript 对象(键值对)。我通过 AJAX 调用将它们发送到我的控制器,导致错误代码 500:
[HttpPost]
public string savePage(string positions)
{
//some code
var json = positions;
var test = "";
CreatePagemodelJson obj = new JavaScriptSerializer().Deserialize<CreatePagemodelJson>(positions.ToString());
//var jsonObject = JsonConvert.DeserializeObject<CreatePagemodel>(positionsJson.ToString());
return "";
}
我在控制器内部设置了断点来读取我从参数位置获得的值,但它甚至没有到达那个点。我尝试为 Json 文件设置模型,但这里的问题是 post 调用返回动态 json 格式。
更新: 我设法让它与下面的帖子一起工作。使用以下结构,我根据我的模型将结果作为数组得到。
function saveData() {
var pagePositions = [];
// Fill our array
$('.grid-stack-item.ui-draggable').each(function () {
var $this = $(this);
pagePositions.push({
x: $this.attr('data-gs-x'),
y: $this.attr('data-gs-y'),
w: $this.attr('data-gs-width'),
h: $this.attr('data-gs-height'),
content: $('.grid-stack-item-content', $this).html()
});
});
alert(pagePositions);
$.ajax({
type: "POST",
url: "savePage",
contentType: 'application/json',
data: JSON.stringify(pagePositions)
});
}
public class Position
{
public string x { get; set; }
public string y { get; set; }
public string w { get; set; }
public string h { get; set; }
public string content { get; set; }
}
[HttpPost]
public ActionResult savePage(IEnumerable<Position> positions)
{
//some code
return View("SomeView");
}
参数位置成功返回与帖子一起发送的 pagePositions 数组:
我尝试在没有 JSON.stringify(pagePositions) 和 ContentType: 'application/json' 选项的情况下发送数据,但我在控制器上的参数中返回空值。
解决方案
这里有很多事情需要指出。
与您当前的问题。
- 您发送的数据不是字符串。
data: { positions: JSON.stringify(pagePosData) }
正在创建一个 JavaScript 对象,其属性的positions
值是对象的序列化版本。 您应该能够创建 ac# 类并接受它作为您的控制器方法参数,并更接近您期望的结果。如下所示:
公共类 Foo { 公共字符串位置 { 获取;放; } }
公共字符串 savePage(Foo 位置)
或者,您可以更新您的方法以将请求正文作为字符串获取,如this SO answer中所示
更重要的是,您似乎遇到了一些错误信息。将数组传递回您的控制器应该没有任何问题。同样,您将需要 ac# 类来模拟您的预期数据类型。你没有在你的问题中列出这些,所以很难确定你需要如何更新你的代码,但我建议更像以下内容:
function saveData() {
var pagePositions = [];
// Fill our array
$('.grid-stack-item.ui-draggable').each(function () {
var $this = $(this);
pagePositions.push({
x: $this.attr('data-gs-x'),
y: $this.attr('data-gs-y'),
w: $this.attr('data-gs-width'),
h: $this.attr('data-gs-height'),
content: $('.grid-stack-item-content', $this).html()
});
});
$.ajax({
type: "POST",
url: "savePage",
data: JSON.stringify(pagePositions),
contentType: "application/json"
});
}
public class Position
{
public int X { get; set; }
public int Y { get; set; }
public int W { get; set; }
public int H { get; set; }
public string Content { get; set; }
}
[HttpPost]
public string savePage(Position[] positions)
{
//some code
return "";
}
如果这不起作用,请提供更多关于什么不起作用、您收到什么错误以及您使用的是什么版本的 asp.net mvc 的详细信息。
推荐阅读
- c++ - 更新已排序向量的一项
- html - 如何在没有边界的情况下分隔孩子?
- r - 将边际总计添加到 R 中的 ggplot 热图
- jquery - .outerheight() 有问题
- html - 我需要制作一个 4 列 3 行的图片库,所有这些图片的大小都相同
- maven - 如何为 gradle 安装 sdkman
- javascript - 还有另一种在 URL http Delete 请求上添加 ID 的方法吗?
- javascript - Apollo Server gql 使用推荐
- python - 带有 dask sel 的 xarray 很慢
- python - Arduino到Python的Unicode转换为整数的问题