TO CREATE COUNTDOWN TIMER USING AJAX IN ASP.NET

TO CREATE COUNTDOWN TIMER USING AJAX IN ASP.NET

Friends today we will see how to create a countdown timer with the help of ajax.
 

THE DESIGN PAGE:

You need to frst Register the AJAXCONTROLTOOLKIT in your ASPX page .
then follow the simple code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="testpage.aspx.cs" Inherits="testpage" MasterPageFile="~/MasterPages/MasterPage.master"%>

 <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

   

    <style type="text/css">

        .circle

        {

         text-align:center;

        float:left;

        width:60px;

        height:60px;

        background-color:#ffffff;

        border: 1px solid #000000;

        padding:20px 20px 20px 20px;

        -moz-border-radius: 50px;

        -webkit-border-radius: 50px;

        border-radius: 50px;

     

         font-family:Cambria;

         font-size:35px;

        }

        .styletable

        {

          font-family:Cambria;

            font-size:15px;

         font-weight:bold;

        }

     </style>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="cpMainContent" Runat="Server">

  

    <div id="countdowntimerform" runat="server"><br />

        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

        </asp:ToolkitScriptManager>

        <br />

        <asp:UpdatePanel ID="UpdatePanel1" runat="server">

        <ContentTemplate>

         <asp:Timer ID="Timer1" runat="server" Interval="1000" ontick="Timer1_Tick">

        </asp:Timer>

        <br />

        <br />

        <table width="260">

        <tr>

         <td><div class="circle"><asp:Label ID="Label1" runat="server"></asp:Label></div></td>

         <td><div class="circle"><asp:Label ID="Label2" runat="server"></asp:Label></div></td>

         <td><div class="circle"><asp:Label ID="Label3" runat="server"></asp:Label></div></td>

         <td><div class="circle"><asp:Label ID="Label4" runat="server"></asp:Label></div></td>

        </tr>

        <tr align="center"><td><b>DAYS</b></td><td><b>HOURS</b></td><td><b>MIN</b></td><td><b>SEC</b></td></tr></table

        </ContentTemplate>

        </asp:UpdatePanel>

         </div>

   </asp:Content>

THE CODE BEHIND:

using System;

using System.Collections;

using System.Configuration;

using System.Data;

using System.Linq;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Linq;

using System.Data;

public partial class testpage : System.Web.UI.Page

{

    static DateTime setdt;

    protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

        { 

            

        

            DateTime time = DateTime.Now;              // Use current time

            string format = "d mm yyyy HH:mm:ss ";    // Use this format

            Console.WriteLine(time.ToString(format));  // Write to console

          DateTime  date1 = (time.AddMinutes(3));  

//HERE I HAVE ADDED THE TIMER TO 3 MINUTES FROM THE CURRENT TIME.SO THE //COUNTDOWN WILLSTARTS WITH 3 MINUTES REMAINING.

  

        Session["addedtime"] = date1;

          Timer1.Enabled = true;

        }

    }

    protected void Timer1_Tick(object sender, EventArgs e)

    {

        DateTime dt = DateTime.Now;

        TimeSpan differ;

        

      //   System.DateTime date1 = new System.DateTime();

        DateTime date1 = (DateTime)Session["addedtime"];

        differ = date1.Subtract(dt);

        double t = differ.TotalSeconds;

        if (t > 0)

        {

            double yr, mnth, dy, h, m, s;

            dy = differ.Days;

            h = differ.Hours;

            m = differ.Minutes;

            s = differ.Seconds;

            Label1.Text = dy.ToString();// +" Days " + h + " Hours " + m + " Minutes " + s + " Seconds left for celebration";

            Label2.Text = h.ToString();

            Label3.Text = m.ToString();

            Label4.Text = s.ToString();

        }

        else

        {

            Timer1.Enabled = false;

//and perform your other logic here

        }

    }

   

}