I was working on a project. And I stuck into an issue to create multilevel drop-down menus with the help of list tags. So while trying to figure out the solution here what I had done. I am sure this will help you. You can create N number of multilevel menus.
I created a new MVC3 project and named it as “MultilevelMenu”. And I selected an Empty MVC 3 project and “Razor” as view engine.
Next step is we will create a database and let’s name it “MultiLevelMenu”. And create a table called Menus. And I created columns as shown in the picture below. And add some dummy data in it.
In the next step create a “Menus” class under the “Models” folder. And in the class define all the properties as shown below.
In the next step create a “MenuEntities” class and inherit it from the “DBContext” class. And add the following line of code in it.
public DbSet<Menus> Menu { get; set; }
Our next step is to create an HTML Helper class. As our target is to achieve any number of multilevel menus. And this can be achieved through recursive functions. We will create HTML Helper class, so that later stage we can use it anywhere. HTML Helpers are very helpful in MVC projects, if you are not familiar with HTML Helpers you should be. Let’s create an HTML Helper class with the name of “HtmlHelperExtensions”. In the HTML Helper class we will create two static methods. I named them “ParentMenus” and “SubMenus”.
In the first method “ParentMenus”, we are going to pass HTMLHelper parameter and second one is our Menu object. Our target is to create multilevel menus by using list tags of HTML. First we fetch all the records from the database where MainMenuId is Null. This will give us all the first level records. Next we will loop through all these first level menus and get the sub level menus.
Within the “ParentMenus” method we will call the “SubMenus” method. And this method accepts three parameters, one HTMLHelper, Menu Object and MenuId (which is actually Id of First level menu Id). Here we loop through all the sub level menus. To create links we use “ActionLink” method of MVC “LinkExtension” class.
Now I will create an Menu Controller, an empty controller. Add a new method called menus. And it will return the partial view. The reason I am return partial view is that we can later use menu in our application page. Partial view is just like Web User Controls available in Asp.Net. The code written in Menu Controller are as below,
To call a HTMLHelper we need to add namespace in theweb.config file under Views folder. In our case we will add the following namespace of HTMLHelper class. <add namespace=”MultilevelMenu.HtmlHelpers”/>
If you run the application you see the following output.
I attached the complete source code. I used Superfish menus. Superfish script is easy to use. You just need to provide the ordered list and later it will take care. In the output I not spend time on making it more fancy and color. I am sure this will not bother you. As my main objective to share the code. After unzip create a database with name “MultiLevelMenu” and then the script file (Multilevel-DB). Don’t forget to change the connection string in the web.config file. I used Visual Studio 2010 and Asp.Net MVC 3 for this example.
I am sure this example will help for you. Waiting for your feedback.