ASP.NET WebForm：如何防止调用WCF服务的按钮被多次点击

嗨，作为刚接触ASP的新手，遇到这种重复点击的问题太常见了！毕竟你的WCF服务方法要跑10秒，用户很容易忍不住多点几次。我给你几个实用的解决方案，都是WebForm项目里常用的思路：

1. 前端禁用按钮+显示加载状态（最直观的用户体验优化） #

这是最直接的办法，用户点击按钮后立刻把按钮禁用，同时显示“处理中”的提示，等请求完成后再恢复按钮可用。分两种场景处理：

同步回发场景（页面会刷新） #

前端代码（ASPX页面）

<asp:Button ID="btnSubmit" runat="server" Text="提交数据" 
    OnClick="btnSubmit_Click" 
    OnClientClick="disableButton(this);" />
<span id="loadingMsg" style="display:none; color:#666;">处理中，请稍候...</span>

<script type="text/javascript">
    function disableButton(btn) {
        // 禁用按钮
        btn.disabled = true;
        // 显示加载提示
        document.getElementById('loadingMsg').style.display = 'inline';
        // 确保表单能正常提交
        return true;
    }
</script>

后台代码（CS文件）

同步回发完成后页面会刷新，按钮会自动恢复，但为了应对异常情况，可在后台注册脚本强制恢复：

protected void btnSubmit_Click(object sender, EventArgs e)
{
    try
    {
        // 调用你的WCF服务方法
        YourWcfServiceClient client = new YourWcfServiceClient();
        client.InsertRecordAndSendEmail();
        client.Close();
    }
    catch (Exception ex)
    {
        // 处理异常
        Response.Write($"<script>alert('操作失败：{ex.Message}');</script>");
    }
    finally
    {
        // 注册脚本，确保页面加载后按钮恢复可用
        ClientScript.RegisterStartupScript(this.GetType(), "enableBtn", 
            "document.getElementById('" + btnSubmit.ClientID + "').disabled = false; document.getElementById('loadingMsg').style.display = 'none';", true);
    }
}

异步调用场景（页面不刷新，用AJAX） #

如果是通过AJAX调用WCF，用jQuery能更灵活控制状态：

<asp:Button ID="btnAjaxSubmit" runat="server" Text="异步提交" 
    OnClientClick="submitAsync(); return false;" />
<span id="ajaxLoading" style="display:none;">处理中...</span>

<script type="text/javascript">
    function submitAsync() {
        var btn = document.getElementById('<%= btnAjaxSubmit.ClientID %>');
        var loading = document.getElementById('ajaxLoading');
        
        // 禁用按钮+显示加载
        btn.disabled = true;
        loading.style.display = 'inline';
        
        // AJAX调用WCF服务（需提前配置WCF的AJAX端点）
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "YourWcfService.svc/InsertRecordAndSendEmail", true);
        xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                // 请求完成（无论成功失败）都恢复按钮
                btn.disabled = false;
                loading.style.display = 'none';
                
                if (xhr.status === 200) {
                    alert('操作成功！');
                } else {
                    alert('操作失败：' + xhr.responseText);
                }
            }
        };
        xhr.send();
    }
</script>

2. 服务器端添加请求锁（防止恶意重复提交） #

前端禁用可能被绕过（比如用户修改JS、刷新页面），这时候可以在服务器端用Session标记当前是否有请求在处理：

protected void btnSubmit_Click(object sender, EventArgs e)
{
    // 检查Session里的处理标记
    if (Session["IsProcessing"] != null && (bool)Session["IsProcessing"])
    {
        Response.Write("<script>alert('当前已有请求在处理，请稍候！');</script>");
        return;
    }
    
    try
    {
        // 设置处理中标记
        Session["IsProcessing"] = true;
        
        // 调用WCF服务
        YourWcfServiceClient client = new YourWcfServiceClient();
        client.InsertRecordAndSendEmail();
        client.Close();
        
        Response.Write("<script>alert('操作成功！');</script>");
    }
    catch (Exception ex)
    {
        Response.Write($"<script>alert('操作失败：{ex.Message}');</script>");
    }
    finally
    {
        // 清除处理标记
        Session["IsProcessing"] = false;
    }
}

3. 全局禁用所有提交按钮（适合多按钮场景） #

如果页面有多个提交按钮，可以在表单提交时一次性禁用所有按钮：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // 注册表单提交时的脚本
        ClientScript.RegisterOnSubmitStatement(this.GetType(), "disableAllButtons", 
            "var buttons = document.getElementsByTagName('input'); for(var i=0; i<buttons.length; i++) { if(buttons[i].type == 'submit') buttons[i].disabled = true; } document.getElementById('loadingMsg').style.display = 'inline';");
    }
}

这些方案可以组合使用，比如前端禁用+服务器端锁，既优化用户体验又防止恶意提交。等你后续优化WCF服务的耗时后，这个问题的影响会小很多，但提前处理重复提交是个很好的开发习惯哦！

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