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

Search data in Gridview on Textbox Key press event using JQuery in Asp.Net- C#

go to top image