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

How to Create Single Level Menu Dynamically Using C# in ASP.NET

, 29 Apr 2014
Rate this:
Please Sign up or sign in to vote.
How to create single level menu dynamically using C# in ASP.NET

Introduction

This is Part 3 of the series “Creating Menus”. This post will explain how to create a single level menu dynamically using C# in ASP.NET. You can read the other 2 posts in this series with the links mentioned below:

In this post, we will create a dynamic single-level menu using C# in ASP.NET where the menu names are stored in the database. To begin with, let's consider we have a database named “TestDB” with a table named “Categories“. To keep things simple, we consider the table structure something like below. In real scenarios, the table structure may be more complex than mentioned below.

dynamic-menu-single-level-1

Once the table structure is defined, we fill it with some dummy data as below.

dynamic-menu-single-level-2

Now, the coding part. In our application, normally we will create menus in the master page. We will use the Repeater Control of ASP.NET to build our dynamic menu. We write the below code in our page (.master or .aspx or .ascx file wherever you want to place the menu).

<asp:repeater ID="rptCategories" runat="server">
     <headertemplate>
        <div class="menu"><ul>
     </ul></div></headertemplate>
     <itemtemplate>
          <li><a href='#'>< %#Eval("CategoryName") %></a></li>
     </itemtemplate>
     <footertemplate>
         
     </footertemplate>
</asp:repeater>

If you notice the code above, we are just trying to build the <ul> and <li> tags using the Repeater control. <ul> and </ul> tag goes inside the HeaderTemplate and FooterTemplate respectively and <li> tag goes inside the ItemTemplate tag as we will be repeating the menu items from the database.

In the code file (.master.cs/.aspx.cs/.acsx.cs), we will make a call to our database to get all the categories and bind the data to the repeater control. For doing this, we will write the below code:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        LoadCategories();
    }
}
private void LoadCategories()
{
    rptCategories.DataSource = GetCategories();
    rptCategories.DataBind();
}
private void GetCategories()
{
SqlConnection connection = new SqlConnection("Data Source=NITESH;
Initial Catalog=TestDB;Integrated Security=SSPI;" providerName="System.Data.SqlClient");
SqlCommand selectCommand = new SqlCommand("SELECT ID,CategoryName FROM Categories", connection);
DataTable dt = new DataTable();
try
{
    connection.Open();
    SqlDataReader reader = selectCommand.ExecuteReader();
    if (reader.HasRows)
    {
        dt.Load(reader);
    }
    reader.Close();
}
catch (SqlException)
{
    throw;
}
finally
{
    connection.Close();
}
}

In the code above, the first thing we do is to get all categories in a DataTable and then bind the DataTable to the Repeater Control. At runtime, Repeater control will render all the rows of the DataTable wrapped with <li> and </li> tags and the complete data wrapped with <ul> and </ul> tags. Once you do this, you’re done creating a menu dynamically from database. The only thing that remains is adding CSS for the menu. You can use the below CSS for this simple menu and add it to your CSS file.

.menu{
    width: 500px;
    margin: 0px auto;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 14px;
}
.menu ul li a:link, div ul li a:visited {
    display: block;
    background-color: #f1f1f1;color:#000;
    text-align: center;
    text-decoration: none;
    padding: 4px;
    border-bottom: 1px solid #fff;
    width: 150px;        
}
.menu ul li a:hover{
    background-color: #ccc;
}
.menu ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;   
}
.menu ul li {
    float: left;
    margin-left: 5px;
}

You can see the output below:

dynamic-menu-single-level-3

Hope you like this post! Keep learning and sharing folks!

License

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

About the Author

Nitesh Luharuka
Team Leader Independent IT Professional, Consultant
India India
An Independent IT Professional and Consultant on MS Technologies like .Net | MVC | Silverlight | Sharepoint | MS Project Server along with open source CMS Systems like DotNetNuke etc.
 
I am an enthusiastic technocrat who love to debug problems and solve them. I love writing articles on my website in my spare time. Please visit my Website for more details and subscribe to get technology related tips/tricks.
Follow on   Twitter   LinkedIn

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web02 | 2.8.140721.1 | Last Updated 30 Apr 2014
Article Copyright 2014 by Nitesh Luharuka
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid