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">
<MenuItems>
<MenuItem id="mnuDrop0" href="http://www.wrox.com" innerText="Wrox Home"
type="regular" />
<MenuItem id="mnuDrop1" href="" innerText="Wrox Sites" type="dropdown">
<MenuItems>
<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" />
</MenuItems>
</MenuItem>
. . .
</MenuItems>
</Menu> The XML can be structured to display a simple horizontal menu bar (Figure 1a) or a horizontal menu bar with dropdowns (Figure 1b).
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.
Next: Control Design >>
More ASP.NET Articles
More By Wrox Team
/ 112 
