ASP.NET 6 MVC中Ajax搜索功能无法触发的问题排查

问题背景 #

在VS2022搭建的.NET 6 MVC新项目中，沿用旧MVC5项目里可正常运行的Ajax搜索代码后，jQuery UI Autocomplete的Ajax请求无法触发或无法到达控制器的SearchKlijenti方法。已使用jQuery 3.6.1、Bootstrap 5.2.0，尝试引入jquery-ui.js、jquery.unobtrusive-ajax.js等文件，基础jQuery事件（如keyup弹窗）可正常运行，但Autocomplete的Ajax调用无任何响应，即使添加alert()也未触发。

相关代码 #

测试用jQuery代码 #

$("SearchKupac").keyup(function() {
    alert();
});

注：此处选择器缺少#，正确写法应为$("#SearchKupac")

视图脚本代码 #

@section Scripts
{
<script type="text/javascript">
        $("#Klijent_Name").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "@Url.Action("SearchKlijenti")",
                    type: "POST",
                    dataType: "json",
                    data: { term: request.term },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return { label: item.label, value: item.label, id: item.id };
                        }))
                    }
                })
        },
            minLength: 1,
        select: function (event, ui) {
            $("#KlijentId").val(ui.item.id);
            $("#KlijentLabel").html(ui.item.label);
            $("#SearchKupac").val("");
            return false;
        }
        });
</script>
}

控制器端点代码 #

public JsonResult SearchKlijenti(string term)
{
    var klijentVM = _klijent.Search(term);
    if (klijentVM != null)
    {
        var items = klijentVM.Select(x => new { id = x.KlijentId, label = x.FriendlyName });
        return new JsonResult(Ok(items));
    }
    return new JsonResult(Ok());
}

HTML片段 #

<label asp-for="Klijent.Name">Ime</label>
<input class="form-control ajax" asp-for="Klijent.Name" />
<span asp-validation-for="Klijent.Name" class="text-danger"></span>

排查方向 #

• 检查jQuery UI加载顺序：必须先加载jQuery核心库，再加载jquery-ui.js，顺序错误会导致autocomplete方法未定义，可通过浏览器F12控制台查看是否有Uncaught TypeError: $(...).autocomplete is not a function这类错误。
• 验证元素选择器正确性：确认HTML中asp-for="Klijent.Name"生成的实际id是否为Klijent_Name，可通过浏览器开发者工具查看元素属性，避免因模型嵌套或命名规则变化导致选择器失效。
• 处理.NET 6 CSRF防护：.NET 6默认启用严格的Anti-Forgery验证，POST请求需携带验证令牌：
  1. 在视图中添加@Html.AntiForgeryToken()
  2. 在Ajax请求中添加headers：

     headers: {
         RequestVerificationToken: $('input[name="__RequestVerificationToken"]').val()
     }
     

  或临时在控制器方法上添加[IgnoreAntiforgeryToken]（不推荐生产环境使用）
• 修正控制器返回值：当前代码返回new JsonResult(Ok(items))会导致JSON结构嵌套错误，正确写法应为直接返回Json(items)或Ok(items)：

  public IActionResult SearchKlijenti(string term)
  {
      var klijentVM = _klijent.Search(term);
      var items = klijentVM?.Select(x => new { id = x.KlijentId, label = x.FriendlyName }) ?? Enumerable.Empty<object>();
      return Json(items);
  }
  

• 检查路由与请求地址：查看页面源码中@Url.Action("SearchKlijenti")生成的实际URL，直接在浏览器中访问该URL并携带?term=测试内容，确认是否返回正确的JSON数据，排查路由配置问题。
• 查看网络请求日志：打开浏览器F12的Network标签，输入字符后观察是否有XHR请求发出：
  • 无请求：说明Autocomplete未初始化成功，回到前两步排查加载顺序和选择器
  • 有请求但报错：根据状态码（如404、400、500）排查对应问题，比如控制器方法不存在、参数不匹配、服务器内部错误等
• 验证minLength设置：当前设置为1，需确保输入至少1个字符才会触发请求，测试时输入足够长度的内容。

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