[ASP.NET] Using UpdatePanel – Disable Page during AJAX Update

UpdatePanel encapsulates almost everything about AJAX. In some cases, it is good thing. But in some other cases, it is pretty restrictive. ASP.NET AJAX provides a way to handle AJAX lifecycle from the client side. It is the best part of the library IMHO.

 

1.  Using UpdatePanel

It is really easy to use the “UpdatePanel” control. You do not even need to write any code in the code-behind file.

<body>
  <form id="form1" runat="server">
    <div id="main">
      <div>
        <input type="text" /><input type="button" value="search" />
      </div>
      <asp:ScriptManager ID="ScriptManager1" runat="server">
      </asp:ScriptManager>
      <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
        <ProgressTemplate>
        Processing ...
        </ProgressTemplate>
      </asp:UpdateProgress>
      <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
          <p>This is the content.</p>
          <p>ID: <asp:TextBox ID="IDTextBox" runat="server" /></p>
          <p>Password: <asp:TextBox ID="PWTextBox" runat="server" /></p>
          <p><asp:Button ID="submitBtn" runat="server" Text="Submit"
              onclick="submitBtn_Click" /></p>
          <p><asp:Label ID="ResultLabel" runat="server" /></p>
        </ContentTemplate>
      </asp:UpdatePanel>
    </div>
  </form>
</body>

 

2. Disabling the Page during the AJAX Update

You can display the progress message using the “UpdateProgress” control. But what if you want to disable the pape (whole or part) during the update, so that users cannot submit another requests.

It can be done with “jQuery” and ASP.NET ajax library.

protected void submitBtn_Click(object sender, EventArgs e)
{
  System.Threading.Thread.Sleep(5000);
  ResultLabel.Text = "Hello";
}

The action takes long time, so you need to do something in a client to indicate that something is going on.

At first link jQuery library to the page.

<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>

Create another script block and handle the AJAX events.

$(document).ready(function () {
  var prm = Sys.WebForms.PageRequestManager.getInstance();
  prm.add_initializeRequest(InitializeRequest);
  prm.add_endRequest(EndRequest);

  function InitializeRequest(sender, args) {
    // Whatever you want to happen when the async callback starts
    $("#main").attr("disabled", true);
  }

  function EndRequest(sender, args) {
    // Whatever you want to happen when async callback ends
    $("#main").attr("disabled", false);
  }
});

2 thoughts on “[ASP.NET] Using UpdatePanel – Disable Page during AJAX Update

  1. Hello there. I tried that, but nothing happens when the UpdatePanel refreshes and the partial postback is going on, the page doesn’t get disabled. I replaced the attribute with a window.alert to see if it was being called and it doesn’t seem to be going there at all… Any ideas why?
    Thanks!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s