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

1.gif

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.gif
     
  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.

      3.gif

    So, the entire class will look like below listing.

    MenuExtension.cs

    4.gif

    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.

    5.gif

    Step 4:

    Create the View
     
    • Right click on Edit action and select Add view
    • Leave the default setting 

      6.gif
       
    • Now in Menu.aspx , import namespace of Extension Method 

      7.gif
       
    • Now , we could see with Html class , .Net intellisense is able to sense the extension method 

      8.gif
       
    • Now add following code in Menu.aspx

      9.gif

    Step 5:

    Adding link at the main page for file uploading
     
    • Open site.master in Views->Shared Folder
    • Add below line in menu tag 

      10.gif
       
    • So, the Menu element will look like

      11.gif

    Step 6:

    Press F5 to run the application

    12.gif