Custom HTML Extensions for MVC3

• Download source - 2.01 MB

Introduction

In this article, I am going to share my experience in creating HTML extensions for ASP.NET MVC3 Razor. At the end of the article, you will learn something new on how to create custom extension methods and its advantages. 

This is part one of two that I want to share with you.

Background 

This article is meant for an intermediate / experienced programmer who has some experience in developing applications in MVC3 Razor/ASPX.

There are two ways of creating HTML extensions:

1. With Extension Methods
2. Creating a cshtml file with all the logic. Either we can code with @helper or Razor and/or HTML. Then pre-compile it to generate a DLL.

With Extension Methods

These extensions are written from scratch extensively using code. Here’s a sample example of how you can create an HTML extension which outputs a Video tag for HTML5. You have to create a Class Library project. Create a static class say ViedoExtension and copy the below mentioned code.

If your browser supports HTML5, then you should be able to see a video tag, else you will see a message ‘Your browser doesn't support video tags'.

public static class VideoExtension
{
    public static MvcHtmlString Video
	(this HtmlHelper html, string src, bool showControls)
    {
        string url = UrlHelper.GenerateContentUrl(src, html.ViewContext.HttpContext);
        var tag = new TagBuilder("video") 
          {InnerHtml = "Your browser doesn't support video tags."};

        tag.MergeAttribute("src", url);
        if(showControls)
        // Show Play/Pause buttons
            tag.MergeAttribute("controls", "controls"); 
        return MvcHtmlString.Create(tag.ToString());
    }
}

With helper method 

Your cshtml either can have @helper or just a code with Razor syntax. Create a Class Library project and a new Razor cshtml file. Copy paste the below mentioned snippet for generating the list with <li>.

@helper WriteList(string[] items) 
{
     @foreach (var s in items)<ul>{
            <li> 
               @s  
            </li> 
}      </ul>}   

There is no way to reuse this cshtml unless you pre-compile this code to generate a DLL. We will next see how to re-compile the above one.

1. Go to the VS Extension Gallery, it is under Tools in VS. Then install the Razor Single File Generator.

   

2. Under the cshtml file -> Properties, set the Build Action to Content, and set the custom tool to MVCRazorClassGenerator.
3. Compile the Class Library so that you will now see the *.cs file for the corresponding cshtml file under the cshtml file.
4. Do some minor tweaks. Say renaming the class name of the *.cs file or extracting the core logic to a method.

@{
    ViewBag.Title = "Sample code to demonstrate the usage of Custom Controls";
    var obj = new WriteToList();
    var str = new string[2]
                       {
                           "Test",
                            "Ranjan"
                       };
} 
@using (Html.BeginForm())
{            
   @obj.WriteList(str)         
}

Points of interest

It’s very interesting and fun to create an HTML extension method. I feel the second approach is really faster than the first one as we are more comfortable in writing cshtml. Wait for part two that I will be sharing with you soon.

Advantages  

Custom code in a library project makes it easy to produce a binary that can be used in multiple projects without having to keep the source files around.