Disable ASP.NET buttons while background processing is going on

Question

I am creating a website wherein I am displaying a gridview and below it I have a button upon whose click I want to hide all the buttons on the web page till the processing completes. I have tried through code behind and its hiding it after the OnClick function completes its execution but what I want is to disable the input for the time in which the OnClick function is executing only.

Below is my piece of code,

protected void Button2_Click(object sender, EventArgs e)
{
    Button b = (Button)sender;
    b.Enabled = false;
// processing goes here
}

and my button is as follows:

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

Below is my piece of 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 });

}

I am still able to click on the buttons which should not happen for the while when my OnClick function is executing.

Can anyone suggest some other way?

Possible duplicate of [disable enable button using jquery](https://stackoverflow.com/questions/35214150/disable-enable-button-using-jquery) — mjwills, Dec 04 '18 at 10:12
You're on the right lines with the OnClientClick which doesn't wait for execution. I think it may be the JS that is causing problems, you need to disable it rather than making it read only. — BinaryDebug, Dec 04 '18 at 10:14
Blocking DOM and disabling elements are ui concerns,on your code, when you click button you call both client code and server side code, so when click button you immediately make a request to server, your client side event becomes useless. What you should do is to remove `OnClick="Button2_Click"` attribute and only work with `OnClientClick`, for your ui purposes. — ibubi, Dec 04 '18 at 10:20
@BinaryDebug I tried using ("disabled",true) and it is disabling all the input but then my server side code is not getting hit. — Akash Saraswat, Dec 04 '18 at 11:12
@ibubi I have to go server side as my work is not related to only UI hence, cannot execute everything at client side. — Akash Saraswat, Dec 04 '18 at 11:18

score 1 · Answer 1 · answered Dec 04 '18 at 10:15

1

window.onbeforeunload is called before any post back.

Try using using it like below to disable or hide button as soon as a target button is clicked

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

answered Dec 04 '18 at 10:15

Ambrish Pathak

3,813
2
15
30

I tried using you approach and it is disabling all the input but my server side code is not getting hit then. – Akash Saraswat Dec 04 '18 at 11:14

score 0 · Answer 2 · edited Dec 04 '18 at 10:43

Actually if u bind some JavaScript function in OnClientClick of a button then execution priority is as below;

OnClientClick then
Onclick

That's why although you are made the button enable false as above its not working because first onClientClick event is executing.

So, for that solution is u have to call that JavaScript function in side your button click event instead on bind into OnClientClick.

Refer the example below:

    //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);
    }

and button as follows:

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

I think it will solve your problem still, if you face some problem let me know.

Tried this approach but what it's doing is that it completes all the processing and then the loading pop up is showing. :-( — Akash Saraswat, Dec 04 '18 at 11:09
inside the button click event before b.Enabled=false; put that clientscript thing.... then try to build.....its working code I already implemented this...may be I think u miss some minor thing..just try the above step n lemme know....meanwhile i m xploring the cause for the problem u r facing.,...thnq — Sagar Kumar Choudhury, Dec 06 '18 at 07:16

score 0 · Answer 3 · answered Dec 05 '18 at 04:23

Your javascript is close, but not quite.

The OnClientClick will run before posting back to the server for OnClick. Setting the buttons to readonly will not stop them from being clickable.

Use the attribute selector to select input type="button" and input type="submit"

Try the following

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

}

You can't disable all inputs, as the value for disabled inputs are not returned to the server.

Disable ASP.NET buttons while background processing is going on

3 Answers3