Отключите кнопки ASP.NET во время фоновой обработки

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

На самом деле, если вы связываете некоторую функцию JavaScript в OnClientClick кнопки, тогда приоритет выполнения такой, как показано ниже:

1. OnClientClick, тогда
2. 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 2

Ваш 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*/

}

Вы не можете отключить все входы, так как значение для отключенных входов не возвращается на сервер.

Answer 3

window.onbeforeunload вызывается перед любым сообщением назад.

Попробуйте использовать его, как показано ниже, чтобы отключить или скрыть кнопку, как только будет нажата целевая кнопка

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