向控制器发送JSON序列化JS对象时出现POST 500错误及解决

最近在开发一个基于ASP.NET MVC的Web应用，前端用Gridstack插件实现了可拖拽的盒子组件，核心需求是把盒子最终的坐标数据提交到后端控制器。过程中踩了不少坑，这里分享一下我的解决经历：

最初的尝试与遇到的问题 #

一开始我把每个盒子的属性存入数组，转成键值对对象后用AJAX POST请求发送，结果直接触发了500服务器内部错误，而且后端控制器的断点完全没触发，根本不知道问题出在哪。后来我想创建一个对应的模型来接收数据，但因为JSON格式是动态的，这个思路直接卡壳了。

调整后的解决方案 #

后来查了资料加自己试错，调整了前后端的代码，终于成功拿到了数据：

前端代码调整 #

我不再转成键值对，而是直接把存储坐标的数组做JSON序列化，并且在AJAX请求里明确设置contentType: 'application/json'，示例代码如下：

// 先从Gridstack获取所有盒子的坐标数据，存入gridData数组
const gridData = $('.grid-stack').data('gridstack').serialize();
// 序列化数组为JSON字符串
const jsonData = JSON.stringify(gridData);

$.ajax({
    url: '/Home/SaveBoxPositions',
    type: 'POST',
    contentType: 'application/json', // 必须设置这个
    data: jsonData,
    success: function(res) {
        console.log('提交成功');
    },
    error: function(xhr) {
        console.error('提交失败:', xhr.responseText);
    }
});

后端代码处理 #

1. 首先定义一个BoxPosition模型，对应每个盒子的坐标属性：

public class BoxPosition
{
    public int X { get; set; }
    public int Y { get; set; }
    public int Width { get; set; }
    public int Height { get; set; }
    public string Id { get; set; } // 如果需要盒子的唯一标识，可以加上
}

2. 然后在控制器里用IEnumerable<BoxPosition>作为参数来接收：

[HttpPost]
public JsonResult SaveBoxPositions(IEnumerable<BoxPosition> positions)
{
    // 这里已经能正常获取到前端传来的所有盒子坐标数据了
    // 接下来可以做存储到数据库等业务逻辑
    return Json(new { Success = true, Message = "坐标保存成功" });
}

关键注意事项 #

• 如果不对数组做JSON序列化，或者不设置contentType: 'application/json'，后端控制器的positions参数会直接返回null，这是因为ASP.NET MVC默认的模型绑定只能正确解析指定了JSON格式的请求体。
• 之前的500错误，本质是请求的Content-Type和数据格式不匹配，后端无法正确解析请求内容，进而触发了服务器内部错误。

内容的提问来源于stack exchange，提问作者Tob