MVC C# 调用JsonResult返回下拉列表项的URL路径错误修复方法

问题原因 #

你当前使用的是相对路径GetDepartment发起请求，浏览器会自动将当前页面的URL路径作为前缀拼接该相对路径：在Index视图下页面路径为/Home/Index，拼接后得到/Home/GetDepartment符合预期；在EditView视图下页面路径为/Home/EditView，拼接后得到错误路径/Home/EditView/GetDepartment，导致请求失败。

修复方案 #

方案1：使用MVC内置的Url.Action生成路径（最推荐，兼容虚拟目录部署） #

如果你的JS代码是写在.cshtml Razor视图文件内，直接将请求的URL替换为Razor生成的绝对路径即可：

$(document).ready(function () {
    $("#ddDivision").change(function () {
        // 这里用@Url.Action生成正确的接口路径
        $.get("@Url.Action("GetDepartment", "Home")", { id: $("#ddDivision").val() }, function (data) {
              $("#ddDept").empty();
              $("#ddDept").append("<option value='Please Select'>Please Select</option>")
              $.each(data, function (index, row) {
                  console.log(row);
                  $("#ddDept").append("<option value='" + row.Value + "'>" + row.Text + "</option>")
              });
          });
      })
  });

@Url.Action("动作名", "控制器名")会由Razor引擎在渲染页面时自动生成对应接口的正确绝对路径，不管当前视图在哪个路由层级都不会出错，同时兼容站点部署在虚拟目录的场景。

方案2：使用根路径开头的绝对路径 #

如果你的JS代码是独立的.js文件，无法写入Razor语法，可以直接将请求路径改为以斜杠开头的根路径：

$.get("/Home/GetDepartment", { id: $("#ddDivision").val() }, function (data) {
  // 原有逻辑不变
})

以/开头的路径会强制浏览器从站点根目录开始解析，不会拼接当前页面的路径。如果需要兼容虚拟目录部署的独立JS场景，可以在公共布局页（比如_Layout.cshtml）的头部先定义全局站点根路径变量：

<script type="text/javascript">
    window.siteBaseUrl = "@Url.Content("~/")";
</script>

之后在独立JS文件中拼接路径即可：

$.get(window.siteBaseUrl + "Home/GetDepartment", { id: $("#ddDivision").val() }, function (data) {
  // 原有逻辑不变
})

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