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();
}
}
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
Post a Comment