Using AJAX Timer, we can show real time data at a specific interval.Timer Control allows
to do postbacks at certain intervals.
In order to use AJAX controls , ScriptManager control is required to be added in the web page.
If the Timer is used along with UpdatePanel, user won't feel the postback.
AJAX Timer is used in scenarios of the real time uses without the user feeling the postback
of the page.
Suppose there is a requirement of displaying the latest data from the server on one side of a
page at a timed interval, we can use this method.
Let me show a very basic example of displaying system date. Suppose there is a Timer
control and a Label inside the UpdatePanel and Label displays the date with time on
Timer's Tick event.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Timer ID="Timer1" runat="server" Interval="2000" OnTick="Timer1_Tick">
</asp:Timer>
<asp:UpdatePanel ID="Updatepanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" BackColor="White" BorderColor="#E7E7FF" BorderStyle="None"
BorderWidth="1px" CellPadding="3" GridLines="Horizontal">
<RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" />
<FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" />
<Columns>
<asp:BoundField DataField="AGN_NAME" HeaderText="Name" SortExpression="AGN_NAME" />
<asp:BoundField DataField="AGN_TEL" HeaderText="Telephone" SortExpression="AGN_TEL" />
<asp:BoundField DataField="AGN_ID" HeaderText="User ID" SortExpression="AGN_ID" />
</Columns>
<PagerStyle BackColor="#E7E7FF" ForeColor="#4A3C8C"
HorizontalAlign="Right" />
<SelectedRowStyle BackColor="#738A9C" Font-Bold="True"
ForeColor="#F7F7F7" />
<HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" />
<AlternatingRowStyle BackColor="#F7F7F7" />
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
protected void Timer1_Tick(object sender, EventArgs e)
{
DataSet ds = new DataSet();
string connectionString = ConfigurationManager.ConnectionStrings["conn"].ConnectionString;
using (SqlConnection dbConnection = new SqlConnection(connectionString))
using (SqlCommand dbCommand = new SqlCommand())
{
dbCommand.CommandText = "select * from Agents";
dbCommand.Connection = dbConnection;
dbConnection.Open();
SqlDataAdapter da = new SqlDataAdapter(dbCommand);
da.Fill(ds);
}
GridView1.DataSource = ds;
GridView1.DataBind();
}
Even though partial updates are not as heavy as real postbacks, as it is contacting the
server on Timer's tick, based on our requirement it is better to use high time intervals
there by reducing the frequency.
to do postbacks at certain intervals.
In order to use AJAX controls , ScriptManager control is required to be added in the web page.
If the Timer is used along with UpdatePanel, user won't feel the postback.
AJAX Timer is used in scenarios of the real time uses without the user feeling the postback
of the page.
Suppose there is a requirement of displaying the latest data from the server on one side of a
page at a timed interval, we can use this method.
Let me show a very basic example of displaying system date. Suppose there is a Timer
control and a Label inside the UpdatePanel and Label displays the date with time on
Timer's Tick event.
HTML Code (.aspx) :
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="Updatepanel1" runat="server">
<ContentTemplate>
<asp:Timer ID="Timer1" runat="server" Interval="2000" OnTick="Timer1_Tick">
</asp:Timer>
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
C# Code (.aspx.cs ) :
protected void Timer1_Tick(object sender, EventArgs e)
{
Label1.Text = "Current time is : " +DateTime.Now.ToLongTimeString();
}
AJAX Timer can be used for updating content of one or more UpdatePanel.
It can be used for updating the content of control inside another UpdatePanel.
In next example I will show this case. Suppose I want to display latest data
at specified interval in a GridView and the Timer is outside GridView's
UpdatePanel, below is the code for it :
HTML Code (.aspx) :
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Timer ID="Timer1" runat="server" Interval="2000" OnTick="Timer1_Tick">
</asp:Timer>
<asp:UpdatePanel ID="Updatepanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" BackColor="White" BorderColor="#E7E7FF" BorderStyle="None"
BorderWidth="1px" CellPadding="3" GridLines="Horizontal">
<RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" />
<FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" />
<Columns>
<asp:BoundField DataField="AGN_NAME" HeaderText="Name" SortExpression="AGN_NAME" />
<asp:BoundField DataField="AGN_TEL" HeaderText="Telephone" SortExpression="AGN_TEL" />
<asp:BoundField DataField="AGN_ID" HeaderText="User ID" SortExpression="AGN_ID" />
</Columns>
<PagerStyle BackColor="#E7E7FF" ForeColor="#4A3C8C"
HorizontalAlign="Right" />
<SelectedRowStyle BackColor="#738A9C" Font-Bold="True"
ForeColor="#F7F7F7" />
<HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" />
<AlternatingRowStyle BackColor="#F7F7F7" />
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
C# Code (.aspx.cs) :
protected void Timer1_Tick(object sender, EventArgs e)
{
DataSet ds = new DataSet();
string connectionString = ConfigurationManager.ConnectionStrings["conn"].ConnectionString;
using (SqlConnection dbConnection = new SqlConnection(connectionString))
using (SqlCommand dbCommand = new SqlCommand())
{
dbCommand.CommandText = "select * from Agents";
dbCommand.Connection = dbConnection;
dbConnection.Open();
SqlDataAdapter da = new SqlDataAdapter(dbCommand);
da.Fill(ds);
}
GridView1.DataSource = ds;
GridView1.DataBind();
}
Even though partial updates are not as heavy as real postbacks, as it is contacting the
server on Timer's tick, based on our requirement it is better to use high time intervals
there by reducing the frequency.
No comments:
Post a Comment