How to write UserControls In ASP.Net
If you are seeing this section and do not see download links, this means that you are not logged into our site. If you already are a member, click on the login link
and login into site and come back to this page for downloading the control files. If you are not a member, click on registration link to
become a Winista member and download the control for free.
During the development a web site, we always wonder is there an easy way to
templatize the common user interface tasks into a control that can be reused or
just included in the web page by simply making use of some kind of include
mechanism. In classic we all used to accomplsih this by either writing some ASP
components or put the commonly used code in a script file and later on include
these files using the server-side include feature of Internet Information Server
But we all know how painful this process is without knowing before hand how
this UI control is going to look like. Or how the layout is going to look like.
There are couple of ways that most of the developers followed. The one that was
very common is use some kind of WYSIWYG kind of web editors. The leading
in these categories are Visual Interdev, Front Page, Dreamweaver or some
other share ware products. After generating the layout, take the HTML code and
put in a file or ASP component and then include it in the web page. Or the
other option was, just trust your judgement and start writing the component
layout programatically and then later on fix it up during debugging.
ASP.Net, all this pain and agony has been relieved. There is
a very clean and effective technique to accomplish these tasks. ASP.Net
provides mechanism of writing
UserControls which are very much
like ASP.Net web-form pages with the following differences.
These files have
.ascx extension and not
You don't need to provide <html>, <body> and <form> tags that
qyalify a page as a web page.
UserControls offer the following features.
Write the common UI features of your web applications as reusable components.
And this reusabilty is not just limited to one application. Properly written
user controls can be distributed for usee in other web applications too.
Unlike classic ASP includes, the
UserControls are not interpreted
for every request. They get cached after the first invocation. This helps in
speeding up the response of your web pages.
UserControls use the same object model as an ASP.Net was page
.aspx). So it gives a great flexibility in terms
of using the event model of the ASP.Net web server controls and controlloing
the execution at run time.
UserControls can be cached independent of rest of the web page.
This technique is called "fragment caching". It also helps in speed up
loading of pages.
As you can see,
UserControls provide a lot more fexibility and
power than the classic ASP SSI. This article is first in the series of
demonstrating how you can write
UserControls for accomplishing
common tasks and then later on using it through out the web site.
This is first of the
UserControls that we have developed for our
web site. Every web site out there has some kind of footer onm every page and
so do we. Therefore we decided to demonstrate the concept of
in developing this very simple control. Following are the simple steps that we
followed to write this control.
<asp:Panel ID="FooterPanel" Runat="server">
<asp:Panel id="FirstLineControls" Runat="server">
<asp:HyperLink id="GoHome" Runat="server" CssClass="footerLink"
<asp:HyperLink id="AboutUs" Runat="server" CssClass="footerLink"
<asp:HyperLink id="ContactUs" Runat="server" CssClass="footerLink"
<asp:HyperLink id="Questions" Runat="server" CssClass="footerLink"
<asp:HyperLink id="SiteMap" Runat="server" CssClass="footerLink">
<asp:Panel id="SecondLineControls" Runat="server">
<asp:HyperLink id="Copyright" Runat="server" CssClass="footerLink"
<asp:HyperLink id="Privacy" Runat="server" CssClass="footerLink"
<asp:HyperLink id="Shipping" Runat="server" CssClass="footerLink"
<asp:HyperLink id="Return" Runat="server" CssClass="footerLink"
This is the second control we have written for a simple demonstration. But it
is one common UI feature that every web site has. All web sites display a
Copyright notice and everybody has a diferent format but it is the same for a
web site. When I say the format is same for a web-site, we are talking about
well designed web sites that keep the look and feel the same from page to page.
We decided to write a very simple
UserControl for our web site.
What id does is nothing fancy schmancy. It simple displays one line of text
displaying the site's Copyright notice. The difference between this control and
the eralier, SiteFooter, control is that it uses Page_Load event to change the
style attributes of Label control at run time. It displays that UserControl
also follow the event mechanism that is used for loading pages and server
<%@ Control Language="c#" AutoEventWireup="false" Codebehind="SiteCopyright.ascx.cs"
<asp:Panel ID="CopyRightPanel" Runat="server">
<asp:Label id="CopyRightLabel" Runat="server">
Copyright® 1999-2002 PardesiServices, LLC
public abstract class SiteCopyright : System.Web.UI.UserControl
protected System.Web.UI.WebControls.Label CopyRightLabel;
protected System.Web.UI.WebControls.Panel CopyRightPanel;
private void Page_Load(object sender, System.EventArgs e)
Load The User Controls In Web Page
The final step is to actually use your
UserControl on the web page
now. Following are the steps that you need to follow to include the control in
First and mose important step is to declare
@Register directive at
the top of page where you want to include the UserControl. This directive has
three important directives that you need to supply.
tagprefix - This attribute indicates the prefix that you will be
using to declare your control on the page. For example, you use
directive to declare server side controls (
tagname - This directive indicate what name you will be using to
declare this control on the web page. For example
src - This attribute provides the path and name of the .ascx file
that contains the
<%@ Register Tagprefix="Softomatix" Tagname="SiteFooter"
<%@ Register Tagprefix="Softomatix" Tagname="SiteCopyright"
<%@ Page language="c#" Codebehind="Default.aspx.cs" AutoEventWireup="false"
If you are using pre-compiled DLL for the control and the assembly is not part
of the current project, then you need to add the reference to the control's
Last step is to actually include the control on the page it self.