Post
Ask Question

Creating Single Level Horizontal Menu Dynamically in ASP.NET

This is Part 3 of the series "Creating Menus". This article will explain how to create a single level menu dynamically using C# in ASP.NET. You can read the other 2 articles in this series from the following links:

In this article 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 as in the following. In real scenarios, the table structure may be more complex than specified below.

table structure

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

Now for 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 following code in our page (.master or .aspx or .ascx file wherever you want to place the menu). 

  1. <asp:Repeater ID="rptCategories" runat="server">  
  2.   
  3.     <HeaderTemplate>  
  4.   
  5.         <div class="menu">  
  6.   
  7.             <ul></ul>  
  8.   
  9.         </div>  
  10.   
  11.     </HeaderTemplate>  
  12.   
  13.     <ItemTemplate>  
  14.   
  15.         <li>  
  16.             <a href='#'>  
  17.                 < %#Eval( "CategoryName") %>  
  18.             </a>  
  19.         </li>  
  20.   
  21.     </ItemTemplate>  
  22.   
  23.     <FooterTemplate>  
  24.   
  25.     </FooterTemplate>  
  26.   
  27. </asp:Repeater>  

If you notice the code above, we are just trying to build the <ul> and <li> tags using the Repeater control. The <ul> and </ul> tags go inside the HeaderTemplate and FooterTemplate respectively and the <li> tag goes inside the ItemTemplate tag since 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 following code.

  1. protected void Page_Load(object sender, EventArgs e)  
  2.   
  3. {  
  4.   
  5.     if (!IsPostBack)  
  6.   
  7.     {  
  8.   
  9.         LoadCategories();  
  10.   
  11.     }  
  12.   
  13. }  
  14.   
  15. private void LoadCategories()  
  16.   
  17. {  
  18.   
  19.     rptCategories.DataSource = GetCategories();  
  20.   
  21.     rptCategories.DataBind();  
  22.   
  23. }  
  24.   
  25. private DataTable GetCategories()  
  26.   
  27. {  
  28.   
  29.     SqlConnection connection = new SqlConnection("Data Source=NITESH;Initial Catalog=TestDB;Integrated Security=SSPI;"  
  30.         providerName = "System.Data.SqlClient");  
  31.   
  32.     SqlCommand selectCommand = new SqlCommand("SELECT ID,CategoryName FROM Categories", connection);  
  33.   
  34.     DataTable dt = new DataTable();  
  35.   
  36.     try  
  37.   
  38.     {  
  39.   
  40.         connection.Open();  
  41.   
  42.         SqlDataReader reader = selectCommand.ExecuteReader();  
  43.   
  44.         if (reader.HasRows)  
  45.   
  46.         {  
  47.   
  48.             dt.Load(reader);  
  49.   
  50.         }  
  51.   
  52.         reader.Close();  
  53.     } catch (SqlException)  
  54.   
  55.     {  
  56.   
  57.         throw;  
  58.   
  59.     } finally  
  60.   
  61.     {  
  62.   
  63.         connection.Close();  
  64.   
  65.     }  
  66.   
  67.     return dt;  
  68.   
  69.   
  70. }  

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, the 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 the database. The only thing that remains is adding CSS for the menu. You can use the following CSS for this simple menu and add it to your CSS file.

  1. .menu  
  2.   
  3. {  
  4.   
  5.     width: 500 px;  
  6.   
  7.     margin: 0 px auto;  
  8.   
  9.     : Arial,  
  10.     Helvetica,  
  11.     sans - serif;  
  12.   
  13.     : bold;  
  14.   
  15.     : 14 px;  
  16.   
  17. }  
  18.   
  19. .menu ul li a: link, div ul li a: visited  
  20.   
  21. {  
  22.   
  23.     display: block;  
  24.   
  25.     background - color: #f1f1f1;  
  26.   
  27.     color: #000;  
  28.   
  29.     text-align: center;  
  30.   
  31.     text-decoration: none;  
  32.   
  33.     padding: 4px;  
  34.   
  35.     border-bottom: 1px solid # fff;  
  36.   
  37.     width: 150 px;  
  38.   
  39. }  
  40.   
  41. .menu ul li a: hover  
  42.   
  43. {  
  44.   
  45.     background - color: #ccc;  
  46.   
  47. }  
  48.   
  49. .menu ul  
  50.   
  51. {  
  52.   
  53.     list - style - type: none;  
  54.   
  55.     margin: 0 px;  
  56.   
  57.     padding: 0 px;  
  58.   
  59. }  
  60.   
  61. .menu ul li  
  62.   
  63. {  
  64.   
  65.     float: left;  
  66.   
  67.     margin - left: 5 px;  
  68.   
  69. }  

You can see the output below.

output

I hope you like this article! Keep learning and sharing folks.


Similar Articles
Rebin Infotech
Think. Innovate. Grow.