Infragistics ASP.NET 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

refactorthis.net | ILAsm
Infragistics ASP.NET controls

Learning ILAsm, the backbone of .NET

Who cares about ILAsm or x86 assembly language anyway? I'm sure a lot of you are wondering why anyone would care about learning ILAsm.  It's not like you ever see it unless you disassemble an application.  ILasm or MSIL is the human readable translation of Microsoft .NET intermediate language.  ILAsm is a lot like classic assembly language.  It is a low level programming language that allows you to write programs one instruction at a time with a very minimal syntax.  I've explained the benefits of learning assembly language in my previous post, Why Learn Assembly Language.  In a nutshell, if you learn .NET at the low level of IL, you will have an understanding of what makes any .NET language tick.  You will have the knowledge to disassemble any .NET binary and debug your software at the instruction level.   This post is my first tutorial on writing code in ILAsm.  I hope you'll join me and become proficient in this language of kings.  You will have an edge over the competition and it will change the way you look at high level coding.  Enough talking, let us code! How to compile ILasm If you are a .NET developer, you most likely have an ILasm compiler on your computer which by the way is appropriately named ILasm.exe.  Simply launch the Visual Studio Command Prompt, navigate to the folder that you create your IL files and issue the following command. ilasm.exe is fine if you like to write code in notepad and drop out to a command prompt to write your code.  I myself prefer an IDE.  Visual Studio is an amazing IDE but for some reason the people over at Microsoft didn't see it fit to add support for ILasm into the product.  Never fear!  There is a free, open source alternative that is nearly identical to Visual Studio and it allows you to create and compile IL projects with syntax highlighting that works on Linux, Windows, and Mac OSX!  What is this application you ask? MonoDevelop   "Hello... World?" I know, I know, it's a tired, worn out cliche but far be it from me to interrupt the order of the programming gods and illustrate a programming language without starting with the infamous "Hello World!" example. //import the mscorlib assembly to give us access to Console and other basic classes .assembly extern mscorlib{} //define our assembly .assembly HelloAssembly { //define the version of this assembly .ver 1:0:0:0 } //define the executable module .module helloworld.exe //defin our main method .method static void main() cil managed { //set up the stack. In ILAsm, all values are placed on the stack and then manipulated. //here we will allocate memory for one value to be on the stack at a given time .maxstack 1 //define the main entry point to the application .entrypoint //load the emphamis phrase on the stack ldstr "Hello ILAsm!" //print the string from the stack to the console call void [mscorlib]System.Console::WriteLine(string) //return to end the program ret } If you have never seen asm or ILasm, I can imagine how strange this code snippet may look.  As I've stated before, ILasm is a very cryptic, low level language.  Let's breakdown the application. We start by importing the mscorlib library which contains much of the base .NET classes.  As the comments state, this library gives us access to the System.Console object.   Next, we define the assembly for our program.  All .NET executables are called assemblies.  Here we name our assembly as well as set a version number.  After we define our assembly, we define the executable module.  This is required in any ILasm application.   Now it's time to define our main method that performs the loading and printing of the string.  We start by defining the maxstack, that is, the maximum number of values that can be held in memory at a given time.  In ILAsm, you push values on the stack, perform operations on the values or use them as parameters to methods.  Since we have a maxstack of one, that means we can have only one piece of data to work with at any given time.  We use ldstr to load a string onto the stack.  If we were to load another string on the stack directly after the first ldstr call, the application will simply push the first value out of memory and the new string will be available to access. Finally, we call the WriteLine method on the System.Console object and we tell it to use the current string on the stack as it's input source.   So now you can load a string onto the stack and display it.  It's pretty interesting, although very limited as well.  How about we work with more than one value?  Let's try adding two numbers! Sum it up //reference to mscorlib .assembly extern mscorlib {} //define our assembly .assembly MiniCalculator { //the assembly version number .ver 1:0:0:0 } //create the required module .module MiniCalculator.exe //define our main method .method static void main() cil managed { //we plan to work with two integers this time .maxstack 2 //the main entry point to our application .entrypoint //load a string of instructions on the stack ldstr "OK. Class is in session. Who can tell the class what is the sum of 2 + 2? That's right, the answer is " //display the instructions to the user call void [mscorlib]System.Console::Write (string) //put the number 2 on the stack. Currently the previously loaded string, and the //number 2 are both on the stack. ldc.i4 2 //when we move another integer to the stack, this pushes the string off //now we have two instances of the number 2 on the stack ldc.i4 2 //add will add the two numbers on the stack and store the result add //lets tell the computer to look for an int on the stack and print it to the console call void [mscorlib]System.Console::Write (int32) //return to exit the application ret } We start the application as before by importing mscorlib, defining our assembly and module, and creating the method to perform our work.  We then load a string on the stack and use Console's WriteLine method to display the string.  We then load two integers onto the stack, pushing the string off of the stack.  We call add whichs adds the two integers and stores the result on the stack.  We use Console's WriteLine once again to display the answer. This concludes part one of my ILasm tutorial series. Please check back soon for my next installment in which we will tackle data types, loops, and classes! Until next time.. ~/Buddy James kick it on DotNetKicks.com  


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