|
HTML clipboard
Web forms user
controls allow a programmer to encapsulate portions of a Web site into reusable
controls. It also allows HTML designers to package common UI functionality into
a single control. Moreover, user controls provide developers a completely
object-oriented model in which to work with.
With the advent of user controls, the ASP.NET model allows programmers and HTML
designers to work simultaneously without interfering with each other.
Traditionally, application logic would be embedded in the design itself, such
that concurrent development was not possible and since all parties worked with
the same source file, it would be too easy to accidentally step on another
developer’s work.
In short, user controls allows developers to separate recurring code, UI
elements or a combination thereof. For example, a sign in control that logs a
user into a site can be created as a user control and added to each page with a
single HTML tag. That sign in control should manage itself including handling
how the user logs in and out. The HTML designer does not have to know of any of
the implementation details and simply uses the control like a regular HTML tag.
This provides us with the following benefits:
1. Developers write less code. Even HTML designers can benefit from this by
creating user controls such as a toolbar. Once a user control is written, it
only has to be referenced from another file and hence we do not have the same
code on every page.
2. Single point of reference. Changing the user control reflects on all pages
that uses the control. Therefore, if I had a common footer on all pages of a Web
site, a user control would make perfect sense, since I can update all page
footers with just a single change to the footer user control.
3. Encapsulation. Front-end designers need not know of the nuts and bolts of the
user controls they are using. They simply reference the user control like a
regular HTML tag. This allows both front-end and back-end developers to work
simultaneously without interfering with each other’s work.
To demonstrate, we will create a user control that will represent the footer
across all pages of a certain Web site. To create a user control in Visual
Studio .NET:
1. In the Solution Explorer of an open Web application project, right click on
the project.
2. From the pop-up menu, select Add. Select Add Web User Control...
3. Enter Footer.ascx as the Name. Notice the ASCX extension, which is the
extension for user controls. Click Open.
4. Switch to the HTML Designer View.
If you are not using Visual Studio .NET, simple create a file with the filename
Footer.ascx.
Enter the following:
<p><img src=”logo.gif”
alt=”XYZ Company” /><br />
<small>Copyright
2002 XYZ Company</small></p>aaaaaaaaaaaaaaaa
Save the file. We
have created a very simple 2 line user control that will be accessed from all
pages from XYZ’s company’s Web site.
Other Web pages that will reference the footer user control will look like:
<%@ Register
TagPrefix=”XYZ” TagName=”Footer” src=”Footer.ascx” %>
<html>
<head>
... etc ...
<form runat="server">
<XYZ:Footer id=”Footer” runat=”server” />
</form>
</body>
</html>
The first line
registers our footer user control. The TagPrefix attribute defines the prefix
for the tag to uniquely identify it in case two tags have the same name. The
TagName attribute is the name of the tag while the Src attribute points to the
source code of the user control. In this case, we have registered the following
tag:
. When this page is parsed, every time it encounters a registered
tag, it replaces it with the contents in the source file.
User controls can be very powerful. If for example, one day the company wanted a
Contact Us link at the bottom of every page, the designer would only need to
open up the footer user control and make that one change. All pages that
reference the footer user control will not need to be changed and will
automatically reflect the changes made. In fact, user controls address all the
problems that are associated with traditional includes:
- variable conflicts (e.g. having the same variable name in the include file and
on the page using the include)
- include files can only be processed once per page
- no object model
Conclusion
In conclusion, the ASP.NET model offers a new way to encapsulate reusable
portions of a Web site into user controls. These controls can contain either
logic or UI or a combination of the two, while exposing properties and methods
in an object-oriented manner.
|
