Asp.net 4.5中Select2+Ajax调用WebMethod失效求助

问题描述 #

已调整代码，但Asp.net 4.5环境中Select2结合Ajax调用WebMethod时，请求未到达目标方法，反而返回页面HTML。相关代码片段如下：

前端下拉列表代码 #

<asp:DropDownList ID="ddlVillage" CssClass="form-control mt-1" runat="server">
    <asp:ListItem Text="Select Village" Value="0"></asp:ListItem>
</asp:DropDownList>

WebMethod代码 #

[System.Web.Services.WebMethod()]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static string bind_village(string search_key)
{
    return "[{ \"id\": \"1\", \"text\": \"test\" }]";
}

JavaScript Ajax调用代码 #

$('#<%=ddlVillage.ClientID %>').select2({
    ajax: {
        url: '<%= ResolveUrl("~/booking/create_booking.aspx/bind_village") %>',
        data: function (params) { return JSON.stringify({ search_key: params.term }); },
        dataType: 'json',
        type: "POST",
        params: {
            contentType: 'application/json; charset=utf-8'
        },
        results: function (data) {
            return {
                results: JSON.parse(data.d)
            };
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.error('AJAX Error:', errorThrown);
        }
    },
    minimumInputLength: 3
});

排查与修复方案 #

1. 修正Ajax配置参数位置错误 #

JS代码中错误地将contentType嵌套在params对象内，导致请求的Content-Type未正确设置为application/json，ASP.NET无法识别为WebMethod请求，直接返回页面HTML。同时，Select2 4.x版本已将回调函数名从results改为processResults，旧名称可能无法触发回调。

修复后的Ajax配置：

ajax: {
    url: '<%= ResolveUrl("~/booking/create_booking.aspx/bind_village") %>',
    data: function (params) { 
        return JSON.stringify({ search_key: params.term }); 
    },
    dataType: 'json',
    type: "POST",
    contentType: 'application/json; charset=utf-8', // 移至顶级配置
    processResults: function (data) { // 替换为processResults
        return {
            results: JSON.parse(data.d)
        };
    },
    error: function (jqXHR, textStatus, errorThrown) {
        console.error('AJAX Error:', errorThrown);
        console.log('Response Content:', jqXHR.responseText); // 新增：查看返回的HTML内容，定位具体错误
    }
}

2. 确认WebMethod的有效性 #

• 确保后台代码类继承自System.Web.UI.Page，且WebMethod必须是static方法（非静态方法无法被AJAX直接调用）。
• 检查是否引用了System.Web.Script.Services命名空间，否则ScriptMethod注解无效，会导致返回格式不符合JSON要求。

3. 验证请求URL正确性 #

通过浏览器开发者工具（F12）的Network面板查看请求URL，确认路径是否正确。若路径错误，ASP.NET会返回404或跳转页面，最终返回HTML。可以改用ResolveClientUrl确保路径适配客户端环境：

url: '<%= Page.ResolveClientUrl("~/booking/create_booking.aspx/bind_village") %>'

4. 排查权限限制 #

若页面启用了Form认证，需确保WebMethod允许匿名访问（无需登录即可调用），可添加[AllowAnonymous]注解（需引用System.Web.Mvc）；若需要认证，需确保请求携带了正确的认证Cookie。

5. 优化WebMethod返回值（可选） #

当前手动拼接JSON字符串易出错，建议直接返回对象列表，由ASP.NET自动序列化：

using System.Collections.Generic;
using System.Web.Services;
using System.Web.Script.Services;

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static List<object> bind_village(string search_key)
{
    return new List<object> 
    {
        new { id = "1", text = "test" },
        new { id = "2", text = "sample village" }
    };
}

此时JS回调可简化为：

processResults: function (data) {
    return {
        results: data.d
    };
}

内容的提问来源于stack exchange，提问作者Kiran Kumar Gudapati