ASP.NET WebForms中Ajax调用WebMethod无响应问题求助

核心问题分析 #

• WebForms服务器控件的ID会被自动渲染成带命名容器的格式，直接用原ID写jQuery选择器找不到元素
• 后台WebMethod不符合规范：非静态方法、未启用GET请求支持、错误使用Response.Write返回数据
• 前端Ajax配置有错误：contentType格式错误、回调函数名用错（jQuery里是error不是failure）、RadioButton默认Value值不符合预期

1. 修复前端代码 #

解决控件选择器问题，修正Ajax配置，同时给RadioButton设置明确的Value：

<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        // 用服务器控件的ClientID获取正确DOM元素
        $('#<%= RadioButtonYes.ClientID %>').click(function () {
            var enterdata = $(this).val();
            $.ajax({
                type: "GET",
                url: "radiobutton03ask.aspx/SyncData",
                contentType: "application/json; charset=utf-8", // 修复分号
                dataType: "json",
                data: { data: enterdata },
                success: function (response) {
                    alert("ajaxyes");
                },
                error: function (xhr, status, error) { // 替换failure为error
                    alert(error);
                }
            });
        });

        $('#<%= RadioButtonNo.ClientID %>').click(function () {
            var enterdata = $(this).val();
            $.ajax({
                type: "GET",
                url: "radiobutton03ask.aspx/SyncData",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data: { data: enterdata },
                success: function (response) {
                    alert("ajaxno");
                },
                error: function (xhr, status, error) {
                    alert(error);
                }
            });
        });
    });
</script>
<div>
    <asp:RadioButton ID="RadioButtonYes" Text="Yes" runat="server" Checked="true" GroupName="G" Value="Yes" />
    <asp:RadioButton ID="RadioButtonNo" Text="No" runat="server" GroupName="G" Value="No" />
</div>

2. 修复后台WebMethod #

WebMethod必须是静态方法，启用GET支持，同时用返回值代替Response.Write：

public partial class Radio_Button__radiobutton03ask : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }

    [WebMethod]
    [ScriptMethod(UseHttpGet = true)] // 开启GET请求支持
    public static string SyncData(string data) // 改为static并返回字符串
    {
        if (!string.IsNullOrEmpty(data))
        {
            if (data == "Yes")
            {
                return "SyncDataYes";
            }
            else if (data == "No")
            {
                return "SyncDataNo";
            }
            else
            {
                return "SyncDataOther";
            }
        }
        return string.Empty;
    }
}

额外提示 #

• 如果想用POST请求（WebMethod默认支持），可以去掉[ScriptMethod(UseHttpGet = true)]，把Ajax的type改成"POST"，同时data要序列化为JSON字符串：data: JSON.stringify({ data: enterdata })
• 可以打开浏览器F12开发者工具的Network标签，查看Ajax请求的状态码（比如404、500），快速定位问题

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