Sunday, 1 December 2013

How AJAX timer control works

Ajax Timer control performs postbacks at defined intervals. If you use the Timer control with an Update Panel control, you can enable partial-page updates at a defined interval. You can also use the Timer control to post the whole page.

You use the Timer control when you want to do the following:
·         Periodically update the contents of one or more Update Panel controls without refreshing the whole Web page.
·         Run code on the server every time that a Timer control causes a postback.
·         Synchronously post the whole Web page to the Web server at defined intervals.


         Background Details of Ajax Timer Control

·         The Timer control is a server control that embeds a JavaScript component into the Web page. The JavaScript component initiates the postback from the browser when the interval that is defined in the Interval property has elapsed. You set the properties for the Timer control in code that runs on the server and those properties are passed to the JavaScript component.
·         An instance of the ScriptManager class must be included in the Web page when you use the Timer control.
·         When a postback was initiated by the Timer control, the Timer control raises the Tickevent on the server. You can create an event handler for the Tick event to perform actions when the page is posted to the server.

On the Default.aspx page, I have inserted the following lines of code

  <div id="headright" style="width:49%; height:200px; border:2px solid red; float:right;">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
         <center><h1>TIME ON LABEL WITHOUT AJAX TIMER CONTORL</h1></center>
          <asp:UpdatePanel ID="UpdatePanel1" runat="server">
          <ContentTemplate>
          <center><h2 style="color:red;"><asp:Label ID="lblajaxtime" runat="server" Text="Show Time with ajax "></asp:Label></h2></center>
         
          <center> <asp:Timer ID="Timer1" runat="server" Interval="1000" ontick="Timer1_Tick">
              </asp:Timer>
   </center>
             
         </ContentTemplate>
        </asp:UpdatePanel>
          </div>
   

Set the Interval property to specify how often postbacks will occur, and set the Enabled property to turn the Timer on or off. The Interval property is defined in milliseconds and has a default value of 60,000 milliseconds, or 60 seconds.

you can set the timer INTERVAL property by using select the timer contorol and open the properties window
or set at the design time time will be in milliseconds .

On the Default.aspx.cs page, I have the following lines of code:

protected void Timer1_Tick(object sender, EventArgs e)
    {
        lblajaxtime.Text = DateTime.Now.ToString();
    }


Design of the page will be like this

now the timer will be run like a watch

now enjoy this post if any query regarding this you can ask me... on my blog..
you can create a countdown timer with this control i will explain this in my next post..

thank you



No comments:

Post a Comment