Click here to Skip to main content
11,920,353 members (49,823 online)
Click here to Skip to main content
Add your own
alternative version


19 bookmarked

Custom Strongly-typed HtmlHelpers in ASP.NET MVC

, 22 May 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
Custom strongly typed HtmlHelpers in ASP.NET MVC


The original release of ASP.NET MVC used HTML helpers with a syntax like the following:


These worked, but if you renamed the property in your model (for example, from “Title” to “Subject”) and forgot to update your view, you wouldn’t catch this error until you actually tried out the page and noticed your model isn’t populating properly. By this time, you might have users using the site and wondering why stuff isn’t working.

ASP.NET MVC 2 introduced the concept of strongly-typed HtmlHelper extensions, and ASP.NET MVC 3 extended this even further. An example of a strongly typed HtmlHelper is the following:

@Html.TextAreaFor(post => post.Title)

These allow you to write more reliable code, as view compilation will fail if you change the field name in your model class but forget to change the field name in the view. If you use precompiled views, this error will be caught before deployment.

Creating your Own

The built-in helpers are good, but quite often it’s nice to create your own helpers (for example, if you have your own custom controls like a star rating control or rich-text editor). These new helpers are very easy to create, since we can make use of two different classes that come with ASP.NET MVC:

  • ExpressionHelper — Gets the model name from a lambda expression (for example, returns the string Date” for the expression post => post.Date, and “Author.Email” for the expression post => post.Author.Email). This is what you’d use in the ID and name of the field
  • ModelMetadata — Gets other information about the lambda expression, including its value

These two classes give us all the information we require to make our own HTML helpers (internally, these are what all the built-in strongly-typed HTML helpers use).

Here’s an example of a simple HTML helper that uses both of the above classes:

public static MvcHtmlString NewTextBox(this HtmlHelper htmlHelper, string name, string value)
	var builder = new TagBuilder("input");
	builder.Attributes["type"] = "text";
	builder.Attributes["name"] = name;
	builder.Attributes["value"] = value;
	return MvcHtmlString.Create(builder.ToString(TagRenderMode.SelfClosing));

public static MvcHtmlString NewTextBoxFor<TModel, TProperty>
(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression)
	var name = ExpressionHelper.GetExpressionText(expression);
	var metadata = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);
	return NewTextBox(htmlHelper, name, metadata.Model as string);

Given a model like this:

public class Post
	public string Title { get; set; }
	// ...

A view like this:

@Html.NewTextBoxFor(model => model.Title)

Will produce HTML like this:

<input name="Title" type="text" value="" />

Obviously this isn't the most useful example, but you can extend this pattern to create whatever control you like. For helpers with larger chunks of HTML, I’d suggest using partial views. These can be rendered using htmlHelper.Partial().

Hopefully this helps someone!


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


About the Author

Daniel Lo Nigro
Web Developer Facebook
United States United States
I'm a web developer specialising in ASP.NET MVC, PHP and JavaScript. I've got several years of web development experience and am always trying new technologies.

You may also be interested in...

Comments and Discussions

GeneralExactly what I was looking for! Pin
Member 120366048-Oct-15 0:25
memberMember 120366048-Oct-15 0:25 
QuestionSimple Pin
Assil20-Jun-14 2:45
professionalAssil20-Jun-14 2:45 
QuestionThanks a lot Pin
Bret Williams9-Aug-12 3:43
memberBret Williams9-Aug-12 3:43 
QuestionInteresting but how would I do this Pin
RickNash26-Jun-12 6:27
memberRickNash26-Jun-12 6:27 
GeneralRe: Interesting but how would I do this Pin
Daniel Lo Nigro30-Jun-12 17:36
memberDaniel Lo Nigro30-Jun-12 17:36 
GeneralMy vote of 5 Pin
Howard Richards15-Jun-12 1:59
memberHoward Richards15-Jun-12 1:59 
GeneralRe: My vote of 5 Pin
Daniel Lo Nigro30-Jun-12 17:38
memberDaniel Lo Nigro30-Jun-12 17:38 

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.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.151120.1 | Last Updated 22 May 2012
Article Copyright 2012 by Daniel Lo Nigro
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid