Simultanious Async Requests Using Multiple Update Panel

8,486,544 members and growing!

Add a reason or comment to your vote: x
Votes of 3 or less require a comment

See more: ASP.NETAjax

Hi Everyone,

I want to share an experience to deal with the issue of simultaneous asynchronous requests using update panel.

I faced an issue while working with multiple update panels on same page.I found that we can't perform simultaneous Asynchronous Requests using multiple update panels on same page. When we submit multiple request then last request always wins. It was quite unexpected behavior of update panel and against the Asynchronous programming models.
However, if we don't want 'Last request Win' behavior then we can do that by canceling the request if another request is already in progress.All you need to do is.

1. Handle Sys.WebForms.PageRequestManage's InitalizeRequest Event on client side.
2. Use Sys.WebForms.PageRequestManager.get_isInAsyncPostBack() method to know either another request is in progress or not.
3. Cancel the request if another request is already in progress.

Here is sample code:

ASPX:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestAJAXApplication._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <style type="text/css">
        .style1
        {
            width: 100%;
        }
    </style>
    
    
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
                <script type="text/javascript">
                    var prm = Sys.WebForms.PageRequestManager.getInstance();
                    prm.add_initializeRequest(initializeRequest);
                    function initializeRequest(sender, args) {
                       
                        if (prm.get_isInAsyncPostBack()) {
                            alert("Another Request is already in progress");
                            args.set_cancel(true);
                        }
                        
                    }
</script>
        <table class="style1">
            <tr>
                <td>
                    <asp:UpdatePanel ID="upOne" runat="server" ChildrenAsTriggers="true">
                    <ContentTemplate>
                    <asp:Label ID="lblOne" runat="server" Text="Label"></asp:Label><br />
                    <asp:Button ID="btnUpdateOne" Text="Update" runat="server"
                            onclick="btnUpdateOne_Click" />
                    </ContentTemplate>
                    </asp:UpdatePanel>
                </td>
            </tr>
            <tr>
                <td>
<asp:UpdatePanel ID="upTwo" runat="server" ChildrenAsTriggers="true">
                    <ContentTemplate>
                    <asp:Label ID="lblTwo" runat="server" Text="Label"></asp:Label><br />
                    <asp:Button ID="btnUpdateTwo" Text="Update" runat="server"
                            onclick="btnUpdateTwo_Click" />
                    </ContentTemplate>
                    </asp:UpdatePanel>
                </td>
            </tr>
        </table>
    
    </div>
    </form>
</body>
</html>

Code Behined:

namespace TestAJAXApplication
{
    public partial class _Default : System.Web.UI.Page
    {
      protected void btnUpdateOne_Click(object sender, EventArgs e)
        {
            System.Threading.Thread.Sleep(2500);
            lblOne.Text = string.Format(&quot;Updates On: {0}&quot;, DateTime.Now.ToShortTimeString());
        }
        protected void btnUpdateTwo_Click(object sender, EventArgs e)
        {
            System.Threading.Thread.Sleep(2500);
            lblTwo.Text = string.Format(&quot;Updates On: {0}&quot;, DateTime.Now.ToShortTimeString());
        }
    }
}