Post
Ask Question

Timer Control In ASP.NET

 

Timer Control In ASP.NET

In this article, I will show you step by step procedure, how to use a Timer Control in ASP.NET using Visual Studio 2005 or Visual Studio 2008.

It work like a digital control on the web page…

To follow this code sample, you must use Visual Studio 2005 or Visual Studio 2008.

I have used <! –    –> to comment HTML part of the code.


Step 1. Start -> All Programs -> Visual Studio 2005 or Visual Studio 2008

Step 2. Now go to File Menu -> New -> Web Site

Step 3. 

Under Visual Studio Installed Template-> Choose ASP.NET WEB SITE -> Choose File System from the location combo box -> Set the path by the browse button - > Choose the language from the Language ComboBox (Visual C# , Visual Basic , J #)

Choose Visual C#

Step 4. Click on the OK Button.

This is the source code window and in this page you will se this code. 

 

<%@ Page Language=”C#” AutoEventWireup=”true”  CodeFile=”Default.aspx.cs” Inherits=”_Default” %>

 

<!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 runat=”server”>

<title>Type your webpage title here</title>  <!– Here you can specify your page title in between title tag ->

</head>

<body>

<form id=”form1? runat=”server”>

<div>

 

<!– In between div tags you can manage your web controls like buttons, labels, picture Box, ImageMap etc –>

 

 

</div>

</form>

</body>

</html>


See here is a tab named Design in the bottom of this page.
 
Step 5. Click on this tab and you will see a blank web page where you can drag any control from the toolbox (which is in the left side of this window).

Step 6. Do not drag any control from the toolbox window try to write this code own this will be helpful to you to learn about the tags…

Step 7.  Don’t be frustrate on seeing this code please read carefully its very simple.

Step 8. Drag only one control under the AJAX Extensions.

First control you are going to drag and drop on the page is - Script Manager.


Under the form tag,


<div>

        <asp:ScriptManager ID="ScriptManager1" runat="server">

        </asp:ScriptManager>

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

        <ContentTemplate>

        <asp:Panel runat="server" BackColor="LightPink" BorderStyle="Double" BorderColor="DarkGreen" BorderWidth= "5">

        <center><asp:Label ID="label1" runat="server" BackColor="ButtonShadow" BorderColor="Bisque" Font-Bold="true"></asp:Label>

        <asp:Timer ID="timer1" runat="server" Interval="1000"></asp:Timer>

        </center>

        </asp:Panel>

        </ContentTemplate>

        </asp:UpdatePanel>

    </div>


Step 9. Now open the code window and write this code …

protected void Page_Load(object sender, EventArgs e)

    {

        label1.Text = "Page Refreshed at: " + DateTime.Today.ToLongDateString() + " Time : " + DateTime.Now.ToLongTimeString();

    }



Step 10. Now run your web site by Ctrl + F5

OUT PUT
Step 11. When you run the Timer Control will seem like this... 

 

Timer Control.JPG

And it will work like a digital watch on the web page.

Step 12. Close Browser

 

Step 13. Close Visual Studio…

 

Thanks!


--Nikhil Kumar