如何通过AngularJS $http向ASP.NET MVC控制器传递多维JSON数据

我来帮你搞定这个多维/键值对数据传递的问题，咱们一步步来：

1. 修正前端AngularJS代码 #

首先，你的代码里有两个AngularJS $http不支持的参数：dataType和traditional，这俩是jQuery.ajax的专属配置，AngularJS里不需要。另外，从AngularJS 1.6开始，官方推荐用.then()代替.success()/.error()（这俩已经被废弃了），所以咱们调整一下代码：

var postdata = { 
    Email: "test1@mail.com", 
    selectedanswer: {0: 3, 1: 2, 2: 0, 3: 3, 4: 1} 
};

$http({
    url: "/page/PostFileWithData",
    headers: { 'Content-Type': 'application/json; charset=utf-8' },
    method: "POST",
    data: JSON.stringify(postdata)
}).then(function (response) {
    // 请求成功的处理
    console.log("Response received:", response.data);
}, function (errorResponse) {
    // 请求失败的处理
    console.error("Request failed:", errorResponse.statusText);
});

这里的关键是：

• 保持Content-Type为application/json，明确告诉后端我们传递的是JSON格式数据
• 用JSON.stringify()把JavaScript对象序列化为标准JSON字符串，确保数据格式能被后端正确解析

2. 后端定义对应的ViewModel #

ASP.NET MVC需要一个匹配的模型来接收前端传来的JSON数据，咱们定义一个ViewModel类，注意属性名要和前端的键对应（框架会自动处理大小写差异，比如前端的selectedanswer可以映射到后端的SelectedAnswer）：

public class SurveySubmissionViewModel
{
    public string Email { get; set; }
    // 用Dictionary<int, int>来接收前端的键值对格式数据，完美匹配你的selectedanswer结构
    public Dictionary<int, int> SelectedAnswer { get; set; }
}

如果你前端的selectedanswer是连续索引的（比如0-4），也可以用int[] SelectedAnswer，但此时前端最好把数据改成数组格式selectedanswer: [3,2,0,3,1]，这样绑定更直接。不过你现在的是键值对对象，用Dictionary是最适配的选择。

3. 编写控制器的POST Action #

接下来在你的PageController里写对应的Action方法，记得加上[HttpPost]标记，参数就是咱们刚才定义的ViewModel：

[HttpPost]
public ActionResult PostFileWithData(SurveySubmissionViewModel model)
{
    // 先验证模型是否有效
    if (ModelState.IsValid)
    {
        // 这里可以处理你的业务逻辑
        // 比如遍历SelectedAnswer获取每个问题的答案：
        foreach (var answerEntry in model.SelectedAnswer)
        {
            int questionIndex = answerEntry.Key; // 对应前端的0,1,2...
            int selectedValue = answerEntry.Value; // 对应前端的3,2,0...
            // 执行你的保存/处理逻辑
        }

        // 返回成功响应
        return Json(new { Success = true, Message = "数据接收成功" });
    }

    // 模型验证失败时返回错误
    return Json(new { Success = false, Message = "无效的数据格式" });
}

几个关键注意点 #

• 属性名匹配：前端的键名（比如Email、selectedanswer）要和后端ViewModel的属性名（Email、SelectedAnswer）对应，ASP.NET MVC的模型绑定会自动处理大小写差异，不过尽量保持风格统一（前端用小驼峰，后端用大驼峰）会更规范
• JSON绑定支持：ASP.NET MVC 3及以上版本默认支持JSON模型绑定，不需要额外配置。如果是更老的版本，你需要在Global.asax的Application_Start()里添加ValueProviderFactories.Factories.Add(new JsonValueProviderFactory());
• 避免多余参数：不要再加AngularJS不支持的jQuery参数，比如traditional、dataType，这些会被忽略甚至导致意外问题

这样调整之后，你的数据就能成功传递到ASP.NET MVC控制器了，赶紧试试吧！

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