C# .NET Core MVC中AJAX实现联动下拉时控制器接收参数为null

你遇到的后端始终收到null参数的问题，来自两处前后端规则不匹配的错误：

• Ajax封装方法里写死了contentType: 'application/json'，同时前端把参数对象序列化成JSON字符串发送，请求体是标准JSON格式对象{"testament":"Old Testament"}。但ASP.NET的action方法对string这类简单类型参数，默认只会从表单字段、路由值、URL查询参数中取值，不会主动解析JSON格式的请求体内容，因此根本读不到对应字段值，最终给参数赋了默认的null。
• 控制器代码存在逻辑缩进错误：原本只有参数为空时才应该返回的测试选项Something、FAIL，因为没有被if块包裹，不管参数是否有效都会被加入返回列表，这也是切换选项后始终能看到这两个测试选项的叠加原因。

完全适配现有业务逻辑，不需要重构绑定规则：

1. 修改Ajax封装方法，删掉写死的application/json内容类型，用jQuery默认的表单编码格式（application/x-www-form-urlencoded）——这正是.NET默认可以自动识别简单类型参数的请求格式

   function AjaxCall(url, data, type) {
       return $.ajax({
           url: url,
           type: type ? type : 'GET',
           data: data
           // 删除原有的 contentType: 'application/json' 配置
       });
   }
   

2. 修改下拉框变更事件里的请求调用，不要对参数对象做JSON.stringify序列化，直接把原始JS对象传给Ajax方法即可，jQuery会自动把对象拼成标准表单格式的请求参数

   $('#testmanetDropDownList').on("change", function () {
       var test = $('#testmanetDropDownList').val();
       var obj = { testament: test };
       // 把原来的 JSON.stringify(obj) 替换为直接传obj
       AjaxCall('/Bible/GetBooks', obj, 'POST').done(function (response) {
           console.log("传递参数: " + test)
           if (response.length > 0) {
               $('#bookDropDownList').html('');
               var options = '';
               options += '<option value="Select">Select</option>';
               for (var i = 0; i < response.length; i++) {
                   options += '<option value="' + response[i] + '">' + response[i] + '</option>';
               }
               $('#bookDropDownList').append(options);
           }
       }).fail(function (error) {
           alert(error.StatusText);
       });
   });
   

3. 修正控制器的代码逻辑缩进，把测试选项的添加逻辑放到参数为空的分支里，避免正常场景下返回多余的测试值

   [HttpPost]
   public JsonResult GetBooks(string testament) {
       var Books = new List<string>();
       if (!string.IsNullOrWhiteSpace(testament)) {
           if (testament.Equals("Old Testament")) {
               Books.Add("Genesis");
               Books.Add("Exodus");
           }
           if (testament.Equals("New Testament")) {
               Books.Add("Matthew");
               Books.Add("Mark");
           }
       }
       else
       {
           // 仅参数为空时返回测试选项
           Books.Add("Something");
           Books.Add("FAIL");
       }
       return Json(Books);
   }
   

打开浏览器开发者工具的网络面板，触发第一个下拉框的变更动作，找到发送到/Bible/GetBooks的POST请求：

• 可以看到请求的Payload里包含testament=你选择的选项值的表单内容
• 控制器收到的testament参数会匹配前端实际传的选项值，返回的书籍列表会根据选择动态切换，不会再带上多余的测试选项。

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