Click here to Skip to main content
Click here to Skip to main content

MenuApart.Net based on a ListApart

By , 18 Oct 2008
Rate this:
Please Sign up or sign in to vote.

Introduction

Anyone who is interested in HTML design is probably familiar with www.alistapart.com and table-less HTML development.

Based on the philosophy of this site and Jeffrey Zeldman himself, I wanted to develop a list based menu that can be deployed in ASP.NET with the help of a configurable .NET control.
Requirements of the menu should be: easy to deploy, configure, style and maintain and generates light weighted HTML code that works in most mainstream browsers.
Because the menu is based on HTML list items (see Suckerfish Dropdowns in alistapart.com) I called it MenuApart.Net. MenuApart.Net is lightweight, accessible, standards-compliant and cross-browser-compatible.

Background

If you are not familiar with good and clean HTML design, you can take a look at the alistapart.com site or Google on "alistapart". This will give you plenty of information to understand the need of lightweight, standards-compliant, cross-browser-compatible HTML design. 

Using the Code

The code consists of two XML source files which contain the source data for the main and sub menus and 2 repeaters which will generate a list based menu.
The menu itself is an .NET User Control that can be registered in an ASP.NET Master Page or a normal ASP.NET Web page. This depends on how you want to use the menu and if you are using a MasterPage driven Web Application.
The style of the menu is completely controlled with CSS and it is very easy to give it the style you want for your Web application.

The following snippet shows the XML code that is fairly simple and easy to maintain :

<!-- Horizontal Upper Menu -->
<MainMenu>
	<Title>Customers</Title>
	<Command>Customer</Command>
	<Width>93px</Width>
	<ToolTip>Customers</ToolTip>
</MainMenu>
	
<!-- SubMenu -->

<SubMenu>
	<ParentItem>Customers</ParentItem>
	<Title>Create Customer</Title>
	<Command>CustomerCreate</Command>
	<Width>93px</Width>
	<ToolTip>Here you can create customers</ToolTip>
</SubMenu>

A .NET DataSet is filled with the XML data and will be DataBinded to the corresponding repeaters.
It is easy to manipulate the generated MenuApart. For example, you can give a menu item another style with the statement:

Master.MenuApartSetActive = command; 

The command is a string set in the XML DataFile and binded to a LinkButton part of the menu. The command string  can be passed through by session or querystring or directly cached from the MenuApart LinkClick handler. It can be used to control page redirections or to trigger methods or raise events.

With the following code, you can give a certain menu item another style. The style analogue to the command...

Master.MenuApartSetActive

... is set in CSS like this:

.MainNormal
	{
	    color: #fff;
	    background-color: #036;
	}
	.MainActive
	{
	    color: #fff;
	    background-color: #369;
	}
	.SubNormal
	{
		color: #fff;
		background-color: #036;
	}
	
	.SubActive
	{
	    color: #fff;
	    background-color: #369;
		
	}

Properties like the Width, Tooltips, etc. can be set in the XML file. When more properties are needed, you can add a property to the XML file and make it an attribute of
the used LinkButton in the MenuApart control.
The MenuApart controls main event is the MenuApart_LinkClick event. This event will give you the flexibility to do whatever is needed after a menu item is clicked by a user. 

protected void MenuApart1_LinkClick(object sender, MenuApartEventArgs e)
    {
        switch (e.Command)
        {
            case "RoodMitek":
                Response.Redirect("roodmitek.nl?Command=" + e.Command);
                break;
            case "Christian Vos":
                Response.Redirect("christianvos.nl?Command=" + e.Command);
                break;
            default:
                Response.Redirect("default.aspx?Command=" + e.Command);
                break;
        }
    }

Every WebPage can have its own configuration of the MenuApart.Net control. This is possible by giving the MenuApart.Net a different XML source. You can register just a single control in a Master Page and still let every WebPage under this MasterPage have its own different menu. 

//For this page the menu is changed:
string filePath = ConfigurationManager.AppSettings["MenuApartContact_SettingsFile"];
Master.MenuApartSourceFile = filePath;

Points of Interest

Because the .NET Repeater control is so flexible and light weight, you can shape and style the menu just as you want, horizontal, vertical, cascade, etc., but remember that you should never use the <table></table> tags.

History

  • June, 2003 Initial Version 1.0

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Christian Vos
Founder Rood Mitek
Netherlands Netherlands
Christian Vos .MCSD has been an independent Microsoft developer since 1999 and is specialized in distributed Microsoft .Net platform based Web applications. He is founder of the company Rood Mitek which has developed applications for companies like Philips Electronics, ASML, Lucent Technologies, Amoco, AT&T etc.

Comments and Discussions

 
GeneralMenuAdapter Suggested PinmemberMatt Sollars21-Oct-08 5:42 
GeneralUsing Response.Redirect in a PostBack event handler Pinmemberdjhayman19-Oct-08 14:35 
GeneralRe: Using Response.Redirect in a PostBack event handler [modified] PinmemberChristian Vos19-Oct-08 20:24 
GeneralMenuApart PinmemberShyLock18-Oct-08 9:10 
Easy and handy control ! Roll eyes | :rolleyes:

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140421.2 | Last Updated 18 Oct 2008
Article Copyright 2008 by Christian Vos
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid