Preferred Language:

Listing 31.12 - UpdatePanelCustomProgress.aspx

Listing 31.12 - UpdatePanelCustomProgress.aspx (C#)
Copy 

<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">

    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(2000); // sleep 2 seconds
    }

</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>UpdatePanelCustomProgress</title>
    <style type="text/css">
        .normal
        {
            width:300px;
            padding:10px;
            margin:10px;
            border: solid 4px black;
        }
        
        .updating
        {
            width:300px;
            padding:10px;
            margin:10px;
            border: solid 4px orange;
        }
    
        .updated
        {
            width:300px;
            padding:10px;
            margin:10px;
            border: solid 4px green;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">

    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    
    <div id="panelContainer">
    <asp:UpdatePanel id="up1" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
        <%= DateTime.Now.ToString("T") %>
        <asp:Button
            id="btnSubmit1"
            Text="Submit 1"
            OnClick="btnSubmit_Click" 
            Runat="server" /> 
    </ContentTemplate>
    </asp:UpdatePanel>

    <asp:UpdatePanel id="up2" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
        <%= DateTime.Now.ToString("T") %>
        <asp:Button
            id="btnSubmit2"
            Text="Submit 2"
            OnClick="btnSubmit_Click" 
            Runat="server" /> 
    </ContentTemplate>
    </asp:UpdatePanel>
    </div>
    </form>
    <script type="text/javascript">
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_beginRequest(prm_beginRequest);
    prm.add_pageLoaded(prm_pageLoaded);
    
    function prm_beginRequest(sender, args)
    {
        var container = args.get_postBackElement().parentNode;
        container.className = 'updating';
    }

    function prm_pageLoaded(sender, args)
    {
        var panelsCreated = args.get_panelsCreated();
        for (var k=0;k<panelsCreated.length;k++)
            panelsCreated[k].className = 'normal';

        var panelsUpdated = args.get_panelsUpdated();
        for (var k=0;k<panelsUpdated.length;k++)
            panelsUpdated[k].className = 'updated';
    }

    </script>
</body>
</html>