ASP.NET复选框经JQuery AJAX调用WebMethod后无法正常勾选

没问题，我来帮你搞定这个需求。你已经有了基础的后端WebMethod，我们先把它补全，然后写对应的前端AJAX代码，实现根据返回的布尔值勾选/取消勾选复选框。

1. 完善后端WebMethod代码 #

首先确保你的WebMethod能正确从数据库获取布尔值并返回，这里补充完整的实现（假设你的查询是判断邮箱对应的状态，比如是否已订阅）：

[WebMethod]
public static bool FillData(string emailAddr)
{
    bool result = false;
    ConnectionUtility ConnectionObj = new ConnectionUtility();
    
    using (SqlConnection ConState = ConnectionObj.GetConnectionState())
    {
        try
        {
            ConState.Open();
            // 替换成你的实际查询语句，比如判断邮箱是否存在于目标表中
            string query = "SELECT COUNT(1) FROM YourTargetTable WHERE Email = @EmailAddr";
            using (SqlCommand cmd = new SqlCommand(query, ConState))
            {
                cmd.Parameters.AddWithValue("@EmailAddr", emailAddr);
                // 执行查询，计数大于0则返回true
                int count = (int)cmd.ExecuteScalar();
                result = count > 0;
            }
        }
        catch (Exception ex)
        {
            // 可添加异常日志逻辑，这里默认返回false
            result = false;
        }
        finally
        {
            if (ConState.State == ConnectionState.Open)
                ConState.Close();
        }
    }
    return result;
}

这里用using语句确保数据库连接和命令能自动释放，避免资源泄漏，同时处理了异常情况，保证方法总能返回有效布尔值。

2. 前端jQuery AJAX调用代码 #

接下来写前端代码，调用上面的WebMethod，根据返回值设置复选框状态：

假设你的复选框HTML结构是这样的：

<input type="checkbox" id="statusCheckbox" />
<label for="statusCheckbox">状态勾选</label>
<button id="checkStatusBtn">检查状态</button>

对应的jQuery代码：

$(document).ready(function() {
    $('#checkStatusBtn').click(function() {
        // 替换成你要传入的实际邮箱地址
        var targetEmail = "user@example.com";
        
        $.ajax({
            type: "POST",
            // 替换成你的页面路径，比如Default.aspx/FillData
            url: "YourPage.aspx/FillData",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            // 参数名要和WebMethod的参数名完全一致
            data: JSON.stringify({ emailAddr: targetEmail }),
            success: function(response) {
                // ASP.NET WebMethod会把返回值包装在d属性里
                var shouldCheck = response.d;
                // 用prop()设置复选框状态，这是jQuery推荐的动态状态修改方式
                $('#statusCheckbox').prop('checked', shouldCheck);
            },
            error: function(xhr, status, error) {
                // 处理错误情况，比如打印错误信息到控制台
                console.error("AJAX调用失败: " + error);
            }
        });
    });
});

关键注意事项 #

• WebMethod必须是static：ASP.NET的WebMethod要求方法为静态，否则无法被AJAX正常调用。
• 参数名严格匹配：前端传入的参数名（emailAddr）要和后端WebMethod的参数名完全一致，大小写也不能错。
• contentType和数据格式：必须指定contentType: "application/json; charset=utf-8"，并且用JSON.stringify()包装参数，否则后端无法正确解析传入的值。
• 获取返回值要取response.d：ASP.NET会自动把WebMethod的返回值包装在d属性中，所以要通过response.d拿到实际的布尔结果。
• 用prop()设置复选框：动态修改复选框状态时，优先使用prop('checked', value)，而不是attr()，因为prop()能更准确地处理表单元素的动态状态变化。

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