Advanced C# – Create an HTML helper method for website with MVC framework

The idea behind this concept is to create extensions for the HtmlHelper class and thus generate shared components in our project.

Create extension

To create the extension to the HtmlHelper class we need to create an Extension Method (can search my blog post about it). This method will be responsible for creating the HTML component to be displayed on our website. For this example I will show you how to make an HTML component that generates a filter for a list. This filter is nothing more than an alphabet, each letter has a link that will filter on a list. Let’s see how should be our Extension Method.

 public static class Paginator
 {
 public static MvcHtmlString PageLink(this HtmlHelper html, List<char> col, Func<char, string> GetURL)
 {
 StringBuilder result = new StringBuilder();
 TagBuilder tag = new TagBuilder("a");
 tag.MergeAttribute("href", GetURL('*'));
 tag.InnerHtml = "ALL";
 result.Append(tag.ToString());
 result.Append(" | ");
 foreach (var letter in col)
 {
 tag = new TagBuilder("a");
 tag.MergeAttribute("href", GetURL(letter));
 tag.InnerHtml = letter.ToString().ToUpper();
 result.Append(tag.ToString());
 result.Append(" | ");
 }

 return MvcHtmlString.Create(result.ToString());
 }
 }

As we can see the method must be static like the class that contains it. The return value of our method is the type MvcHtmlString which is an HTML-encoded string. Our method receives as parameters (a condition for Extension Method) a HtmlHelper, this is the class our method will extend. The second parameter as already mentioned above is the list of characters we want to show our HTML component and finally as the third parameter will receive Func that will be used to select from our list and generate the Link component. What we will do in this method is very simple, we will generate using a plain HTML using a string.  For this we are going to use the class TagBuilder, this will generate the required tags. For our particular case we are going to generate an <a> tag but remember that you can create the component that you need. Once we complete the plain HTML that we want we will call the static method Create in the class MvcHtmlString to generate the return value.

<system .web.webpages.razor="">
<host factorytype="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
<pages pagebasetype="System.Web.Mvc.WebViewPage">
<namespaces>
<add namespace="System.Web.Mvc" />
<add namespace="System.Web.Mvc.Ajax" />
<add namespace="System.Web.Mvc.Html" />
<add namespace="System.Web.Routing" />
<add namespace="WebUI.HtmlHelpers" />
</namespaces>
</pages>
</host>
</system>

Now we have to let Razor know about our component. In order to do that we need include into the Web.config the namespace of our Extension Method to make it accessible.

Using our new method

No we have out method available so is just a matter of include it in our view as I did in the following example.

@{
var collection = new List<char> { 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o','p','q','r','s','t',
'u','v','w','x','y','z'};
@Html.PageLink(collection, x => Url.Action("Index", new { start = x }))
}

As you can see we extended the HtmlHelper class so we just need to call @Html class to use our new method. The Func parameter is a Lambda Expression to select in our collection and generate the ActionLink component.

This is the easiest way to generate a common component in our web sites is using HtmlHelper. This is a powerful tool and you can use it to create more complex components.

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