Home arrow ASP.NET arrow Page 2 - ASP.NET Controls Explained: Part 1/2
ASP.NET

ASP.NET Controls Explained: Part 1/2


In ASP.NET, there are several features that we can use to make our code reusable and independent of other code, including user controls, server controls, and the code behind method. In this article James explains what each of these features are used for, and also shows you how to use each one by providing a number of simple yet detailed ASP.NET examples.

Author Info:
By: James Yang
Rating: 5 stars5 stars5 stars5 stars5 stars / 56
February 03, 2002
TABLE OF CONTENTS:
  1. · ASP.NET Controls Explained: Part 1/2
  2. · User Controls
  3. · HTML Controls and Server Controls
  4. · Code Behind
  5. · Conclusion

print this article
SEARCH DEVARTICLES

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:

Placing our user control on the page

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>

blog comments powered by Disqus
ASP.NET ARTICLES

- How Caching Means More Ca-ching, Part 2
- How Caching Means More Ca-ching, Part 1
- Reading a Delimited File Using ASP.Net and V...
- What is .Net and Where is ASP.NET?
- An Object Driven Interface with .Net
- Create Your Own Guestbook In ASP.NET
- HTTP File Download Without User Interaction ...
- Dynamically Using Methods in ASP.NET
- Changing the Page Size Interactively in a Da...
- XML Serialization in ASP.NET
- Using Objects in ASP.NET: Part 1/2
- IE Web Controls in VB.NET
- Class Frameworks in VB .NET
- Cryptographic Objects in C#: Part 1
- Sample Chapter: Pure ASP.Net

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials