Now that we have created a first page to work with, we should create a header control. This control will be used on every page we create, so to avoid having to reinvent the wheel each time we will create a .ascx control. Start by creating a new folder called Controls. Right click the folder and click add new item. Select the web form control option and name the control header.ascx.

Now that we have a header, we will create a simple table design, along with a few navigation links. These links can simply link to the product page for now, and as we add additional pages we will update the header control. A simple table would be the same width as the table we created in the products page. Use whatever css styles you would like for the title and link areas.

Now in the top of the header.ascx page register the ajax toolkit like we did in the products page. You can simply copy and paste the line. Also, remember to link to the css we created using the line: <link href="../Css/Css.css" rel="stylesheet" type="text/css" /> This will allow you to add your custom stylings.

Now that we have created a simple header, a table containing a header and nav links, we will add a timer to the top of the page. To do this, simply add the following line: <asp:Timer ID="HeaderTimer" runat="server" Interval="1000" OnTick="HeaderTimer_Tick" /> This will cause the timer to call the HeaderTimer_Tick method every second. Now we will use this timer to display the current time on the screen. Create an update panel using this line: <asp:UpdatePanel runat="server" ID="pnlAlwaysVisible" UpdateMode="Conditional"> Now inside the update panel we will set the triggers and the content template:

<Triggers>

<asp:AsyncPostBackTrigger ControlID="HeaderTimer" EventName="Tick" />

</Triggers>

<ContentTemplate>

<table class="oBorder" width="100px" />

<tr>

<td align="center">

<asp:Label runat="server" ID="lblDateStamp />

</td>

</tr>

</ContentTemplate>

Now that we have set up our update panel, we will create an ajax AlwaysVisibleControlExtender. To do this add the line <cc1:AlwaysVisibleControlExtender runat="server" ID="awcSideClock" TargetControlID="pnlAlwaysVisible" VerticalSide="top" VerticalOffset="10" HorizontalSide="Left" HorizontalOffset="10" ScrollEffectDuration=".1" />

This will make our table containing the date label visible in the top left corner of the screen, regardless of where the user scrolls. We won't see the effect of this until we add data to the screen that will force the user to scroll, so for now it will appear simply as a clock in the top left of the screen.

The last step for today is to add the very simple method in the code behind which will update the clock every second. The nice thing about the use of the update panel is that it will allow these updates without using a postback, so there will be no refresh of the screen. In the .cs file, add the following method:

protected void HeaderTimer_Tick(object sender, EventArgs e)

{

lblDateStamp.Text = DateTime.Now.ToString();

}

Now when you run the application, you will see the header you created along with the clock in the top left corner. Feel free to play with the properties of the timer or the always visible control. If you change the horizontal side for example, you will see the clock appear in a new location.