将 JSON 字符串化 javascript 对象发送到控制器时出现 POST 500 错误

Question

我目前正在使用 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' 选项的情况下发送数据，但我在控制器上的参数中得到了一个空返回。

Answer 1

这里有很多事情要指出。

关于你当前的问题。

• 您发送的数据不是字符串。 data: { positions: JSON.stringify(pagePosData) } 正在创建一个属性为 positions 的 JavaScript 对象，其值是对象的序列化版本。

• 您应该能够创建一个 c# 类并接受它作为您的控制器方法参数，并更接近您期望的结果。如下所示：

  公共类 Foo { 公共字符串位置 { 获取；放; } }

  公共字符串 savePage(Foo 位置)

• 或者，您可以更新方法以将请求正文作为字符串获取，如this SO answer中所示

但更重要的是，您似乎遇到了一些错误信息。将数组传递回您的控制器应该没有任何问题。同样，您将需要一个对预期数据类型进行建模的 c# 类。你没有在你的问题中列出这些，所以很难确定你需要如何更新你的代码，但我会建议更像以下内容：

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 版本。