Load data in the web page after Page load using Timer and Ajax Update panel for fast downloading of page in c#- Asp.net

In this blog I am going to explain how we could load data asynchronously after Page Load is completed in c#-asp.net i.e loading data post the page load so that if you have some page on click of another page your 2nd page could load very fast.

We have seen a lot of case where we click on login button but the page loads very slowly even its design and images took a lot of time. Loading and optimizing code for fast retreival of data is different thing and I am not going to touch that thing in this post. This post is just about loading page fast using Timer control and Update Panel

So, first of all place a timer and AJAX- update panel before the gridview in your aspx page which needed to load data asynchronously after page load like below ::

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
         DIV.ProgressBarNew {
            width: 150px;
            height: 100px;
            position: absolute;
            left: 45%;
            top: 40%;
            visibility: visible;
            vertical-align: middle;
            border-style: none;
            background-color: transparent;
            z-index: 1001;
        }

        DIV.ProgressBarBackNew {
            position: fixed;
            vertical-align: middle;
            text-align: center;
            z-index: 1000;
            top: 22%;
            left: 0px;
            background-color: Gray;
            filter: alpha(opacity=0);
            opacity: 0;
            margin: 2px 0px 0px 0px;
            width: 100%;
            height: 100%;
            min-height: 100%;
            min-width: 100%;
        }
    </style>
</head>
<body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div>
            This area is loaded before Data load. Designs-Headers and texts goes here<br />
            <span>===============================================================</span>
        </div>
        <div>
            <br />
            <asp:Timer ID="Timer1" runat="server" OnTick="Timer1_Tick" Interval="2000"></asp:Timer>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" HeaderStyle-BackColor="Wheat">
                        <Columns>
                            <asp:BoundField DataField="Name" HeaderText="Name" />
                            <asp:BoundField DataField="Department" HeaderText="Department" />
                            <asp:BoundField DataField="Designation" HeaderText="Designation" />
                            <asp:BoundField DataField="UserId" HeaderText="Employee Code" />
                        </Columns>
                    </asp:GridView>
                    <asp:Image ID="imgLoader" runat="server" ImageUrl="~/images/Spinner.gif" />
                </ContentTemplate>
            </asp:UpdatePanel>
            <br />
        </div>
        <div>
            <span>===============================================================</span>
            <br />
            This area is loaded before Data load. Designs-Footers and texts goes here
        </div>
    </form>
</body>
</html>

Now goto your code window i.e aspx.cs page and add sql related namespaces and OnTimer Tick event call gridview data load method. Have a look on below code::

using System.Data;
using System.Configuration;
using System.Data.SqlClient;

 protected void Timer1_Tick(object sender, EventArgs e)
    {
        this.LoadGrid();
        imgLoader.Visible = false;
        Timer1.Enabled = false;
    }

    private void LoadGrid()
    {
        String sConnString = ConfigurationManager.ConnectionStrings["connString"].ConnectionString;  //Set your connection string in web.config with key Name: connString
        SqlConnection conn = new SqlConnection(sConnString);
        SqlCommand cmd = new SqlCommand();
        SqlDataAdapter sda = new SqlDataAdapter();
        DataSet ds = new DataSet();
        cmd.CommandType = CommandType.Text;
        cmd.CommandText = "select * from Employee";
        cmd.Connection = conn;
        sda.SelectCommand = cmd;
        try
        {
            conn.Open();
            sda.Fill(ds);
            GridView1.EmptyDataText = "No Records Found";
            GridView1.DataSource = ds;
            GridView1.DataBind();
        }
        catch (Exception ex)
        {
            throw ex;
        }
        finally
        {
            conn.Close();
            conn.Dispose();
        }
    }


Comments

Popular posts from this blog

How to show enlarge image when mouse hover on image or link in Asp.Net(c#) using JavaScript

StateCode and StatusCode Values for mostly used entities in Microsoft Dynamics CRM 2013

How to add custom filter lookup field based on OptionSet field selection in Dynamics CRM.

go to top image