向控制器发送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文件设置模型，但是这里的问题是发布调用返回了动态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");
}

参数position成功返回与post一起发送的pagePositions数组：

我尝试发送不带JSON.stringify（pagePositions）和ContentType：'application / json'选项的数据，但在控制器上的参数中返回了null。

Answer 1

这里有很多事情要指出。

关于您当前的问题。

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

• 您应该能够创建ac＃类并将其作为控制器方法参数接受，并且更接近于预期的结果。 如下所示：

  公共类Foo {public string Positions {get; 组; }}

  公共字符串savePage（Foo位置）

• 或者，您可以更新方法以将请求主体作为字符串获得，如该SO答案所示。

但更重要的是，似乎您遇到了一些错误信息。 将数组传递回控制器应该没有任何问题。 同样，您将需要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版本的详细信息。