Creating Serverside Clock control Using Asp.net Ajax and C#

Introduction

In this article we will learn how to use Timer and Updatepanel controls of Asp.net, inside Custom Control, to create other wraper controls.

Download

Download Clock.zip - 32.07 KB

Prerequisite

To use this you need to have atleast .net framework 2.0 and Asp.net AJAX Extention Controls.

Background

Using Timer we can repeat any set of commands on timely basis. Using Update panel we can process our request in asynchronous mode. So to demonstrate this I will show you a simple Server Side Clock Control.. Where I will set a set of instruction on Tick event of Timer then will wrap it in Side a Updatepanel. And at every 1 second clock will refresh it self.

Assumptions

It is assuming that the reader of this article is aware about Asp.net Ajax.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Ravs
{
    // Declare a clock class
    [ToolboxData("<{0}:Clock  runat="server">")]
    public class Clock : WebControl
    {
        //Create one TimerControl
        Timer timer = new Timer();
        // Create one label control for click value
        Label clockLabel = new Label();
        // Declare one Updatepanel
        UpdatePanel updatePanel = new UpdatePanel();
        // Now override the Load event of Current Web Control
        protected override void OnLoad(EventArgs e)
        {
            
            // Create Ids for Control
            timer.ID = ID + "_tiker";
            clockLabel.ID = ID + "_l";
            // get the contentTemplate Control Instance
            Control controlContainer = updatePanel.ContentTemplateContainer;
            // add Label and timer control in Update Panel
            controlContainer.Controls.Add(clockLabel);
            controlContainer.Controls.Add(timer);
            // Add control Trigger in update panel on Tick Event
            updatePanel.Triggers.Add(new AsyncPostBackTrigger() { ControlID = timer.ID, EventName = "Tick" });
            updatePanel.ChildrenAsTriggers = true;
            // Set default clock time in label
            clockLabel.Text = DateTime.Now.ToString();
            // Set Interval
            timer.Interval = 1000;
            // Add handler to timer
            timer.Tick += new EventHandler(timer_Tick);

            updatePanel.RenderMode = UpdatePanelRenderMode.Block;
            //Add update panel to the base control collection.
            base.Controls.Add(updatePanel);
        }
        protected override void Render(HtmlTextWriter output)
        {
            base.Render(output);
        }

        void timer_Tick(object sender, EventArgs e)
        {
            // Set current date time in label to move current at each Tick Event
            clockLabel.Text = DateTime.Now.ToString();
        }
    }
}
		

let’s discuss each bit individually

Up till now what we have seen. Few text and few lines of code fairly commented. So can you as a reader are able to understand what i want to say. I think no. So now I have to come out of my laziness and should discuss this with you in detail. So lets take each bit of code and examine, what exactly it do.

How to use

Compile your control class and add it in Toolbox, and then drag it on the page it will show you running clock with out refreshing the page. I hope you will learn something from this, and may be you will come up with something more powerful.

Points of Interest

While developing this code i got few more good ideas using Timer and update panel, I will try my best to come back to you guys with something new as soon as possible.

History