CountDown -Timer ajax control c#.net Asp.net

Task: CountDown Timer in ASP.NET using AjaxControl Toolkit

Description: Sometime we need to countdown timer on website as for bidding website or any else. Then we can use Ajax control to achieve this task. Here I created code for countdown timer (server time).
I used server countdown timer because for bidding we need server time not client machine time which used in javascript code.

note : need ajax control toolkit to add first.
It is freely available at http://www.asp.net/ajaxlibrary/AjaxControlToolkitSamlpleSite/
Here, you can find many sample code for how use ajax controls in your website.

In addition I make CSS for round corner of DIV tag. my div is as a circle.

////////////////
//Design Page ... Save it as timer.aspx
//////////////////


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="timer.aspx.cs" Inherits="timer" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <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>
</head>
<body>
    <form id="countdowntimerform" runat="server">
    <div><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="Label1" 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>
    </form>
</body>
</html>



/////////////////////////////////////////////////////////////////////////////////////
Code Behind File    Save it as timer.aspx.cs
///////////////////////////////////////////////////////////////////////////////


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;

public partial class timer : System.Web.UI.Page
{
    static DateTime setdt;
    protected void Page_Load(object sender, EventArgs e)
    {
     
    }
    protected void Timer1_Tick(object sender, EventArgs e)
    {
         DateTime dt = DateTime.Now;
         TimeSpan differ;
         System.DateTime date1 = new System.DateTime(2013, 4, 1, 20, 10, 0);
         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;
           }
    }
}
///////////////////////////////////////END OF C#.NET/ASP.NET CODE////////////////////////////////

11 comments:

  1. Sir please tell me how can i convert an application form into pdf format

    ReplyDelete
    Replies
    1. Hi,
      You can convert in word/excel easily as below link for pdf you have to use third party tool as describe in below post...
      Convert Gridview to Word/Excel

      Delete
  2. sir plz post coadings for Country-State-City dropdown list using ajax.........

    ReplyDelete
  3. Sir,

    I want to use a timer.The page should not be refreshed for every interval.pls give me the code..

    thanks in advance

    ReplyDelete
    Replies
    1. You have to help yourself, Nobody make code for you...
      Only can guide you, If you want to only show timer then you can use javascript...(combination of codes)

      Delete
  4. Excellent Post. Also visit http://msnetframework.com/#aspnet.php

    ReplyDelete
  5. I really like it whenever people come together and
    share views. Great website, stick with it!

    Also visit my weblog - outdoor decorations

    ReplyDelete
  6. nice..
    http://www.alltechmantra.com/2013/12/how-to-use-timer-control-in-asp.html

    hope this will help you..

    ReplyDelete