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
//////////////////
/////////////////////////////////////////////////////////////////////////////////////
Code Behind File Save it as timer.aspx.cs
///////////////////////////////////////////////////////////////////////////////
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;
}
}
}
