Adding Custom Menu in Html Helper class using Extension Method in ASP.Net MVC

Objective:

This article will show how to add new functionality in HtmlHelper class using Extension method. This will give step by step explanation of, how to create or add MENU functionality n Html helper class and then use that in view of ASP.Net MVC application.

Step 1:

Create an ASP.Net MVC application.
 
File->New->Project->web->ASP.Net MVC Application



Step 2:

Create Extension method for Html Helper class.

• Add a class to the project. Give a significant name. I am giving name MenuExtension
• Convert this class to a static class.
• This class contains two methods.

1. Extension method Menu.
    
   • This is extension method to call HtmlHelper.
   • This is taking two parameters as input.
   • First parameter is class name for which this method is extension method.
     (Please see my article on Extension Method for complete detail).
     
     
    
2. Static method GetItems
    
   • This is a static method to the class.
   • This is taking one input parameter
   • This is returning a list
   • This is building the list by encoding the items into a list of anchor tag.
     
     
   
   So, the entire class will look like below listing.
   
   MenuExtension.cs
   
   
   
   Step 3:
   
   Create the Controller's Action
   
   It is a very simple action. It is just creating list of strings and passing that to View. This action is inside controller Home.
   
   
   
   Step 4:
   
   Create the View
    
   • Right click on Edit action and select Add view
   • Leave the default setting 
     
     
      
   • Now in Menu.aspx , import namespace of Extension Method 
     
     
      
   • Now , we could see with Html class , .Net intellisense is able to sense the extension method 
     
     
      
   • Now add following code in Menu.aspx
     
     
   
   Step 5:
   
   Adding link at the main page for file uploading
    
   • Open site.master in Views->Shared Folder
   • Add below line in menu tag 
     
     
      
   • So, the Menu element will look like
     
     

   Step 6:
   
   Press F5 to run the application