在后台处理进行时禁用 ASP.NET 按钮

Posted 2023-04-12

【中文标题】在后台处理进行时禁用 ASP.NET 按钮

【英文标题】：Disable ASP.NET buttons while background processing is going on

【发布时间】：2019-05-05 17:20:21

【问题描述】：

我正在创建一个网站，其中我正在显示一个网格视图，在它下面我有一个按钮，点击它我想隐藏网页上的所有按钮，直到处理完成。我已经尝试过后面的代码并在 OnClick 函数完成执行后将其隐藏，但我想要的是仅在 OnClick 函数执行时禁用输入。

下面是我的一段代码，

protected void Button2_Click(object sender, EventArgs e)

    Button b = (Button)sender;
    b.Enabled = false;
// processing goes here

而我的按钮如下：

<asp:Button ID="Button2" runat="server" CssClass="SyncButton1" 
    Text="Sync With AMS"
            CausesValidation="true" OnClientClick="ShowProgress()" 
    OnClick="Button2_Click"
            Visible="false" />

下面是我的一段JS，

function ShowProgress() 
    $("#form1 :input").prop('readonly', true);
    var modal = $('<div />');
    modal.addClass("modal");
    $('body').append(modal);
    var loading = $(".loading");
    loading.show();
    var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
    var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
    loading.css( top: top, left: left );

当我的 OnClick 函数正在执行时，我仍然可以点击暂时不应该发生的按钮。

任何人都可以建议其他方式吗？

【问题讨论】：

disable enable button using jquery的可能重复

您与不等待执行的 OnClientClick 处于正确的位置。我认为可能是导致问题的JS，您需要禁用它而不是使其只读。

阻塞 DOM 和禁用元素是 ui 问题，在您的代码上，当您单击按钮时，您会调用客户端代码和服务器端代码，因此当单击按钮时，您会立即向服务器发出请求，您的客户端事件变得无用。您应该做的是删除OnClick="Button2_Click" 属性并仅使用OnClientClick，以供您使用。

@BinaryDebug 我尝试使用 ("disabled",true) 并且它禁用了所有输入，但是我的服务器端代码没有被命中。

@ibubi 我必须去服务器端，因为我的工作与 UI 无关，因此无法在客户端执行所有操作。

【参考方案1】：

window.onbeforeunload 在任何回发之前被调用。

点击目标按钮后，尝试使用它来禁用或隐藏按钮

<script type = "text/javascript">
    function DisableButton() 
        document.getElementById("<%=Button1.ClientID %>").disabled = true;
    
    window.onbeforeunload = DisableButton;
</script>

【讨论】：

我尝试使用你的方法，它禁用了所有输入，但我的服务器端代码没有被命中。

【参考方案2】：

实际上，如果你在按钮的OnClientClick 中绑定一些JavaScript 函数，那么执行优先级如下；

OnClientClick然后 Onclick

这就是为什么尽管您在上面设置了按钮启用 false，但它不起作用，因为第一个 onClientClick 事件正在执行。

因此，对于该解决方案，您必须在按钮单击事件中调用该 JavaScript 函数，而不是绑定到 OnClientClick。

参考下面的例子：

    //Javascript function
    function ShowProgress() 
            $("#form1 :input").prop('readonly', true);
            var modal = $('<div />');
            modal.addClass("modal");
            $('body').append(modal);
            var loading = $(".loading");
            loading.show();
            var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
            var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
            loading.css( top: top, left: left );

        

    protected void Button2_Click(object sender, EventArgs e)
    
        Button b = (Button)sender;
        b.Enabled = false;
       // processing goes here
       ClientScript.RegisterStartupScript(this.GetType(), "Popup", "ShowPopUp();", true);
    

和按钮如下：

   <asp:Button ID="Button2" runat="server" CssClass="SyncButton1" 
     Text="Sync With AMS" CausesValidation="true" 
       OnClick="Button2_Click" Visible="false" />

我认为它仍然可以解决您的问题，如果您遇到问题，请告诉我。

【讨论】：

尝试了这种方法，但它所做的是它完成了所有处理，然后显示加载弹出窗口。 :-(

按钮点击事件内b.Enabled=false;把那个客户端脚本的东西....然后尝试构建......它的工作代码我已经实现了这个......可能我认为你错过了一些小事情......只需尝试上面的步骤n让我知道......同时我正在探索你面临的问题的原因。,...thnq

【参考方案3】：

您的 javascript 很接近，但不完全。

OnClientClick 将在为OnClick 发回服务器之前运行。将按钮设置为 readonly 将不会阻止它们被点击。

使用属性选择器选择input type="button"和input type="submit"

试试下面的

function ShowProgress() 
    //Sets fields to readonly, note that this misses selects
    $("#form1 :input").prop('readonly', true);

    //Disable the buttons - Note the attribute selector
    $("#form1 :input[type=button],#form1 :input[type=submit]").prop('disabled', true);

    /*No Change to Modal stuff, removed for brevity*/

您不能禁用所有输入，因为禁用输入的值不会返回到服务器。