Home arrow ASP.NET arrow Page 3 - Create a Simple, Cross-Browser, Dropdown Menu User Control with C#
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
Rating: 4 stars4 stars4 stars4 stars4 stars / 158
November 05, 2002
TABLE OF CONTENTS:
  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
SEARCH DEVARTICLES

Create a Simple, Cross-Browser, Dropdown Menu User Control with C# - Control Design
(Page 3 of 5 )

Generally, user controls are comprised of HTML and/or other ASP.NET server controls. Much of the documentation I have read while learning the .NET Framework often left me feeling a little empty when it came to its description of user control development. The usual example consists of a few <asp:. /> controls (a Label, Textbox and Button) thrown into an .ascx file. They never showed how to get dynamically generated HTML (as opposed to the HTML generated by the built-in server controls) into the control or how or when the control was rendered as part of the parent WebForm. It turns out that when a WebForm's Page_Load event is executed, it also executes the Page_Load for any of the user controls it contains. Therefore, in the control's Page_Load event, you can do whatever is necessary to get your control ready for display. This is presented, but is often not obvious, in the examples that show how to turn a WebForm into a user control.

(NOTE: User controls expose a virtual function named Render(). Here you can generate and write-out the HTML for the control without using the Page_Load event.)

This user control will be fairly straight-forward. It will contain an <asp:Label /> control used to display the menu text generated from the XML and XSL transform, a <link /> tag for the required style sheet and a <script /> tag that points to the JavaScript file that will help show and hide the dropdown menus. I could have "hidden" the CSS and JavaScript files in the XSL file but I thought, by leaving them to stand on their own, it brought home the fact that these files are a very necessary part of the control's functionality and presentation. (You need the JavaScript in order to hide/display the <div /> tags (IE) and <layer /> tags (Netscape) that wrap the dropdown menu text. The CSS lets you set up classes (with color, font selection, etc.) that can be applied to the menu's resulting HTML. It also has the styles for turning a dropdown menu on and off.

Here is the presentation portion of the menu control. It's contained in the MenuControl.ascx file that is available as part of the download.

<%@ Control Language="c#" Inherits="MyControls.MyMenu"
src="MenuControl.ascx.cs"%>
<link rel="stylesheet" type="text/css" href="menu.css">
<script language="javascript" src="menu.js"></script>
<asp:Label id="MenuPlaceHolder" runat="server">
Menu Table Goes Here
</asp:Label>


The most important line in this file is the <@Control ... > directive tag. It lets ASP.NET know that the control is written in the C# language, that this page inherits from the MyControls.MyMenu class (contained in this file's code behind page) and where to find the previously mentioned code behind file. Without this directive, the control will not be rendered in the parent WebForm correctly. In fact, all you will see is the Menu Table Goes Here text that is currently the element value for the <asp:Label /> tag.

Control Code
Here is the code portion of the menu control. It is contained in the MenuControl.ascx.cs file.

using System;
using System.Web;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

using System.Xml;
using System.Xml.Xsl;
using System.Xml.XPath;

using System.IO;
using System.Text;

namespace MyControls {

public abstract class MyMenu : System.Web.UI.UserControl
{
protected Label MenuPlaceHolder;

private string xmlFile = "";
private string xslFile = "";

public string XmlFileName
{
get { return(xmlFile); }
set {xmlFile = value;}
}
public string XslFileName
{
get { return(xslFile); }
set {xslFile = value;}
}
private void Page_Load(object sender, System.EventArgs e)
{

string XmlSystemFileName = Server.MapPath(xmlFile);
string XslSystemFileName = Server.MapPath(xslFile);

XPathDocument XmlDoc = new XPathDocument(XmlSystemFileName);
XPathDocument XslDoc = new XPathDocument(XslSystemFileName);

XslTransform XslProc = new XslTransform();
XsltArgumentList XsltArgs = new XsltArgumentList();

StringBuilder sb = new StringBuilder();
StringWriter sw = new StringWriter(sb);

HttpBrowserCapabilities bc = Request.Browser;
HttpBrowserCapabilities bc = Request.Browser;
decimal nVersion = Convert.ToDecimal(bc.Version);
string sBrowser = "";
switch(bc.Browser) {
case "IE":
sBrowser = "IE";
break;
case "Netscape":
sBrowser = "gecko";
if (nVersion < 6) sBrowser = "nn";
break;
default: break;
}
XsltArgs.AddParam("BrowserType", "", sBrowser);
XslProc.Load(XslDoc);
XslProc.Transform(XmlDoc, XsltArgs, sw);

MenuPlaceHolder.Text = sb.ToString();
}
}
}


Code Explanation
The using statements reference the namespaces we need as part of our code base. Without them, we would have to fully qualify any .NET class or data type we used in our code. For instance, if we drop the using System.Web.UI.WebControls statement, we would have to replace our protected variable declaration Label MenuPlaceHolder with System.Web.UI.WebControls.Label MenuPlaceHolder. The System.XML.* using statements expose the .Net XML classes (XPathDocument, XMLDocument, etc.) while System.IO and System.Text allow us to see the StringBuilder and StringWriter classes respectively.

Next, you'll notice that our menu control is part of the MyControls namespace and that it inherits from System.Web.UI.UserControl - which is what we are trying to create.

...
namespace MyControls {
public abstract class MyMenu : System.Web.UI.UserControl
...


The protected variable declaration for MenuPlaceHolder will give us access (from within the MyMenu class only) to the <asp:Label /> where the final menu HTML will be placed.

...
protected Label MenuPlaceHolder;
...


The two private variables will be used to store the filenames of the XML and XSL files used to render the menu.

...
private string xmlFile = "";
private string xslFile = "";
...


The two public property declarations will let us set the control property values from the parent WebForm.

...
public string XmlFileName
{
get { return(xmlFile); }
set {xmlFile = value;}
}
public string XslFileName
{
get { return(xslFile); }
set {xslFile = value;}
}
...


NOTE: Since no code is required to execute when setting the property values, you could have used public variable declarations in place of the property declarations containing the get and set functions. However, I included it as such in order to show a more complete example of how properties are created and used as part of a C# class.

Finally, you see the Page_Load event function for the control. The first two lines map the XML and XSL "web" files to their corresponding "system" (drive letter and path) file name.

...
string XmlSystemFileName = Server.MapPath(xmlFile);
string XslSystemFileName = Server.MapPath(xslFile);
...


The next two lines declare and create XML documents to hold our XML menu layout and the XSL used to transform the XML. You'll notice that we declared the XML documents as XPathDocuments instead of XMLDocuments. The XMLDocument class implements the IXPathNavigable interface and extends the XMLNode class. One of the important functions of the XMLNode class is node creation. Since this functionality comes at a cost, speed, and we don't need it (we only need to navigate through our documents), XPathDocuments were instantiated instead. XPathDocuments implement the IXPathNavigable interface but do not extend the XMLNode class. Therefore, this is the fastest and most efficient option for transforming XML with XSL.

...
XPathDocument XmlDoc = new XPathDocument(XmlSystemFileName);
XPathDocument XslDoc = new XPathDocument(XslSystemFileName);
...


Following our XML document declarations, you'll see the creation of an XSL transform object and an XSLT argument list. The transform object will eventually contain the XSL stylesheet used to transform the menu XML. We will use the argument list to pass name/value pairs to the XSL before transforming the XML (like parameters to a function).

...
XslTransform XslProc = new XslTransform();
XsltArgumentList XsltArgs = new XsltArgumentList();
...


This is followed by a StringBuilder (the .NET's efficient string building object) and StringWriter declaration (for writing to a StringBuilder object). Next, we get some browser information so we can pass the correct browser type to the XSL, via the argument list object, so the correct browser-specific HTML will be generated.

...
StringBuilder sb = new StringBuilder();
StringWriter sw = new StringWriter(sb);
HttpBrowserCapabilities bc = Request.Browser;
decimal nVersion = Convert.ToDecimal(bc.Version);
string sBrowser = "";
switch(bc.Browser) {
case "IE":
sBrowser = "IE";
break;
case "Netscape":
sBrowser = "gecko";
if (nVersion < 6) sBrowser = "nn";
break;
default: break;
}
XsltArgs.AddParam("BrowserType", "", sBrowser);.


Here we load the XSL transform object with the XSL document and transform the menu XML. The result is written to the StringWriter object which ultimately stores the result in the StringBuilder object we passed to it upon creation. Finally, we set the Label's text property to the HTML text that was saved to the StringBuilder object (via the StringWriter object passed to the XML transform).

...
XslProc.Load(XslDoc);
XslProc.Transform(XmlDoc, XsltArgs, sw);
MenuPlaceHolder.Text = sb.ToString();
...

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