How to create a menu in ASP.NET using asp:Menu control

Sheonarayan
Posted by in ASP.NET category on for Intermediate level | Points: 250 | Views : 57442 red flag

In this article we shall learn how to generate a menu based on SiteMap file and how to generate Menu from the database.

Introduction

Menu control enables us to create horizontal or vertical menu in ASP.NET.

Get .NET Tips and Tricks videos that contains Tips and Tricks of ASP.NET, ADO.NET, jQuery, HTML, CSS and JavaScript.

Now lets try to learn tips and tricks related with asp:Menu control.

How to generate a menu based on SiteMap file using asp:Menu control?

To automatically generate menu based on the SiteMap file, we can follow this approach.

ASPX PAGE

<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1"

StaticDisplayLevels="2" Orientation="Vertical"

DynamicHorizontalOffset="2"></asp:Menu>

 

<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />

WEB.SITEMAP (SITEMAP FILE)

<?xml version="1.0" encoding="utf-8" ?>

<siteMap>

<siteMapNode url="~/default.aspx" title="Home" description="Go to home page">

<siteMapNode url="~/tutorials/default.aspx" title="Tutorials" description=".NET Tutorials">


<siteMapNode url="~/tutorials/controls/sitemapdatasource.aspx"

title="SiteMapDataSource Control" description="SiteMapDataSource Control tutorials" />

</siteMapNode>

<siteMapNode url="~/articles/default.aspx" title="Articles" description="Articles Home">


<siteMapNode url="~/articles/asp.net/default.aspx" title="ASP.NET"

descritption="ASP.NET Articles" />

<siteMapNode url="~/articles/csharp/default.aspx" title="CSharp" descritption="CSharp Articles" />

<siteMapNode url="~/articles/SharePoint/default.aspx" title="SharePoint" descritption="SharePoint Articles" />


</siteMapNode>


</siteMapNode>

</siteMap>

In the above code snippet, on the .aspx page we have an asp:Menu control whose DataSourceID is the
asp:SiteMapDataSource control. asp:SiteMapDataSource control is a control that automatically detects
the Web.sitemap file (a file that by convention should have all hierarchical urls of the web site) from the
root of the application and provide it as the data source to other controls.

Notice that we have set StaticDisplayLevels to 2 for the asp:Menu controls so that the menu will be generated from the 2nd hierarchy of the web.sitemap file.

OUTPUT

 


How to generate Menu from the database using asp:Menu control?

To automatically generate horizontal or vertical menu from the database, we can follow this approach.

ASPX PAGE

<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" />

DATABASE STRUCTURE

(Explanations given below)

CODE BEHIND

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

GetMenuData();

}

}


private void GetMenuData()

{

DataTable table = new DataTable();

// get the connection

using (SqlConnection conn = new SqlConnection(_connStr))

{

// write the sql statement to execute

string sql = "SELECT MenuId, MenuName, MenuDescription, ParentMenuId, MenuUrl

FROM Menus";

 

// instantiate the command object to fire

using (SqlCommand cmd = new SqlCommand(sql, conn))

{

// get the adapter object and attach the command object to it

using (SqlDataAdapter ad = new SqlDataAdapter(cmd))

{

// fire Fill method to fetch the data and fill into DataTable

ad.Fill(table);

}

}

}

 

// populate the parent node first

DataView view = new DataView(table);

view.RowFilter = "ParentMenuId is NULL";

foreach (DataRowView row in view)

{

MenuItem menuItem = new MenuItem(row["MenuName"].ToString(),

row["MenuId"].ToString());

menuItem.NavigateUrl = row["MenuUrl"].ToString();

Menu1.Items.Add(menuItem);

AddChildItems(table, menuItem);

}

}


private static void AddChildItems(DataTable table, MenuItem menuItem)

{

DataView viewItem = new DataView(table);

viewItem.RowFilter = "ParentMenuId = " + menuItem.Value;

foreach (DataRowView childView in viewItem)

{

 

MenuItem childItem = new MenuItem(childView["MenuName"].ToString(),

childView["MenuId"].ToString());

childItem.NavigateUrl = childView["MenuUrl"].ToString();

menuItem.ChildItems.Add(childItem);

 

AddChildItems(table, childItem);

}

}

 

In the above code snippet, we have an asp:Menu control on the .aspx page with Orientation as “Horizontal”. In case we want a vertical menu, we need to set Orientation as "Vertical".

In the code behind, first we have retrieved the menu items from the database (look at my database table structure above). The record with ParentMenuId as “NULL” will be the parent item of the menu and rest will be the child (It is very important that you organize the records in such a way that it forms a hierarchical menu items). Once we have the records into the DataTable, we can filter it based on the ParentMenuID to “NULL” to get the parent node and add the menu Item to the Menu then we have called AddChildItems method to fetch the child items of that menu from the DataTable and added into the Menu (AddChildITems is the recursive function to make sure that it goes deep into several herarchy of the items and sub items).

OUTPUT


Hope this was useful. Thanks for reading. Stay tuned to learn asp.net in tips and tricks way.

Do let me know your comment for feedback.

Page copy protected against web site content infringement by Copyscape

About the Author

Sheonarayan
Full Name: Sheo Narayan
Member Level: HonoraryPlatinum
Member Status: Administrator
Member Since: 7/8/2008 6:32:14 PM
Country: India
Regards, Sheo Narayan http://www.dotnetfunda.com
http://www.snarayan.com
Ex-Microsoft MVP, Author, Writer, Mentor & architecting applications since year 2001. Connect me on http://www.facebook.com/sheo.narayan | https://twitter.com/sheonarayan | http://www.linkedin.com/in/sheonarayan

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)