ASP.NET Controls Explained: Part 1/2 - User Controls
(Page 2 of 5 )
In ASP.NET, user controls are like the replacement of server-side includes from traditional ASP. They allow you to separate code that is constantly reused (such as menu bars) into separate files, which provides us with two benefits:
- It allows you to write less code, because we only have to link to the external file from any page that we want to use it on.
- When you decide to change the code that a user control is composed of, you will only have to change it in one file, rather than on all of the pages where it is used.
Let's take a look at an example of a user control, so as to demonstrate their use. We will create a HTML page that has a menu bar. Because we don't want to code the menu bar on every page, we will create a user control, which will represent the menu. Open up notepad enter following code:
<table width = "120" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
DevArticles left menu bar
</td>
</tr>
<tr>
<td>
- Menu Item 1
<br>
- Menu Item 2
<br>
- Menu Item 3
</td>
</tr>
</table>Save the file as leftmenu.ascx and close the file. Open up a new notepad window and enter the following code:
<%@ Register TagPrefix ="devArticles" TagName = "LeftMenu" Src = "leftmenu.ascx"%>
<html>
<head>
<title> devArticles - User Control Example </title>
</head>
<body>
<table width ="100%" bgcolor = "#000000" cellspacing = "1">
<tr>
<td bgcolor = "#ffffff" width = "120" valign = "top">
<devArticles:LeftMenu id = "LeftMenu" runat = "server"/>
</td>
<td bgcolor = "#ffffff" valign = "top">
Your content goes here
</td>
</tr>
</table>
</body>
</html>Save the file as ucexample.aspx and close notepad. When you run this page in your browser, it should look like this:
Let's take a look at the code in the ucexample.aspx page:
<%@ Register TagPrefix ="devArticles" TagName = "LeftMenu" Src = "leftmenu.ascx"%>This code above registers our user control (leftmenu.ascx) as a specific tag. In this case, I have assigned it to the <devArticles:LeftMenu> tag. As you can see, our tag includes a tag prefix, as well as a tag name. Both of these values are defined in the tag that we used to register our user control. Whenever the server locates this tag in our ASP.NET page, it replaces it with the content of the page referenced by the src attribute of the user controls tag (which would be leftmenu.ascx in our case).
As you would have noticed from the example above, user controls are saved with a different file extension to ASP.NET pages. They are saved as .ascx pages. A little later in the ucexample.aspx page, you will notice the
<devArticles:LeftMenu id = "LeftMenu" runat = "server"/> tag, which as I've mentioned, is replaced with the contents of the leftmenu.ascx page. When you look at the page source for ucexample.aspx, you'll see that the contents of leftmenu.ascx have been included in place of the
<devArticles:LeftMenu> tag:
<html>
<head>
<title> devArticles - User Control Example </title>
</head>
<body>
<table width ="100%" bgcolor = "#000000" cellspacing = "1">
<tr>
<td bgcolor = "#ffffff" width = "120" valign = "top">
<table width = "120" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
DevArticles left menu bar
</td>
</tr>
<tr>
<td>
- Menu Item 1
<br>
- Menu Item 2
<br>
- Menu Item 3
</td>
</tr>
</table>
</td>
<td bgcolor = "#ffffff" valign = "top">
Your content goes here
</td>
</tr>
</table>
</body>
</html>Next: HTML Controls and Server Controls >>
More ASP.NET Articles
More By James Yang
/ 6 
