Partial View中调用Controller的AJAX接口未触发返回HTML问题求助

问题根因与解决方案 #

你遇到的AJAX返回HTML、Controller方法未触发的问题，最常见的原因和对应解决方法如下：

1. 授权拦截（90%以上概率）

未登录状态下发送的AJAX请求被授权过滤器拦截，自动重定向到登录页，返回的响应自然是登录页的HTML内容，不会进入你的TestDbConn方法。
解决方法：给TestDbConn方法添加[AllowAnonymous]特性，允许未登录状态访问：

[AllowAnonymous]
public JsonResult TestDbConn()
{
    // 保持原有代码不变
    string result = "";
    try
    {
        var user = db.UserGroup.FirstOrDefault();
        result = user == null ? "No available data!" : "Database connected!";
    }
    catch (Exception ex)
    {
        result = $"Unable to connect：{ex.Message}";
    }
    return Json(result, JsonRequestBehavior.AllowGet);
}

2. Razor语法未被解析

如果你的AJAX代码写在独立的.js文件中，而不是直接写在Partial View的<script>标签内，服务端不会解析@Url.Action语法，最终请求的URL是原始的@Url.Action("TestDbConn", "Utils")字符串，会触发404错误，返回站点的404错误页HTML。
解决方法：
方案一：把这段AJAX代码移到Login Partial View的视图文件的<script>标签内；
方案二：在Login Partial View中先定义全局URL变量，再在独立JS中调用：
视图中添加：

<script>
    window.testDbConnUrl = '@Url.Action("TestDbConn", "Utils")';
</script>

修改JS中的url参数：

url: window.testDbConnUrl,

3. AJAX参数优化

GET请求不需要设置contentType（该参数用于指定请求体的格式，GET请求无请求体），建议添加dataType: 'json'明确告知jQuery返回值为JSON格式，避免自动解析错误，同时可添加error回调方便排查问题：

function testConn() {
    $('#msg').text('Connecting database...');
    $.ajax({
        type: 'GET',
        url: '@Url.Action("TestDbConn", "Utils")',
        dataType: 'json',
        success: function (s) {
            $('#msg').text(s);
        },
        error: function(xhr) {
            $('#msg').text('请求异常：' + xhr.statusText);
            // 调试时可打开下方注释查看完整响应内容
            // console.log(xhr.responseText);
        }
    });
}

排查小技巧：按F12打开浏览器开发者工具，切换到「网络」面板，查看该AJAX请求的实际请求地址、响应状态码、响应内容，可快速定位具体问题。

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