Ajax调用MVC集成的Web Api返回404错误，求助排查方案

我完全懂这种卡在404的挫败感——手动在MVC项目里搭WebAPI确实容易踩路由和启动顺序的坑，咱们一步步拆解问题：

1. 最关键的问题：路由注册顺序颠倒了 #

你的Global.asax里先注册了MVC路由，再注册WebAPI路由，这会导致MVC的路由系统优先匹配请求，把API的请求当成MVC控制器请求处理，直接返回404。

修改后的Global.asax：

protected void Application_Start() {
    AreaRegistration.RegisterAllAreas();
    FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
    // 先注册WebAPI路由，再注册MVC路由
    GlobalConfiguration.Configure(WebApiConfig.Register);
    RouteConfig.RegisterRoutes(RouteTable.Routes);
    BundleConfig.RegisterBundles(BundleTable.Bundles);
}

2. 路由与API方法的匹配问题 #

你的WebAPI默认路由是api/{controller}/{id}，但你的API方法是GetUserDataById(string id)，同时AJAX请求是通过query string传id，这和路由规则不匹配：

• WebAPI默认会从URL路径的{id}片段取参数，而不是query string
• 方法名GetUserDataById符合GET动词约定，但需要明确路由绑定

方案A：用属性路由（推荐，更清晰） #

直接在API方法上标注路由规则：

public class UserController : ApiController {
    [HttpGet]
    [Route("api/User/{id}")] // 明确指定路由
    public IHttpActionResult GetUserDataById(string id) {
        Clients jsonData = Http.downloadJsonData<Clients>(InsuranceGlobal.clientsUrl);
        Client user = jsonData.clients.Where(u => u.id == id).FirstOrDefault();
        return Ok(user);
    }
}

方案B：调整参数绑定（适配现有路由） #

如果不想改路由，给参数加[FromUri]特性，让WebAPI从query string读取参数：

public IHttpActionResult GetUserDataById([FromUri]string id) {
    // 原有代码不变
}

3. AJAX请求的坑：相对路径+错误的回调名 #

• 相对路径不可靠：../api/User会根据当前页面的路由层级变化，比如页面在/Home/Details时是/api/User，但在/Admin/Users时会变成/Admin/api/User，直接用绝对路径更稳妥
• 回调名错误：jQuery AJAX的错误回调是error，不是fail，你写的fail不会触发，导致看不到真实错误信息

修改后的AJAX代码：

$("#btnGetUserById").click(function () {
    $('#userByName').empty();
    $("#gettingByIdMsg").text(" Getting User...");
    var userId = $("#userId").val();
    $.ajax({
        // 用绝对路径，或者在Razor里用@Url.Content("~/api/User/" + userId)生成
        url: '/api/User/' + userId,
        type: "GET",
        dataType: "json",
        success: function (data) {
            $('tr>', { html: formatItem(data) }).appendTo($('#userByName'));
            $("#usersTable").removeClass("hidden");
            $("#gettingByIdMsg").text("");
        },
        error: function (jqXHR, textStatus) { // 改成error回调
            $("#gettingByIdMsg").text("Request failed: " + textStatus + " (状态码: " + jqXHR.status + ")");
        }
    });
});

4. 最后检查：WebAPI包是否完整 #

确认你安装了以下NuGet包（缺一不可）：

• Microsoft.AspNet.WebApi.Core
• Microsoft.AspNet.WebApi.WebHost
• Microsoft.AspNet.WebApi.Client

如果之前只装了部分，卸载后重新安装完整包，避免依赖缺失。

按上面的步骤调整后，应该就能正常调用WebAPI了。

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