Tuesday, May 8, 2007

ASP.NET 2.0: Using the Menu Control

ASP.NET 2.0: Using the Menu Control: "ASP.NET 2.0 : Using the Menu Control "
Here we will take a look at two different ways to set up the Menu Control. One, with the default SiteMap provider using a standard Xml web.siteMap file, and the other using a SqlSiteMapProvider, an example of which was recently published by Jeff Prosise in his "Wicked Code" column in MSDN magazine.
To start off, lets create a new MasterPage to hold our menus, which provides us with a ContentPlaceHolder control that all pages deriving from our MasterPage place their content into. First the HTML code, then some notes:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Default.master.cs" Inherits="_Default" %>








Orientation="Horizontal" CssClass="toolbar" Width="96px">





















What I have above is a Master Page declaration, an inline CSS stylesheet we will use for our menus, two asp:Menu tags and two asp:SiteMapDataSource tags. You can get all of this by simple right-clicking your Web Site in Solution Explorer, and choosing Add New Item, then MasterPage from the Installed Templates window. You can get the menu and SiteMapDataSource controls by simply dragging them onto your new Master Page from the Toolbox.
Each Menu Control needs a SiteMapDataSource. If none is specified, the default XmlSiteMapProvider is used, and it requires a "web.siteMap" xml file which you can create by choosing Add New Item and "sitemap". The web.siteMap file structure is a nested Nodelist that looks like this:
description="Home"
url="SiteMaps.aspx?id=1">
url="SiteMaps.aspx?id=2">



description="The Research Site"
url="SiteMaps.aspx?id=7">
url="SiteMaps.aspx?id=8"/>
url="SiteMaps.aspx?id=9"/>
url="SiteMaps.aspx?id=10" />



You can see that we have a "Home" siteMapNode, and that we can nest additional siteMapNodes to get the familiar tree-like dropdown menu effect. Each node has a title, description, and url. There are other members and properties, you can get the whole story at the documentation.
Since we have more than one SiteMapDataSource, we define the providers in our web.config file like so:



providerName="System.Data.SqlClient" />




securityTrimmingEnabled="false"
connectionStringName="SiteMapConnectionString" />



Note above that we have a connection string defined specifically for our SqlSiteMapProvider, and that it is specifically referenced in the defaultProvider siteMap element. I've also added back in the XmlSiteMapProvider since it is no longer the default, and have provided the required siteMapFile="web.SiteMap" attribute for it.
In my SiteMap database table, I've defined my nodes in the familar parent - child self-referencing table format:
You can see that the Provider will simply read this out into a SqlDataReader, and create the SiteMapNodes. You can look at Prosise's code for the SqlSiteMapProvider included, and see that it is very easy to create one. This datasource is assigned to one of my menus with the DataSourceID attribute of the asp:Menu tag declaration. The rest is just choosing some of the long list of properties that can be set via the Property Sheet for the control. In this case, I've decided to add a cool 3-D like gradient by simply setting the CSSClass attribute to my "toolbar" CSS class defined in the inline stylesheet. The result, when any of the pages comes up, looks like this:
I didn't spend as much time on this as I normally would, so a lot of the kind of fine-tuning one would expect for a production app is not present. However, the downloadable zip file below includes everything you need to get started, including a SQL Script that will create the "TEST" database and SiteMap table, and populate it with what you see above. Just unzip it to the folder of your choice, run the Sql Script, and in Visual Studio.NET 2005, choose File / Open / Web Site / FileSystem and point it to your folder. The "Cassini-Meanie" built in web server will take it from there. Note that I do not have Roles Authorization enabled for this particular example, but it is extremely easy to "turn on" and integrates beautifully with Forms Authentication and similar authentication schemes.
Have fun!


www.svdeals.com super value deals

No comments: