ASP MVC区域中如何以JSON格式向控制器方法提交视图模型

看起来你正在尝试从默认区域生成的performance对象，跨区域提交到SeatSelection区域的控制器方法，这里有几个优化点和关键细节，能帮你更可靠地实现这个功能：

一、优化AJAX请求的URL生成（避免硬编码） #

你当前硬编码URL的方式很容易在部署环境（比如不同端口、虚拟目录）下出错，建议用ASP MVC自带的Url.Action辅助方法，它会自动处理区域路由规则：

$("#addToCartButton").click(function () {
    // 把视图模型序列化为JavaScript对象
    var performanceObj = @Html.Raw(Json.Encode(performance));
    
    $.ajax({
        // 用Url.Action生成正确的跨区域请求地址
        url: '@Url.Action("AddToCart", "Home", new { area = "SeatSelection" })',
        type: 'POST',
        dataType: 'json',
        // 关键：当contentType设为application/json时，需要传递JSON字符串而非JS对象
        data: JSON.stringify(performanceObj),
        contentType: 'application/json; charset=utf-8',
        success: function (data) {
            // 你的成功处理逻辑
            console.log("添加成功:", data);
        },
        // 建议添加错误处理，方便调试
        error: function(xhr, status, error) {
            console.error("提交失败:", error);
            console.log("响应内容:", xhr.responseText);
        }
    });
});

这里要注意：当你设置contentType: 'application/json'时，必须用JSON.stringify()把JS对象转成JSON字符串，否则ASP MVC的模型绑定无法正确解析请求体。

二、确保控制器方法正确接收JSON参数 #

你的SeatSelection区域的Home控制器需要正确配置，才能接收并绑定JSON格式的模型：

namespace YourProjectNamespace.Areas.SeatSelection.Controllers
{
    public class HomeController : Controller
    {
        // 标记为POST请求
        [HttpPost]
        // 用[FromBody]告诉框架从请求体读取JSON并绑定到模型
        public ActionResult AddToCart([FromBody] PerformanceViewModel performance)
        {
            // 先验证模型是否合法
            if (!ModelState.IsValid)
            {
                // 返回验证失败的JSON结果
                return Json(new { success = false, message = "数据格式错误" });
            }

            // 执行添加到购物车的业务逻辑
            // ...

            // 返回成功结果
            return Json(new { success = true, message = "已添加到购物车" });
        }
    }
}

关键细节：

• 必须添加[HttpPost]特性，限制该方法只接受POST请求
• 参数前必须加[FromBody]特性，因为ASP MVC默认不会从请求体的JSON中绑定参数，这个特性会告诉框架去读取请求体的内容
• 确保PerformanceViewModel的属性名称和前端JSON对象的属性完全匹配（默认是大小写敏感的，如果你需要不敏感，可以在Startup中配置模型绑定规则）

三、调试技巧 #

如果遇到提交失败的情况，可以通过以下方式排查：

• 打开浏览器开发者工具（F12），切换到Network标签，查看请求的URL是否正确，请求体的JSON格式是否符合预期
• 在控制器方法中加断点，确认方法是否被命中，以及performance参数是否正确绑定
• 查看ModelState.Errors集合，获取具体的模型验证错误信息

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