Click here to Skip to main content
14,270,863 members

Populating Menu Control in ASP.NET 2.0 - Using Different Data Sources

Rate this:
4.15 (40 votes)
Please Sign up or sign in to vote.
4.15 (40 votes)
7 Oct 2005
An article on how to populate the Menu control in ASP.NET 2.0 using different data sources

Introduction

ASP.NET 2.0 is coming at us at a very fast pace. I have to admit that ASP.NET 2.0 is very different from ASP.NET 1.x. From now on, most of the articles that you will see on this site will target ASP.NET 2.0. In this article, I will look into the Menu control. We will look into populating the Menu control using different sources.

What is a Menu Control?

The Menu control is used to display menus. The menu can be displayed vertically or horizontally. Below are two screenshots showing vertical and horizontal menus:

Horizontal Menu

Image 1

Vertical Menu

Image 2

For making a menu change its orientation, you just need to change the Orientation property of the Menu control to Horizontal or Vertical.

Now let's see the different approaches to populate a Menu control.

Populating the Menu using SiteMapDataSource

This is the preferred way of populating the Menu control. SiteMapDataSource allows you to read the information from the .sitemap file which is simply an XML file. Let's take a look at the .sitemap file. As you can see in the file below, all you need to do is to assign the values to the nodes and that's it.

<?xml version="1.0" encoding="utf-8" ?>
<siteMap>
 <siteMapNode url="Default.aspx" title="Home">
   <siteMapNode title="Products" description="Our Products">
      <siteMapNode url="Product1.aspx" title="My Products" 

          description="These are my products" />
      <siteMapNode url="Product2.aspx" title="New Products" 

          description="Some new products " />
   </siteMapNode>
   <siteMapNode title="Services" description="Our Services">
      <siteMapNode url="Service1.aspx" title="ASP.NET Consulting"

          description="Best ASP.NET Consulting" />
      <siteMapNode url="Service2.aspx" title="ASP.NET Training" 

          description="Best ASP.NET Training" />
   </siteMapNode>
 </siteMapNode>
</siteMap>

Now let's see how we build our menu using the .sitemap file above. All we are doing in the GetSiteMapDataSource method is getting the information from the Web.sitemap file and building the menu based on the contents of that file.

private void CreateMenuControl()
{
  Menu1.DataSource = GetSiteMapDataSource();
  Menu1.DataBind();
}

private SiteMapDataSource GetSiteMapDataSource()
{
  XmlSiteMapProvider xmlSiteMap = new XmlSiteMapProvider();
  System.Collections.Specialized.NameValueCollection 
         myCollection = new 
         System.Collections.Specialized.NameValueCollection(1);
  myCollection.Add("siteMapFile", "Web.sitemap");
  xmlSiteMap.Initialize("provider", myCollection);
  xmlSiteMap.BuildSiteMap();
  SiteMapDataSource siteMap = new SiteMapDataSource();
  return siteMap;
}

Populating the Menu using the Database

Suppose that you have some data in the database tables using which you want to populate the Menu. Although I prefer the .sitemap technique since that is its sole purpose, the code below shows how you can use database as a data source.

private void PopulateMenu()
{
  DataSet ds = GetDataSetForMenu();
  Menu menu = new Menu();

  foreach (DataRow parentItem in ds.Tables["Categories"].Rows)
  {
    MenuItem categoryItem = new MenuItem((string)parentItem["CategoryName"]);
    menu.Items.Add(categoryItem);

    foreach (DataRow childItem in parentItem.GetChildRows("Children"))
    {
      MenuItem childrenItem = new MenuItem((string)childItem["ProductName"]);
      categoryItem.ChildItems.Add(childrenItem);
    }
  }

  Panel1.Controls.Add(menu);
  Panel1.DataBind();
}

private DataSet GetDataSetForMenu()
{
  SqlConnection myConnection = new SqlConnection(GetConnectionString());
  SqlDataAdapter adCat = new SqlDataAdapter("SELECT * FROM Categories", myConnection);
  SqlDataAdapter adProd = new SqlDataAdapter("SELECT * FROM Products", myConnection);

  DataSet ds = new DataSet();
  adCat.Fill(ds, "Categories");
  adProd.Fill(ds, "Products");
  ds.Relations.Add("Children", 
     ds.Tables["Categories"].Columns["CategoryID"], 
     ds.Tables["Products"].Columns["CategoryID"]);
  return ds;
}

Let's first look at the GetDataSetForMenu() since its being called from PopulateMenu(). In the GetDataSetForMenu() method, we make a relationship between the Categories table and the Products table.

The PopulateMenu() methods receives the DataSet from the GetDataSetForMenu() and iterates through the DataSet. For each iteration, it creates a new MenuItem and adds it into the menu items collection.

Populating the Menu Control Using an XML File

You can also populate the menu using a simple XML file. Check out the code below:

private void CreateMenuWithXmlFile()
{
  string path = @"C:\MyXmlFile.xml";
  DataSet ds = new DataSet();
  ds.ReadXml(path);
  Menu menu = new Menu();
  menu.MenuItemClick += new MenuEventHandler(menu_MenuItemClick);

  for (int i = 0; i < ds.Tables.Count; i++)
  {
    MenuItem parentItem = new MenuItem((string)ds.Tables[i].TableName);
    menu.Items.Add(parentItem);

    for (int c = 0; c < ds.Tables[i].Columns.Count; c++)
    {
      MenuItem column = new MenuItem((string)ds.Tables[i].Columns[c].ColumnName);
      menu.Items.Add(column);

      for (int r = 0; r < ds.Tables[i].Rows.Count; r++)
      {
        MenuItem row = new MenuItem((string)ds.Tables[i].Rows[r][c].ToString());
        parentItem.ChildItems.Add(row);
      }
    }
  }

  Panel1.Controls.Add(menu);
  Panel1.DataBind();
}

I get the XML from the DataSet ReadXML() method. And after that, it's just a matter of iterating through the DataSet and making MenuItems.

I hope you liked the article. The project file is also attached, please download it and run the application.

License

This article has no explicit license attached to it, but may contain usage terms in the article text or the download files themselves. If in doubt, please contact the author via the discussion board below.

A list of licenses authors might use can be found here.

Share

About the Author

azamsharp
Web Developer
United States United States
My name is Mohammad Azam and I have been developing iOS applications since 2010. I have worked as a lead mobile developer for VALIC, AIG, Schlumberger, Baker Hughes, Blinds.com and The Home Depot. I have also published tons of my own apps to the App Store and even got featured by Apple for my app, Vegetable Tree. I highly recommend that you check out my portfolio. At present I am working as a lead instructor at DigitalCrafts.




I also have a lot of Udemy courses which you can check out at the following link:
Mohammad Azam Udemy Courses

Comments and Discussions

 
QuestionMenu from DataTable Pin
Wisen Technologies27-Jul-13 5:17
groupWisen Technologies27-Jul-13 5:17 
QuestionMouseover Tabs Menu Pin
MS Babu10-May-13 20:25
memberMS Babu10-May-13 20:25 
GeneralMy vote of 2 Pin
behzad200021-Feb-13 20:55
memberbehzad200021-Feb-13 20:55 
Questioncan we use web.sitemap and database records together Pin
mahadev12819-Jan-12 19:49
membermahadev12819-Jan-12 19:49 
Generalhelp Pin
monsterofmonsters12-May-11 0:24
membermonsterofmonsters12-May-11 0:24 
GeneralHow can you make parent selected while navigating child item using Sitemap/ Menu Pin
Abdul Kalam24-Apr-11 0:22
memberAbdul Kalam24-Apr-11 0:22 
Answer10000000 thanks Pin
aicha200817-Nov-09 23:41
memberaicha200817-Nov-09 23:41 
GeneralMy vote of 1 Pin
James Rike17-Oct-09 9:42
memberJames Rike17-Oct-09 9:42 
GeneralXML file Pin
Muhammad Jameel29-Sep-09 1:35
memberMuhammad Jameel29-Sep-09 1:35 
GeneralMy vote of 1 Pin
Muhammad Jameel29-Sep-09 1:17
memberMuhammad Jameel29-Sep-09 1:17 
Generalmenus Pin
mylogics15-Jul-09 0:19
professionalmylogics15-Jul-09 0:19 
Generalmenus Pin
mylogics14-Jul-09 23:40
professionalmylogics14-Jul-09 23:40 
Questionis it working? Pin
woo1235-Jun-09 11:17
memberwoo1235-Jun-09 11:17 
AnswerRe: is it working? Pin
Earl Hyde14-May-10 7:08
memberEarl Hyde14-May-10 7:08 
GeneralASP Staggered Horizontal Menus -- Reduce the width of first submenu item for upper menu. Pin
Jim Slavens27-May-09 12:46
memberJim Slavens27-May-09 12:46 
Questionmenu controll in asp.net with c# Pin
jobitha13-May-09 22:00
memberjobitha13-May-09 22:00 
QuestionMenu Control in ASP.NET using C# and SQL Database only with URL Functionality Pin
urvipin30-Mar-09 1:37
memberurvipin30-Mar-09 1:37 
GeneralNeed Help Urgently.. Pin
Binoy Rajan21-Oct-08 4:44
memberBinoy Rajan21-Oct-08 4:44 
Generalfor the people who comments useless stuff Pin
stormbind15-Oct-08 20:03
memberstormbind15-Oct-08 20:03 
Generalgood work Pin
SujithMysore27-Aug-08 20:07
memberSujithMysore27-Aug-08 20:07 
Questionhow can i create the menu control like microsoft site and the code project site Pin
kanzz22-Jul-08 1:31
memberkanzz22-Jul-08 1:31 
QuestionCan I have multiple sitemap File ? Pin
Tejas Patel3-Nov-07 20:34
memberTejas Patel3-Nov-07 20:34 
GeneralI normally just avoid tutorials that miss the point... Pin
aaava5-Jul-07 14:08
memberaaava5-Jul-07 14:08 
GeneralRe: I normally just avoid tutorials that miss the point... Pin
shadyscience@yahoo.com16-Jul-08 23:40
membershadyscience@yahoo.com16-Jul-08 23:40 
Questionhow to select item Pin
Umer Khan3-Jun-07 20:48
memberUmer Khan3-Jun-07 20:48 

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

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

Article
Posted 7 Oct 2005

Stats

550.9K views
7.1K downloads
110 bookmarked