Create User Control

• 1). Launch Microsoft Visual Studio and click the "File" button on the menu. Click "New" and then click "Website." Click the "Visual C#" option to highlight it. Double-click "ASP.NET Web Site." The program creates a new website project and places its files in the Solution Explorer window.
  
  
• 2). Click the "Website" menu button and select "Add New Item." Click "Web User Control" and type "Clock" in the Name text box. Click "Add" to add a new user control named "Clock" to the project. Visual Studio places a new "Clock.ascx" file into the Solution Explorer window. The control's source code appears in the Source window.
  
  
• 3). Paste the text shown below into the code window directly under the first line of code.
  
  <div style="background-color:Yellow; width:80px; color:Blue; border-style:solid; border-color:Red;">
  
  <asp:UpdatePanel runat="server" ID="UpdatePanelClock">
  <ContentTemplate>
  <asp:Label runat="server" ID="LabelClock" />
  </ContentTemplate>
  <Triggers>
  <asp:AsyncPostBackTrigger ControlID="TimerClock" EventName="Tick" />
  </Triggers>
  </asp:UpdatePanel>
  <asp:Timer ID="TimerClock" runat="server" OnTick="TimerClock_Tick" Interval="1000" />
  </div>
  
  This code adds a div block to the page. The div contains an ASP.NET AJAX update panel. The panel contains a content template with a label control that displays the current time. The “Triggers” block associates an AJAX trigger with the timer control on the last line of code before the div tag.
  
  
• 4). Press "F7" to view the C# code associated with the form. The form’s closing tag – a right bracket – appears at the bottom of the page. Paste the following code above that tag.
  
  protected void TimerClock_Tick(object sender, EventArgs e)
  {
  LabelClock.Text = DateTime.Now.ToLongTimeString();
  }
  
  This code creates the timer's clock method that runs every second. The single line of code in this method updates the label in the user control. Because the timer ticks every second, ASP.NET updates the label with the current time every second.
  
  

Create Test Form

• 1). Click the "Website" menu button, click "Add New Item" and then click "Web Form." Type "TestForm" – without the quotes – in the Name text box and click "Add." Visual Studio adds the form to the Solution Explorer window. You will use this form to test the user control.
  
  
• 2). Double-click the form you added to view its default source code in the Source window. Paste the following code below the first line of code in the Source window:
  
  <%@ Register TagPrefix="uc" TagName="Clock" Src="Clock.ascx" %>
  
  This code registers the user control you created. The code sets the value of TagPrefix to "uc" and the value of TagName to "Clock." The Src attribute's value is the name of the user control.
  
  
• 3). Find the form tag that appears in the code. A div tag appears below that tag. Paste the following code below the div tag:
  
  <asp:ScriptManager ID="ScriptManager1" runat="server">
  </asp:ScriptManager>
  <uc:Clock id="Clock" runat="server" />
  
  This is all the code you need to make the user control and clock appear in this form. The first two lines make the ScriptManager available to the form; the third line adds the user control to the form.
  
  
• 4). Press "F5." Visual Studio displays the Web page in your browser and the clock appears on the page.