Home  »  Articles  »  ASP.Net  »

How To Add MenuItems Dynamically in ASP.Net

 Posted By : Manoranjan SahooPosted Date : 10/11/2010 10:50:10 AM Category : ASP.Net Points : 5 (Rs 2.00)

Sometimes we need to generate menu items based on some conditions. At that time we can not put the menu items at the time of creation. we have to add the menu items based on the condition. There are various options are available. But i use this simple technique. Here I am explaining how to create dynamic menu items with this example.

To make it workable follow the below steps :

Step 1 :

Open Visual Studio.Net and create a new website. After that go to the Default.aspx page and open it with designer mode.

Step 2 :

Now Add one dropdownlist(make dropdownlist’s AutoPostBack option to True) and one asp.net menu control. (Here i am using the dropdownlist to choose which menu i want to create.Based on the selection of dropdownlist i create the menu items and add them to asp.net menu control.)

Code :

<asp:DropDownList ID="DropDownList1" runat="server" Width="217px" AutoPostBack ="true"  OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
<asp:ListItem>Menu1</asp:ListItem>
<asp:ListItem>Menu2</asp:ListItem>
<asp:ListItem>Menu3</asp:ListItem>
</asp:DropDownList>
<asp:Menu ID="Menu1" runat="server" BackColor="#B5C7DE" DynamicHorizontalOffset="2"
Font-Names="Arial" Font-Size="Medium" ForeColor="#284E98" Orientation="Horizontal"
StaticSubMenuIndent="10px" Style="z-index: 100; left: 15px; position: absolute;
top: 115px" Width="100px" Font-Bold="True" TabIndex="3" BorderStyle="None">

<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<DynamicHoverStyle BackColor="#284E98" ForeColor="White" />
<DynamicMenuStyle BackColor="#B5C7DE" />
<StaticSelectedStyle BackColor="#507CD1" />
<DynamicSelectedStyle BackColor="#507CD1" />
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<Items>
 
</Items>
</asp:Menu>

Step 3 :

Add some items into dropdownlist.  Here i added 3 items into the dropdownlist.

Step 4 :

Now add dropdownlist’s SelectedIndexChanged events. To add the event just open the designer mode and doubleclick on the dropdownlist.

Step 5 :

Now add the below code into the  SelectedIndexChanged method.

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
Menu1.Items.Clear();
if (DropDownList1.SelectedIndex == 0)
{
Menu1.Items.Add(new MenuItem("Menu1","1"));
Menu1.Items[0].ChildItems.Add(new MenuItem ("Menu1_1","1_1"));
Menu1.Items[0].ChildItems.Add(new MenuItem ("Menu1_2","1_2"));
Menu1.Items[0].ChildItems[1].ChildItems.Add(new MenuItem("Menu1_2_1", "1_2_1"));
 
}
else if (DropDownList1.SelectedIndex == 1)
{
Menu1.Items.Add(new MenuItem("Menu2"));
Menu1.Items[0].ChildItems.Add(new MenuItem("Google", "2_1","","http://google.com"));
 
}
else if (DropDownList1.SelectedIndex == 2)
{
Menu1.Items.Add(new MenuItem("Menu2"));
Menu1.Items[0].ChildItems.Add(new MenuItem("Menu2_1", "2_1"));
Menu1.Items.Add(new MenuItem("Menu3"));
Menu1.Items[1].ChildItems.Add(new MenuItem("Menu3_1", "3_1"));
}
}

Step 6 :

Now Run the code and check the output.

Download dynamic_menu Source Code

Responses
No responses found for this thread. Be the first to respond this thread.
Post Reply
Login to post Response.