Infragistics JQuery controls

ASP.NET MVC Basics: How to create a HtmlHelper

 ASP.NET MVC Basics: How to create a HtmlHelper

Hello! And welcome to another tutorial on refactorthis.net.  This is the first tutorial in a series on ASP.NET MVC development.  This first installment will cover how to create an HtmlHelper.  

What is ASP.NET MVC?

I apologize if I'm stating the obvious, however, this is a tutorial on the basics so I'm approaching the tutorial with the assumption that the reader has no knowledge of ASP.NET, MVC, or ASP.NET MVC.  I'm sure you noticed that I made three references to the technology.  That's because ASP.NET MVC is more than one technology.  First we have ASP.NET, which is a server side web development technology created by Microsoft that utilizes the .NET framework.  Simply put, ASP.NET allows you to write dynamic web pages in .NET language of your choice (C#, VB.NET, etc..).  ASP.NET is an open source technology and it can be developed using the .NET framework or the Mono runtime.  You can find all sorts of wonderful information at http://www.asp.net/ .

ASP.NET comes in two "flavors".  ASP.NET WebForms which is the original flavor, and ASP.NET MVC.  ASP.NET MVC is made up of two concepts.  First and foremost there is the MVC design pattern.  The MVC or Model-View-Controller design pattern was introduced by Trygve Reenskaug in the 1970's.  The design pattern has also be explained by Martin Fowler in his wonderful book on design patterns called Patterns of Enterprise Application Architecture .

The idea behind the MVC pattern is that you have data that you wish to display (Model), you have a presentation layer in which you wish to display your Model (View), and you have a class that handles the interaction between the View and the Model (controller).  The MVC design pattern is an excellent example of a design with proper separation of concerns.  Applications that implement the MVC design pattern are generally loosely coupled, and easy to test (unit testing).  In ASP.NET MVC, the View is a web page, the model can be any class that holds data that you want to display in the View, and a controller class.

Now that I've explained ASP.NET and MVC, I'll now explain ASP.NET MVC.  You see, not only is ASP.NET MVC an implementation of the Model-View-Controller design pattern, it's also a framework built by Microsoft to support the implementation of the MVC design pattern.  You will see as you begin working with MVC that the framework is a large part of what makes ASP.NET MVC what it is.  You could implement ASP.NET MVC without the framwork, however, I don't recommend it.  The framework will create controller's for you, create Views that are bound to a strongly typed model of your choice, and much more.  Using the ASP.NET MVC framework, you can create a basic CRUD web application in a very short amount of time.

I hope that this gives you a nice overview of the ASP.NET MVC framework and design pattern.

HtmlHelper: What they are and how to create them

I'll explain HtmlHelpers by taking you through implementing one..  We'll start by firing up Visual Studio and create a new ASP.NET MVC 4 project (note: I'm using VS 2012, however, if you have an earlier version installed, simply choose whichever ASP.NET MVC version that you have available to you.  If you don't have any ASP.NET MVC templates, you can use the Web platform installer to install ASP.NET MVC on your system.

 

 

 

The next dialog allows you to choose which type of ASP.NET MVC application that you'd like to create.  We will pick an Internet Application, with the Razor View engine and a unit testing project as shown below.

 

 

Now click OK and your project will be created for you.  The ASP.NET MVC Framework will create a lot of boiler plate code behind the scenes.  This includes "Forms based Authentication" in the web.config file as well as an AccountController which is a controller to handle authentication to the site.  There is also a default controller called HomeController.

We are going to create an html helper that creates an HTML table.  This is merely an example and is not particularly useful, however, it will show you how to create and use an HTML Helper.  An HTML helper is nothing more than an extension method which returns a string of HTML.  Here is the official definition of an extension method from MSDN:

Extension methods enable you to "add" methods to existing types without creating a new derived type, recompiling, or otherwise modifying the original type. Extension methods are a special kind of static method, but they are called as if they were instance methods on the extended type. For client code written in C# and Visual Basic, there is no apparent difference between calling an extension method and the methods that are actually defined in a type.

Creating the HtmlHelper 

Create a folder called "Helpers" in your solution.  In the folder, create a static class called TableExtensions.cs .  The class will look like this:

TableExtensions.cs

using System;
using System.Text;
using System.Web.Mvc;

namespace HtmlHelpers.Helpers
{
    public static class TableExtensions
    {
        public static MvcHtmlString Table(this HtmlHelper helper, string id, string name, int rows, int columns)
        {
            if (string.IsNullOrEmpty(id))
                throw new ArgumentNullException("id");

            if(string.IsNullOrEmpty("name"))
                throw new ArgumentNullException("name");

            if (rows <= 0)
                throw new IndexOutOfRangeException();
            if (columns <= 0)
                throw new IndexOutOfRangeException();

            StringBuilder tableBuilder = new StringBuilder();

            tableBuilder.Append(string.Format("<table id=\"{0}\" name=\"{1}\">", id, name));

            for (int rowCounter = 0; rowCounter < rows; rowCounter++)
            {
                tableBuilder.Append("<tr>");
                for (int columnCounter = 0; columnCounter < columns; columnCounter++)
                {
                    tableBuilder.Append("<td>");
                    tableBuilder.Append(rowCounter.ToString());
                    tableBuilder.Append("</td>");
                }
                tableBuilder.Append("</tr>");
            }

            tableBuilder.Append("</table>");

            return new MvcHtmlString(tableBuilder.ToString());
        }
    }
}


As you can see, we've created a static class and a static method. The the first method parameter is 

this HtmlHelper helper

This is where the magic happens. This allows us to use the method from the View like all other HTML helpers.

The other methods specify the number of rows and columns that should be built in the HTML table.

Here is an example of how to use the helper:

@using HtmlHelpers.Helpers;
@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
@Html.Table("myTable", "myTableName", 4, 4)


The output looks like this:



And there you have it folks.  I hope you enjoyed this tutorial.  If you have any questions please don't hesitate to leave a comment.

Thanks for reading.



Comments (3) -

Admin
Admin
1/31/2014 11:01:42 AM #

I'm checkin it out!

fdddd
fdddd
1/31/2014 11:08:40 AM #

Test it test yeah

apple
apple
1/31/2014 11:11:24 AM #

Does this even work??

Pingbacks and trackbacks (1)+

Add comment

  Country flag


  • Comment
  • Preview
Loading

About the author

My name is Buddy James.  I'm a Microsoft Certified Solutions Developer from the Nashville, TN area.  I'm a Software Engineer, an author, a blogger (http://www.refactorthis.net), a mentor, a thought leader, a technologist, a data scientist, and a husband.  I enjoy working with design patterns, data mining, c#, WPF, Silverlight, WinRT, XAML, ASP.NET, python, CouchDB, RavenDB, Hadoop, Android(MonoDroid), iOS (MonoTouch), and Machine Learning. I love technology and I love to develop software, collect data, analyze the data, and learn from the data.  When I'm not coding,  I'm determined to make a difference in the world by using data and machine learning techniques. (follow me at @budbjames).  

Related links

Month List