ASP.NET

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

Poor Best

Rating:

/ 124

November 05, 2002

TABLE OF CONTENTS:

Create a Simple, Cross-Browser, Dropdown Menu User Control with C# - Using the Control
(Page 4 of 5 )

You need to complete a couple more tasks before you can use your new user control. First, place the control within a WebForm. In order to use the control within a WebForm, you must "register" the control so the parent form knows what to do when it sees this new, custom tag set in its page. ASP.NET enables this through the <@Register ... > directive tag. It is placed at the top of the WebForm.

<%@ Register TagPrefix="ASPToday" TagName="HMenu" Src="MenuControl.ascx" %>

The TagPrefix identifies the control (like the asp: prefix for Microsoft server controls). The TagName names the control so we know how to reference it in the page. The Src attribute points to the file that describes how the user control looks. To use the control in a WebForm, simply use the following syntax:

<ASPToday:HMenu runat="server" ... />

In addition to what you see in the previous line of code, any public variables that were declared as part of the user control can also be set with the attribute=value syntax. In our case, we have two such attributes - XmlFileName and XslFileName. The final .aspx page is as follows:

<%@ Register TagPrefix="myControls" TagName="Menu" Src="MenuControl.ascx" %>
<html>
<head><title>Horizontal Dropdown Menu</title></head>
<body>
<form id="Form1" method="post" runat="server">
<myControls:Menu
id="MenuControl1"
runat="server"
XmlFileName="menu.xml"
XslFileName="menu.xsl"
/>
</form>
</body>
</html>

Now you have everything you need to utilize the user control - the user control files (MenuControl.ascx and MenuControl.ascx.cs) and the .aspx file (named Test.aspx in the download). Create a virtual directory in IIS that points to the folder containing the user control files, test page and the XML, XSL, CSS and JavaScript files from the download. Load your test page into the browser and watch the menu appear. (Figure 2)

Figure 2 Horizontal Menu User Control as part of an ASP.NET WebForm