Wednesday, August 25, 2010

How to defer long running data binding from initial page load - Late Binding

We can use wrap data bound conrols with an update panel and ignore the databound controls for initial page load
protected override void OnLoad(EventArgs e)
{
    base.OnLoad(e);
    if (ScriptManager.GetCurrent(this).IsInAsyncPostBack)
    {
        ///
        /// Long running data binding operations
        ///
    }
}
Then once page loaded with a message 'Loading page ... please wait...' then fire up a asyc requst the server representing the update panel to bind data bound controls inside the update panel.
Demo:
Example:
<%@ Page Language="C#" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script runat="server">
        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);
            ///
            /// if page does only a asyc postback 
            /// execute my long running operation.
            ///
            if (ScriptManager.GetCurrent(this).IsInAsyncPostBack)
            {
                ///
                /// Just a fake dealy
                ///
                for (int i = 0; i < 5; i++)
                    System.Threading.Thread.Sleep(1000);
                ///
                /// Bind the item list
                /// 
                List<object> items = new List<object>();
                for (int i = 0; i < 10; i++)
                    items.Add(new { Item = "Item " + i });
                this.grvItems.DataSource = items;
                this.grvItems.DataBind();
                ScriptManager.RegisterStartupScript(
                    this.grvItems,
                    this.grvItems.GetType(),
                    this.grvItems.ID,
                    string.Format("document.getElementById('{0}').style.display = 'none';", 
                        this.pnlUpdateProgess.ClientID),
                    true);
            }
        }        
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager runat="server" ID="PageScriptManager">            
        </asp:ScriptManager>
        <h1>Late binding example</h1>
        <hr />
        <asp:Panel runat="server" ID="pnlUpdateProgess">
            <span>Loading page... please wait...</span>
        </asp:Panel>
        <asp:UpdatePanel runat="server" ID="upnlContents">
            <ContentTemplate>
               <asp:GridView runat="server" ID="grvItems" /> 
            </ContentTemplate>            
        </asp:UpdatePanel>
        <script language="javascript" type="text/javascript">
            __doPostBack('<%= this.upnlContents.UniqueID %>''');
        </script>
    </form>
</body>
</html>

1 comment:

Sumit said...

Thank you very much.

Working fine...Thanks Again

iPhone Launch Screen Sizes

iPhone Portrait iOS 8 Retina HT 5.5 = 1242 X 2208 Retna HD 4.7 = 750 X 1134 iPhone Landscape iOS 8 Retina HD 5.5  2208 X 1242 iPho...