Custom Helpers in ASP.NET MVC4

Introduction

What are HTML Helpers in ASP.NET MVC?

HTML Helpers are nothing but a way of rendering HTML on the view page in ASP.NET MVC. In other words, simply it is just a method which returns you a string, and string is HTML.

Example of HTML Helpers

Here, I am showing some of the examples in HTML helpers:

//
// static class
//
@Html.TextBoxFor(model=>model.Lastname)

@Html.LabelFor(model=>model.Firstname)

@Html.ActionLink("Link name","Methodname","ControllerName")...e.t.c

Why to use Html Helpers?

We can use directly HTML tags and we have another opportunity to achieve the same thing using HTML Helpers. It's just for making a developer's life more easy and to have the cleaner html for your view page. And Helpers are strongly binded to your model.

Why we Need Custom Html Helpers?

For every framework, we need to do some customization on top of every framework because of the existing things not fulfilled in your Business Requirement. In that case, you need to write some custom stuff. Writing a custom Html helper is nothing but writing an extension method for HtmlHelper class. HtmlHelper class is the root for the helpers. I hope everybody knows about extension methods in C#.

Using the Code

How to Create Custom Html Helper?

Here, I will simply write an Html helper which will render the container of any content on view page.

This is done simply by using the <div> tag of Html.

Step 1

Create one custom static class for creation of your custom Html helpers.

//
// static class
//
public static class CustomHelpers
{

}

Step 2

Add static method to the class and make sure that return type is MvcHtmlString.

//
// static method 
//

public static MvcHtmlString Div(this HtmlHelper helper, string content)
{

}

Step 3

Add the rendering logic in the method, you can take help from TagBuilder class to generate Html tags to be rendered.

//
// Logic for rendering
//
public static MvcHtmlString Div(this HtmlHelper helper, string content)
{
var tagBuilder = new TagBuilder("Div");
tagBuilder.InnerHtml = content;
return new MvcHtmlString(tagBuilder.ToString());
}

Step 4

Build the project.

Open any view, i.e., .cshtml file and add custom class name space to that view.

Here, I have created my custom class under model folder.

@using CustomHelpersExample.Models

Finally, call the method in view:

//
// finally method call in view
//

@Html.Div("<input type='text' id='txtUsername' placeholder='Username'/>
</br></br><input type='password' 
placeHolder='Password' id='txtpassword'/></br>
</br><input type='Submit' value='Login'></submit>")

That's it. Now run your project.

Then finally in browser, the code will be rendered as:

//
// finally after rendering the code below
//

<div>
<input type="text" id="txtUsername" placeholder="Username"><br />
<input type="password" id="txtpassword" placeholder="Password"><br />
<input type="submit" value="Login">
</div>

That's it.

I hope everybody understands this. It's very simple and easy. Try it in your own scenarios.

Points of Interest

This is more useful in our development. Whenever you require customization, you can do this way. I like this very much. I am sincerely thankful to my supporters.

History

• 2014-11-01