Microsoft.NET

……………………………………………….Expertise in .NET Technologies

Using Menus in an ASP.NET 1.x Web Application

Posted by Ravi Varma Thumati on February 2, 2012

Introduction

Imagine you had just installed a new program to help prepare your taxes and, not wanting to bother with reading the instructions or help files, needed to figure out how to start entering the needed information. What would you do to get started? You’d likely scan the user interface, looking for a toolbar or menu. If the software program you installed was well-designed, it should be relatively easy to find out how to get started. The reason many computer programs are easy is due to the homogeneity of their user interfaces. We’re accustomed to programs having a menu and a toolbar. We know that there will, at minimum, be menu items named File, Edit, and Help.

Not unlike desktop applications, Web applications also have standard user interface components. Examples of such standard user interface designs for Web sites include:

  • The name or logo of the Web site at the top-center or top-left of each and every Web page that, when clicked, returns the user to the homepage.
  • A listing of the site’s features or sections along the top and/or the left- or right-hand side.
  • A reiteration of the site’s features or sections at the bottom-center of each Web page.

There are, of course, others, but these three design rules hold for most every major Web site. (Granted, some Web sites purposefully break these “rules” in an attempt to look artsy, edgy, modern, or cutting-edge.)

When designing a Web site it’s typically not a good idea to break from the standard user interface design principles employed by the mass of other Web sites. However, it is usually safe to add new user interface design themes into a Web site application if the design theme is one your users are likely to already be intimately familiar with. Since menus are commonplace in desktop applications, they can fit well into a Web site as well.

In this article we are going to look at the basics of menus in Web sites. Creating such menus involve a bit of tricky client-side JavaScript and a good design eye. We won’t harp on the technical details behind creating menus – there are numerous other articles that focus on that. Rather, we’ll look at various ASP.NET menu controls that allow for Web menus to be added to ASP.NET Web applications with minimal effort and time. Our examination will focus in on skmMenu, an open-source ASP.NET menu control I created in November 2003.

Web Site Menu Basics

We are all, no doubt, quite familiar with the purpose of menus and the user experience they present. A user moves his mouse cursor over a menu item and clicks his mouse, thereby showing the menu’s items. Clicking a menu item might cause some action to occur, or might display another “sub” menu of additional, related choices. Web site menus typically differ just slightly in their user experience. First, Web site menus usually don’t require the user to click to display the menu items. Furthermore, the “action” that is performed when clicking on a menu item oftentimes is taking the user to some URL.

For an example of a Web site menu, check out CrateAndBarrel.com. Along the upper part of the page, there is a menu with top-level menu items: Shop, Gift Registry, Gift Ideas, and Fresh Crate. Moving your mouse over Shop or Gift Registry displays a series of related menu options; for example, under the Gift Registry menu item, there are four choices: Main Page, Give a Gift, Create a Registry, and Edit Your Registry. Clicking on the Give a Gift menu item whisks you to a Web page with a wizard for helping you give a gift.

From the user’s point of view, displaying and hiding a menu’s submenus should happen immediately. That means that hiding and displaying menus must happen on the client-side, and not require a postback to the Web site. Therefore, when building a Web site menu, part of the challenge is in writing the correct client-side JavaScript code to successfully show and hide the menu’s submenus.

Another challenge with Web site menus is specifying the data that appears in each menu item. How do the Web page developers at CrateAndBarrel.com specify the contents of the menu, and where clicking a menu item will take the user? Since menu’s typically can have an arbitrary amount of nesting – that is, a menu could have several submenus, each of which have menu items with submenus, each of which have menu items with submenus, and so on and so on – Due to this limitless nesting, XML files are often used to specify the structure of a menu. (XML is a good fit because it allows for easily specifying hierarchical, related data; The precise elements used in the XML data file would differ based on the menu component used, but CrateAndBarrel.com’s menu might use an XML file that looked like:

<menu>

  <item>

    <text>Shop</text>

    <url>http://www.crateandbarrel.com/Categories/</url&gt;

    <submenu>

      <item>

        <text>Dinnerware</text>

        <url>http://www.crateandbarrel.com/Categories/Dinnerware/</url&gt;

      </item>

      <item>

        <text>Flatware</text>

        <url>http://www.crateandbarrel.com/Categories/Flatware/</url&gt;

      </item>

      …

    </submenu>

  </item>

  <item>

    <text>Gift Registry</text>

    <url>http://www.crateandbarrel.com/gr/</url&gt;

    <submenu>

      <item>

        <text>Main Page</text>

        <url>http://www.crateandbarrel.com/gr/</url&gt;

      </item>

      …

    </submenu>

  </item>

  …

</menu>

While XML files work well for static menus, in some situations the menu needs to be dynamically generated. If different users have different levels of access, you might need to display certain menu items for certain users only. Most Web site menu components provide some means for dynamically constructing the menu’s structure for these situations.

Creating a robust Web site menu control from scratch can be a daunting and time-consuming task. Fortunately there are numerous ASP.NET menu controls available, which can be easily plugged into an ASP.NET site in a matter of minutes.

Examining skmMenu – a Free, Open-Source Menu Control

One of the many ASP.NET menu controls available is skmMenu, an open-source ASP.NET menu control created back in October 2003. Since then, skmMenu has been enhanced by dozens of developers world-wide. Let’s examine the current version of skmMenu, skmMenu 2.0. (skmMenu 2.0 is the latest version of skmMenu as of the time of writing, January 28th, 2004.)

The first step to getting started with using skmMenu is to download skmMenu from the official Web site – http://www.datawebcontrols.com/menu. If you are using the .NET Framework version 1.1 and just want to use skmMenu in your ASP.NET application and are not interested in examining, modifying, or enhancing the underlying source code, you can download the skmMenu binaries. If you are using the .NET Framework version 1.0 or want to tinker around with skmMenu’s source code, download the complete source code.

If you download the source code, your first step will be to compile the code into an assembly (a .dll file). If you are using Visual Studio .NET 2003, this is as simple as opening the skmMenu project and building the solution. If you are using Visual Studio .NET 2002, you will need to create a new C# Web Control Library project and then manually add in the files downloaded. (You’ll also need to add the System.Design.dll assembly to the project’s References folder.) Building the solution will yield the assembly fileskmMenu.dll.

Once you have the skmMenu.dll assembly – either by compiling the source code or by downloading the skmMenu.dll file directly – you are ready to start using it in an ASP.NET Web application. Start by creating or opening an ASP.NET Web application in Visual Studio .NET. Our first task will be to add skmMenu to the Visual Studio .NET Toolbox. This is accomplished by right-clicking on the Toolbox and choosing Add/Remove Items… Doing so will display a dialog box with two tabs: .NET Framework Components and COM Components. Make sure the .NET Framework Components tab is selected, click the Browse button, navigate to the skmMenu.dll file, and click OK. This will add an item called Menu to the Toolbox.

To add skmMenu to an ASP.NET Web page, simply drag and drop the Menu item from the Toolbox onto the ASP.NET page Designer. You can then tweak the appearance of the menu through its properties in the VS.NET Properties pane.

skmMenu provides both a horizontal and vertical layout of the top-level menu items. The screenshot above shows the menu in its horizontal layout. Furthermore, skmMenu allows for a high degree of customization of its appearance. Text or images can be used; different images or styles can be used in response to various client-side events, such as moving the mouse over a menu item. (For an example of using rollover images with skmMenu, check out this example.)

skmMenu, like most menu components, can have its content specified statically via an XML file, or dynamically. The code for assigning an XML data source to skmMenu closely resembles the databinding code used with the data Web controls. Specifically, you set the DataSource property to the XML file that contains the data, and then call theDataBind() method – that’s it, just two lines of code!

Numerous examples of skmMenu in action are available on the datawebcontrols.com/menu Web site; There’s also extensive online documentation. Best of all, the complete source code is available, so you can make any changes or enhancements to the code base as required.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: