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. 

  1. Add a class to the project. Give a significant name. I am giving name MenuExtension
  2. Convert this class to a static class.
  3. This class contains two methods.  
    1. Extension method Menu.
      1. This is extension method to call HtmlHelper.
        This is taking two parameters as input.
      2. First parameter is class name for which this method is extension method. (Please see my article on Extension Method for complete detail)
      3. Second parameter is items of type Object.


public

static
string Menu(this
HtmlHelper helper, Object items)

{


return
“<menu>” + MenuExtension.GetItems(items) + “</menu>”;

}

 

  1. Static method GetItems
    1. This is a static method to the class.
    2. This is taking one input parameter
    3. This is returning a list
    4. This is building the list by encoding the items into a list of anchor tag.

       


public
static
string GetItems(Object items)

{


if (items == null)

{


throw
new
ArgumentNullException(“items”);

}


if (items is
IEnumerable == false)

{


throw
new
InvalidCastException(“Item must be IEnumerable”);

}


var menuItems = (IEnumerable)items;


var builder = new
StringBuilder();


foreach (Object o in menuItems)

{

builder.AppendFormat(“<li><a href=#>{0}</a></li>”, HttpUtility.HtmlEncode(o.ToString()));

}


return builder.ToString();

}

 

 

So, the entire class will look like below listing.

 

MenuExtension.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using System.Collections;

using System.Text;

namespace CustomMenu

{


public
static
class
MenuExtension

{


public
static
string Menu(this
HtmlHelper helper, Object items)

{


return
“<menu>” + MenuExtension.GetItems(items) + “</menu>”;

}


public
static
string GetItems(Object items)

{


if (items == null)

{


throw
new
ArgumentNullException(“items”);

}


if (items is
IEnumerable == false)

{


throw
new
InvalidCastException(“Item must be IEnumerable”);

}


var menuItems = (IEnumerable)items;


var builder = new
StringBuilder();


foreach (Object o in menuItems)

{

builder.AppendFormat(“<li><a href=#>{0}</a></li>”, HttpUtility.HtmlEncode(o.ToString()));

}


return builder.ToString();

}

}

}

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.

public
ActionResult Menu()

{


List<String> list = new
List<String>();

list.Add(“File”);

list.Add(“Edit”);

list.Add(“Save”);

list.Add(“Save As”);

list.Add(“Exit”);


return View(list);

}

Step 4

Create the View

 

  1. Right click on Edit action and select Add view
  2. Leave the default setting


  3. Now in Menu.aspx , import namespace of Extension Method

     


 

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

     


  2. Now add following code in

    Menu.aspx

     

<%@
Page
Title=””
Language=”C#”
MasterPageFile=”~/Views/Shared/Site.Master”
Inherits=”System.Web.Mvc.ViewPage”
%>

<%@
Import
Namespace=”CustomMenu”
%>

<asp:Content
ID=”Content1″
ContentPlaceHolderID=”TitleContent”
runat=”server”>

    Menu

</asp:Content>

<asp:Content
ID=”Content2″
ContentPlaceHolderID=”MainContent”
runat=”server”>


<h2>Menu</h2>


<%= Html.Menu(ViewData.Model) %>

</asp:Content>

Step 5

Adding link at the main page for file uploading

 

  1. Open site.master in Views->Shared Folder
  2. Add below line in menu tag

     


 

  1. So, the Menu element will look like

     


<div
id=”menucontainer”>


<ul
id=”menu”>


<li><%= Html.ActionLink(“Home”, “Index”, “Home”)%></li>


<li><%= Html.ActionLink(“Menu”, “Menu”, “Home”)%></li>


<li><%= Html.ActionLink(“About”, “About”, “Home”)%></li>


</ul>


</div>


</div>

Step 6

Press F5 to run the application


Happy Coding


Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s