UpdatePanel-Custom-Progress

Ajax ASP.Net Tutorial


            <%@ Page Language="C#" %>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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



    UpdatePanelCustomProgress
    
        .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;
        }
    


    
    
    
    
    
        <%= DateTime.Now.ToString("T") %>
                    id="btnSubmit1"
            Text="Submit 1"
            OnClick="btnSubmit_Click"
            Runat="server" />
    
    
    
    
        <%= DateTime.Now.ToString("T") %>
                    id="btnSubmit2"
            Text="Submit 2"
            OnClick="btnSubmit_Click"
            Runat="server" />


    
    
    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[k].className = 'normal';
        var panelsUpdated = args.get_panelsUpdated();
        for (var k=0;k            panelsUpdated[k].className = 'updated';
    }