Click here to Skip to main content
13,048,406 members (101,073 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


1 bookmarked
Posted 25 Jul 2014

2 Simple Ways to Create Custom HTML Helper in ASP.NET MVC

, 25 Jul 2014
Rate this:
Please Sign up or sign in to vote.
Here are 2 simple ways to create Custom HTML Helper in ASP.NET MVC

In one of the previous ASP.NET MVC Tutorials, we discussed about HTML Helpers in ASP.NET MVC and get answers to following questions:

  • What are HTML Helpers in ASP.NET MVC?
  • What are Standard HTML Helpers?
  • What Standard HTML Helpers render?

Standard HTML helpers are very useful but limited to common scenarios like rendering links and HTML form elements, etc. But for a specific scenario, we might need to create a Custom Html Helper. ASP.NET MVC facilitates us to create our Custom Html Helper in the following simple ways:

  1. Creating Extension Method on HTML Helper Class
  2. Creating Static Methods

Custom Html Helpers

ASP.NET MVC Custom HTML Helper using Extension Method

If we want a custom HTML Helper to be used just like standard HTML helper, then the available approach is to create an extension method on HTML Helper class. Custom HTML Helpers we create using Extension methods will be available to HTML property of View.

For the purpose of implementation, we will create a custom HTML Helper, i.e., “CustomImage” using extension method approach as follows:

namespace CustomHelpers
    public static class ImageHelper
          public static MvcHtmlString CustomImage(this HtmlHelper htmlHelper,
                                                  string src, string alt, int width, int height)
                   var imageTag = new TagBuilder("image");
                   imageTag.MergeAttribute("src", src);
                   imageTag.MergeAttribute("alt", alt);
                   imageTag.MergeAttribute("width", width.ToString());
                   imageTag.MergeAttribute("height", height.ToString());                   
                   return MvcHtmlString.Create(imageTag.ToString(TagRenderMode.SelfClosing));           

In order to make this extension method available in all Views, we will add CustomHelper namespace to namespace section of View’s web.config as follows:

<add namespace="CustomHelpers" />

Now, we can use CustomImage helper in Views. We will pass image source, alternate text, image width and height to our View as follows:

@Html.CustomImage("../Images/Ahmad.jpg", "Mohammad Ahmad", 150, 200)

Using the same approach, we can create any Custom HTML Helper to simplify the task of writing lots of HTML code repeatedly.

ASP.NET MVC Custom HTML Helper using Static Methods

The second available approach for creating Custom HTML Helper is by using Static Methods. It’s also as simple as that of the above mentioned Extension Method approach. We will create a static method for TextBox that renders an HTML TextBox as string.

namespace CustomHelpers
    public static class CustomTextBox
          public static string TextBox(string name, string value)
                  return String.Format("<input id=’{0}’ name=’{0}’ 
                                         value=’{1}’ type="text" />", name, value);                   

Verify the namespace is added to Web.Config namespace section as we did before for Extension Method approach.

<add namespace="CustomHelpers" />

Now, we can simply use the CustomTextBox in our View as follows:

@CustomTextBox.TextBox("strStudentName", "Mohammad Ahmad")

We can use the Static Method approach to generate more HTML rich Custom Helper in ASP.NET MVC.

Other Related Articles

The post 2 simple ways to create Custom Html Helper in ASP.NET MVC appeared first on Web Development Tutorial.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Imran Abdul Ghani
Software Developer (Senior) Emaratech
United Arab Emirates United Arab Emirates
Imran Abdul Ghani has more than 10 years of experience in designing/developing enterprise level applications. He is Microsoft Certified Solution Developer for .NET(MCSD.NET) since 2005. You can reach his blogging at WCF Tutorials, Web Development, SharePoint for Dummies.

You may also be interested in...


Comments and Discussions

GeneralSimplere Pin
Gaurav.Kumar.Arora27-Oct-14 10:23
memberGaurav.Kumar.Arora27-Oct-14 10:23 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170713.1 | Last Updated 25 Jul 2014
Article Copyright 2014 by Imran Abdul Ghani
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid