UpdatePanel control, one more limitation

As you probably know by using the UpdatePanel control within the asp.net AJAX framework is that it has a major drawback, it's inefficiency. That's because in every Async call  the entire content of the page is being sent to the server. Imagine that you have a big or huge ViewState hidden field on this page........

Another limitation for the UpdatePanel i discovered yesterday is its disability to initiate several Async calls to the server at once.

As it turns out, If you have several UpdatePanel controls on a single page and you make an Async call to the server using one of them (lets say it takes a few seconds) and then you do the sam with another UpdatePanel  on the page, The first one is aborted by the PageRequestManager object that is responsible for the UpdatePanel.

So for example:

<div>
   <asp:ScriptManager runat=server ID="ScriptManager1"></asp:ScriptManager>
   <asp:UpdatePanel runat=server ID="upPanel1">
       <ContentTemplate>
           Some content....
       </ContentTemplate>
       <Triggers>
       <asp:AsyncPostBackTrigger ControlID="btnSomeButton1" />
       </Triggers>
   </asp:UpdatePanel>
   <asp:Button runat=server ID="btnSomeButton1" Text="Do Async call for panel 1" />
   
   <br />
   
   <asp:UpdatePanel runat=server ID="UpdatePanel2">
       <ContentTemplate>
           Some content....
       </ContentTemplate>
       <Triggers>
       <asp:AsyncPostBackTrigger ControlID="btnSomeButton2" />
       </Triggers>
   </asp:UpdatePanel>
   <asp:Button runat=server ID="btnSomeButton2" Text="Do Async call for panel 2" />
   </div>

If we click the first button and lets say it takes some time for his operation on the server, and immediately click button 2, then the first request will be aborted.

Notes:1.  You don't need  to specify the event name for the triggers since the default event for a button is "Click"

2. You can learn this from the given code:

<asp:Button id="btnCancel" Text="Abort Request" runat=server OnClientClick="CancelUpdate();return false;"/>
    .
    .
    .
    .
    
    <script>
    function CancelUpdate()
    {
        var oPageRequestManagerObj = Sys.WebForms.PageRequestManager.getInstance();
        if(oPageRequestManagerObj!= null && oPageRequestManagerObj.get_isInAsyncPostBack())
        {
            oPageRequestManagerObj.abortPostBack();
        }        
    }
    
    </script>

That you have only a single PageRequestManager manager, so there can be only a single partial page update call at once.

Lets look at a full sample to demonstrate this fact, here we have 2 UpdatePanel each containing a textbox to be filled with some 

when the action on the server complete, i intentionally did a the action on the server a bit log.

when you click the first button and then the second button you will notice only the second one occurs.

The cs code: 

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void btnSomeButton1_Click(object sender, EventArgs e)
    {
        for (int i = 1; i < 1000000000; i++)
        {

        }
        txtText1.Text = "Partial 1 finished";
    }

    protected void btnSomeButton2_Click(object sender, EventArgs e)
    {
        for (int i = 1; i < 1000000000; i++)
        {

        }
        txtText2.Text = "Partial 2 finished";
    }    
}

The aspx code:

<asp:ScriptManager runat=server ID="ScriptManager1" EnablePartialRendering=true></asp:ScriptManager>
   <asp:UpdatePanel runat=server ID="upPanel1">
       <ContentTemplate>
           Some content....
           <br />
           <asp:TextBox runat=server ID="txtText1"></asp:TextBox>
       </ContentTemplate>
       <Triggers>
       <asp:AsyncPostBackTrigger ControlID="btnSomeButton1" />
       </Triggers>
   </asp:UpdatePanel>
   <asp:Button runat=server ID="btnSomeButton1" Text="Do Async call for panel 1" OnClick="btnSomeButton1_Click" />
   
   <br />
   
   <asp:UpdatePanel runat=server ID="UpdatePanel2">
       <ContentTemplate>
           Some content....
           <br />
           <asp:TextBox runat=server ID="txtText2"></asp:TextBox>
       </ContentTemplate>
       <Triggers>
       <asp:AsyncPostBackTrigger ControlID="btnSomeButton2" />
       </Triggers>
   </asp:UpdatePanel>
   <asp:Button runat=server ID="btnSomeButton2" Text="Do Async call for panel 2" OnClick="btnSomeButton2_Click" />