One of the best aspects of ASP.NET development is the availability of Web User Controls, which allow you to isolate application functionality and reuse it within the application. Let's explore taking advantage of components when adding navigation to an ASP.NET application.
What is a Web User Control?
If you remember Microsoft's previous attempts at component development, then you may be familiar with ActiveX controls or ASP include files; they allowed functionality to be separated and reused. The ASP.NET Web User Control is the latest addition to this list. A Web User Control is a separate entity that may be utilized in other elements such as Web forms.
A common element of most Web applications is navigation, which is often located on the left. The key idea is that navigation is usually static (or close to it) throughout the user's application usage. For this reason, it's counterproductive to write navigation code for each Web form affected. It involves extensive upfront costs in terms of time, and this effort is duplicated when you make any changes to the navigation. This is where the Web User Control enters the picture to save the day.
A Web User Control may be as simple or as complex as necessary; and, it may contain instances of other Web User Controls.
The following simple example can showcase the power and flexibility of these elements. I'll create a user control for a very simple site navigation element. The navigation consists of a title and two links. The contents of the navigation are provided in basic HTML:
<div style="FONT-WEIGHT: bold; MARGIN: 30px 0px 0px 50px; CURSOR: hand; COLOR: green; FONT-FAMILY: Georgia, 'Times New Roman', Serif; POSITION: static"> <label>Navigation</label> </div> <div style="FONT-WEIGHT: bold; MARGIN: 70px 0px 0px 50px; CURSOR: hand; COLOR: green; FONT-FAMILY: Georgia, 'Times New Roman', Serif; POSITION: static"> <a href="http://www.techrepublic.com/">Builder.com</a> </div> <div style="FONT-WEIGHT: bold; MARGIN: 110px 0px 0px 50px; CURSOR: hand; COLOR: green; FONT-FAMILY: Georgia, 'Times New Roman', Serif; POSITION: static"> <a href="http://news.cnet.com/">News.com</a> </div>
This is basic HTML utilizing CSS to position the elements. This is the meat of the navigation—it provides two links and a title. A Web User Control follows the syntax of a Web form, where it proclaims what it is through a page directive.
We can use the following directive for our sample:
<%@ Control Language="c#" AutoEventWireup="false" Codebehind="Navigation.ascx.cs" Inherits="WebApplication1.Navigation" %>
This follows the Web form directive, with the difference being the word control in place of page. This is an important distinction because I often test control code or markup by first designing it in a regular page (Web form) to verify the results. After it works as desired, you can easily copy and paste it to a Web User Control.
Once your control is developed to fit your needs, you can utilize it in a Web form. One way to accomplish this is by dragging and dropping the control from the Solution Explorer onto the Web form's palette. (This assumes you're using Visual Studio .NET.)
Another method is to type the reference into the Web form's HTML source (which is automatically added during the drag/drop process). A control must first be referenced before you can use it on a page. Here's the syntax for the register directive:
<%@ Register TagPrefix="uc1" TagName="Navigation" Src="Navigation.ascx" %>
Let's take a look at each attribute of the register directive:
- TagPrefix: The prefix assigned to the user control. It allows you to group together related controls and avoid tag-naming conflicts.
- TagName: The user control's tag name. It's used when adding the actual control to the page.
- Src: The path to the user control's file. A control uses the file extension ascx as opposed to the aspx utilized by normal ASP.NET pages (Web forms).
When the control is registered successfully, you may use it within the page with a tag that utilizes both the TagPrefix and TagName. The following example uses our sample navigation control:
<uc1:Navigation id="Navigation1" runat="server"></uc1:Navigation>
You should notice the correspondence between it and the register directive. Multiple controls may be placed on a page. In addition, any exposed methods or properties may be utilized at this point.
An issue that will arise is the placement of the control on the containing page. Our sample control uses CSS positioning to position its elements, and the elements on the page could do the same to ensure everything is properly placed.
While CSS is gaining momentum, the more common approach is using tables while placing the control in its own cell. In our case, we could create a table with one row and two cells. The user control would in the first cell with other content (changing from page to page) in the second cell. A last approach that is rarely used is the HTML Frames.
While user controls are an excellent developer tool, every aspect of an application will not lend itself to its own user control, but other elements may. Therefore, your team should carefully examine these elements during the design phase before building a robust and scalable application. Converting an element to a user control late in the project development phase may turn out to be productive in the long run, but it will cause many headaches upfront.
More than an include
You may think that a user control is nothing more than a simple include file, but that's not the case. The existence of underlying code associated with the control places power in the developer's hands. A user control allows aspects of the control to change dynamically, whereas includes are often static.
TechRepublic's free .NET newsletter, delivered each Wednesday, contains useful tips and coding examples on topics such as Web services, ASP.NET, ADO.NET, and Visual Studio .NET. Automatically sign up today!
Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a production environment on a daily basis.