如何从AJAX向Controller传递Dictionary对象?
解决AJAX向ASP.NET MVC Controller传递Dictionary对象的问题
我来帮你搞定这个问题!你当前的JS代码里有两个关键问题:一是每次遍历输入元素时,你都直接把elementValues赋值成一个新的{key:..., value:...}对象,导致最后只保留最后一个元素的键值对;二是AJAX参数名和Controller的参数名不匹配,这会让后端无法正确接收数据。我们来调整逻辑,构建符合要求的键值对结构。
问题核心逻辑
ASP.NET MVC默认会把**JS普通对象(以属性名为键、属性值为对应值)**自动映射为Dictionary<string, object>,而不是你之前尝试的{key: "...", value: "..."}这种结构。所以我们需要直接构建一个以输入元素name为属性名、元素值为属性值的对象。
修正后的JS代码
$("#btnSearch").click(function() { var reportId = $(this).data("id"); // 初始化空对象,用于存储所有输入的键值对 var elementValues = {}; $("#pnlFilter :input").each(function() { var inputName = this.name; var inputValue; // 根据输入类型获取对应的值 if ($(this).attr("type") === "checkbox") { inputValue = $(this).is(":checked"); } else { inputValue = this.value; } // 直接将键值对添加到对象中,而非替换整个对象 elementValues[inputName] = inputValue; }); // 可以用这个验证对象结构是否正确(推荐用console.log而非alert) console.log(JSON.stringify(elementValues)); $.ajaxSetup({ cache: false }); $.ajax({ type: "POST", url: "/Report/SearchResult", contentType: "application/json; charset=utf-8", // 注意参数名要和Controller的参数名完全匹配(Controller里是elementValue) data: JSON.stringify({ reportId: reportId, elementValue: elementValues }), dataType: "json", success: function() { var url = "/Report/EditFilters?reportId=" + reportId; $("#pageContent").load(url); } }); });
关键修改说明
- 正确构建键值对:把
elementValues初始化为空对象,遍历输入时用elementValues[inputName] = inputValue直接添加键值对,确保所有元素的name和value都被保留。 - 匹配参数名:AJAX的
data里参数名elementValue要和Controller的参数名完全一致,否则后端无法正确接收字典数据。 - 调试优化:用
console.log(JSON.stringify(elementValues))代替alert,能更清晰地看到最终的对象结构是否符合要求。
Controller代码无需修改
你的Controller代码是正确的,ASP.NET MVC会自动将序列化后的JS对象映射为Dictionary<string, object>:
[HttpPost] public ActionResult SearchResult(int reportId, Dictionary<string, object> elementValue) { // 这里可以正常遍历和使用elementValue字典 return View(); }
内容的提问来源于stack exchange,提问作者Baba.Kata
相关产品推荐
相关产品推荐

