Custom HTML Helpers In MVC

Ranjit Powar

10y182.3k20100Article

MVCHTML Helpers In MVCCustom HTML Helpers

20 Comments

Join the conversation! Your thoughts help the community grow.

Bimal Das9y ago
If we rename namespace "System.Web.Mvc" instead of namespace "CustomeHelper.CustomHelper" , then we don't have to use @using System.Web.Mvc in razor view!!!!
Manav Pandya9y ago
So how to find different interface for more custom html helper's , thanks for all replies sir
- Ranjit Powar9y ago
  You can create all kinds of custom controls using IHtmlString
Manav Pandya9y ago
Just tell me what is IHtmlString bcoz im trying to change this its not working properly
- Ranjit Powar9y ago
  IHtmlString is interface which represents Html encoded string.
Manav Pandya9y ago
Ok sir read it carefully thanks Ranjit Powar sir
Manav Pandya9y ago
But where to write extention file code , you specified to write in class but where to put that class file ?
- Ranjit Powar9y ago
  Read article carefully I created one directory in project to keep custom helpers, in that directory class file is stored. Or you can add class directly in project by right on project add new menu.
Manav Pandya9y ago
Nicely explained article sir Ranjit Powar
Ranjit Powar10y ago
thanks rajeev
Rajeev Punhani10y ago
Thanks for sharing
Ehsan Sajjad10y ago
Informative
Ranjit Powar10y ago
Thank you all
Humayun Kabir Mamun10y ago
Nice...
Ankit Saxena10y ago
Thanks for sharing. Usefull info.
Ranjit Powar10y ago
Thanks
Dhanik Sahni10y ago
Good
Debasis Saha10y ago
Nice article...
Ranjit Powar10y ago
Thanks
Raja T10y ago
Nice, Thanks for sharing

HTML Custom Helpers

HTML helper is a method that returns a HTML string. Then this string is rendered in view. MVC provides many HTML helper methods. It also provides facility to create your own HTML helper methods. Once you create your helper method you can reuse it many times.

There are two ways in MVC to create custom Html helpers as below.

Adding extension method for HtmlHelper class
Using static method

Adding extension method for HtmlHelper class

We can create our own HTML helper by writing extension method for HTML helper class. These helpers are available to Helper property of class and you can use then just like inbuilt helpers.

Example

Add new class in MVC application and give it meaningful name. In this example we create new folder “CustomHelper” in application and then we add class “CustomHelpers” in that folder. As we are going to create extension method make this class static. Write the following code in class:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace CustomeHelper.CustomHelper
{
public static class CustomHelpers
{
public static IHtmlString File(this HtmlHelper helper, string id)
{
TagBuilder tb = new TagBuilder("input");
tb.Attributes.Add("type", "file");
tb.Attributes.Add("id", id);
return new MvcHtmlString(tb.ToString());
}
}
}

In above code we create static method file for HtmlHelper class. In this method we create html tag with the help of TagBulider class. In this code we just use two attributes you can add more html attributes as per your requirement. Now we use this html helper method on view just like inbuilt helpers. As this class resides in “CustomHelper” namespace we should add this namespace in view as below,

@using CustomeHelper.CustomHelper
@ {
ViewBag.Title = "Index";
}
< h2 > Index < /h2>

If you want to use these helpers on multiple views then add namespace in web.config file. Once you add that namespace you are ready to use “File” helper like below,

file

Add this method and pass id parameter. And run your view, you will get output as below.

output

Using static method

In this method we don’t create any extension method for HtmlHelper class. We create new class as “CustomHelper”. Write the following code in class:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace CustomeHelper.CustomHelper
{
public class CustomHelper
{
public static IHtmlString File(string id)
{
TagBuilder tb = new TagBuilder("input");
tb.Attributes.Add("type", "file");
tb.Attributes.Add("id", id);
return new MvcHtmlString(tb.ToString());
}
}
}

Once you create this you are able to use this helper method on view. As in this method we don’t create extension method for HtmlHelper class, we don’t use like inbuilt helpers. To use this helper we use class name instead of “@Html” (in razor view) like below.

class

Add this method and pass id parameter. And run your view, you will get output as below.

output

Conclusion

In this article we learned to create custom html helpers. By creating custom html helper we can eliminate the repeating html code fragments from application.