The Ajax Timer control is a server control that embeds a JavaScript component into the Web page. Then the JavaScript component initiates the postback from the browser when the interval that is defined in the Time Interval property has elapsed.
Time control always used with ScriptManager class that means an instance of ScriptManager class me be include in web page before add Timer control.
When Timer control initiates the postback, it rails the Tick event on the server. You can use it by creating an event handler on server to perform action periodically.
Scenarios:
Case1: If you want to refresh your web page or a part of web page at a timed interval then we can use Ajax Timer Control.
Case2: In case of refresh only a part of web page Ajax Timer Control use with ScriptManager and UpdatePanel control.
Case 1. Refresh Complete Page
Step 1: Add ScriptManager Control in your design page. You will find it at ToolBox –> Ajax Extensions Tab.
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>Step 2. Add timer control in your design page. You will find Time control in your ToolBox –> Ajax Extensions Tab.
<asp:Timer ID="Timer1" runat="server"
Interval="10000" ontick="Timer1_Tick">
</asp:Timer>Interval=”10000″
Here we have setup Interval property of Timer is “10000” means page will be refreshed in every 10 seconds because Interval property is defined in milliseconds.
ontick=”Timer1_Tick”
This event we will use to add business logic which will refreshed at every 10 seconds.
Step 3. Add your Business Logic which you want to update after a time interval at Timer Tick event in Server page
protected void Timer1_Tick(object sender, EventArgs e) { // Place your business logic here which will // refresh after the given time interval }
Case 2. Refresh a part of web page
This is the most common scenario in which we use Timer control.
We can easily understand this case with the help of following example.
If we want to print the Current date time on a label in page and update it with real time change then we can use Timer control to achieve this.
In this scenario Timer control will be used with ScriptManager control, the UpdatePanel control.
Step 1: Add ScriptManager Control in your design page. You will find it at ToolBox –> Ajax Extensions Tab.
<asp:ScriptManager ID="ScriptManager11" runat="server">
</asp:ScriptManager>Step 2: Add UpdatePanel Control in your design page. You will find it at ToolBox –> Ajax Extensions Tab.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
</asp:UpdatePanel>Step 3: Add Timer Control within UpdatePanel.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Timer ID="Timer1" runat="server" Interval="10000"
ontick="Timer1_Tick">
</asp:Timer>
</ContentTemplate>
</asp:UpdatePanel>I have already explained Interval property and ontick event above in details.
Step 4: Add Label within UpdatePanel.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Timer ID="Timer1" runat="server"
Interval="10000" ontick="Timer1_Tick">
</asp:Timer>
<asp:Label ID="MyLabel" runat="server"
Text="This Panel Still not refreshed.">
</asp:Label>
</ContentTemplate>
</asp:UpdatePanel>Here we have set the default text of label is “This Panel Still not refreshed”. So that we can easily verify when panel start to refresh at every 10 seconds.
Step 5: Add your Business Logic which you want to update after a time interval at Timer Tick event in Server page
protected void Timer1_Tick(object sender, EventArgs e) { // Place your business logic here which will refresh after the given time interval MyLabel.Text = "Panel refreshed at: " + DateTime.Now.ToLongTimeString(); }
Now save your project and press ctrl+f5 to run it and wait at least 10 second to see the panel to refresh. And you will see that the text of label changed at every 10 seconds without reload the complete page.