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:

• Part 1
• Part 2

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.

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

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:

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