Question

我正在创建一个网站，其中显示网格视图，并在其下方有一个按钮，单击该按钮后，我希望隐藏网页上的所有按钮，直到处理完成。我已经尝试了遍历后面的代码，并在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函数时暂时不应该发生的按钮。

有人可以提出其他建议吗？

Answer 1

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

点击目标按钮后，尝试使用如下所示的按钮禁用或隐藏按钮

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

Answer 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" />

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

Answer 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*/

}

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

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

3 个答案: