Home arrow ASP.NET arrow Page 2 - Create a Simple, Cross-Browser, Dropdown Menu User Control with C#

Create a Simple, Cross-Browser, Dropdown Menu User Control with C#

In this article, Nick Howard will demonstrate the use of an ASP.NET user control coded in C#. In order to accomplish this task, a variety of technologies will be utilized including XML, XSL/XSLT, CSS and JavaScript.

Author Info:
By: Wrox Team
Rating: 4 stars4 stars4 stars4 stars4 stars / 158
November 05, 2002
  1. · Create a Simple, Cross-Browser, Dropdown Menu User Control with C#
  2. · What are ASP.NET User Controls?
  3. · Control Design
  4. · Using the Control
  5. · Conclusion

print this article

Create a Simple, Cross-Browser, Dropdown Menu User Control with C# - What are ASP.NET User Controls?
(Page 2 of 5 )

In their simplest form, ASP.NET user controls are what developers always wanted from server-side includes. With include files, you could clean up your code and put useful functionality into its own file in order to 1) find it more easily and 2) use it more often and more safely than cutting and pasting the code from application to application. If you fixed or extended the functionality, it was in one place and generally was reflected across all of the applications in which it was being used (at least in some cases).

The one, big, and very limiting problem was that, if you included the same file more than once in the same ASP file, you'd receive the dreaded Named redefined error once your ASP page was rendered in the browser. Well, Microsoft has finally answered your long, unanswered prayers with ASP.NET server controls. The user control is the most basic of this group and the easiest to develop, implement and, more importantly, understand. Ultimately, a custom control or server control will give you the most flexibility and extensibility (meaning one instance will work across web applications whereas the user control must be included in each application that uses it). However, I believe it is the best place to start in order to understand how server controls work and how much power they put at your development fingertips.

Control Overview
The final result of our control development will be less than 50 lines of code. The flexibility of the control lies in the technologies that we will use to describe (XML), transform (XSL), display (CSS) and eventually manipulate (JavaScript) the menu. In the end, we will have seen examples of XML and its usefulness in describing hierarchical data, XSL/XSLT and its transformation powers, CSS and its styling qualities, JavaScript and DHTML (for moving HTML "mountains") and finally the ease of user control development with the .NET Framework.

The following is a snippet of the XML we will be using to describe the menu:

<Menu cellpadding="1" separators="true" align="left">
<MenuItem id="mnuDrop0" href="http://www.wrox.com" innerText="Wrox Home"
type="regular" />
<MenuItem id="mnuDrop1" href="" innerText="Wrox Sites" type="dropdown">
<MenuItem href="http://www.asptoday.com" innerText="ASP Today"
type="regular" />
<MenuItem href="http://www.csharptoday.com" innerText="C# Today"
type="regular" />
<MenuItem href="http://p2p.wrox.com" innerText="P2P Site"
type="regular" />
<MenuItem href="http://academic.wrox.com" innerText="Academic Site"
type="regular" />
. . .

The XML can be structured to display a simple horizontal menu bar (Figure 1a) or a horizontal menu bar with dropdowns (Figure 1b).

Figure 1a Simple Horizontal Menu without Dropdown Menus

Figure 1b Horizontal Menu with Dropdown Menus

NOTE: Check the sample code for a variety of menu item examples. The menu items are named descriptively so you can go directly to the XML file in order to see the data that created each link. Also, only one dropdown level is supported for this article. If you are interested in the XSL for multi-level dropdowns, let us know. Or, better yet, take this as a starting point and try it yourself.

As part of the XML structure, you can set the href (or the final destination of a menu click), the onClick event, the target (current window, new window) and assorted anchor tag attributes. In fact, setting anchor tag attributes is basically all you're doing; telling the XSL transform how to define a bunch of anchor tags (that's what a menu is, isn't it). The supplemental XSL, JavaScript and CSS files are part of the download for this article. These will not be shown as part of the article.

Coding Style
Lots of articles and books on the .NET Framework present the server-side code, HTML and .NET server control declarations in one .aspx file. As part of the .NET Framework, Microsoft has given developers the ability to separate the presentation and code portions of their ASP.NET pages. This is called code-behind. I have used this technique for this article's sample code. The file naming convention is as follows:

Presentation File: FileName.aspx (user controls will have an .ascx extension)

Codebehind File: FileName.aspx.cs

The .cs portion of the filename identifies that the file contains C# code. If you were coding in VB.NET, you would replace the .cs with .vb. This is just a recommendation on their part. You can name the code behind file whatever you want. However, this method keeps everything organized, well-structured and easy to identify. This is the convention that Microsoft is using in the Visual Studio .NET development environment.
blog comments powered by Disqus

- 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 

Developer Shed Affiliates


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