In this post I look into the code smell that is HTML literals and show how we can refactor these pesky strings into a friendlier and more maintainable model.
The Problem
When I started writing MVC applications, I quickly realized that I built a lot of my HTML inside HtmlHelpers. As I did this, I ended up moving quite a bit of HTML into string literals inside my helper classes. As I wanted to add more attributes (such as classes) to my tags, I needed to keep adding overloads to my helpers. A good example of this end result is the default html helpers that come with the MVC framework. Too many overloads make me crazy!
The problem with all these overloads is that they quickly muck up the API and nobody can remember exactly what order the parameters go in. I've seen many presenters (including members of the ASP.NET MVC team!) stumble before realizing that their view wasn't compiling because they needed one more null parameter in the call to Html.ActionLink.
What if instead of writing
Html.ActionLink("Edit", "Edit", null, new { @class = "navigation" })
we could do
Html.LinkToAction("Edit").Text("Edit").AddClass("navigation")
? Wouldn't that be much easier to remember and understand? We can do this if we introduce a semantic model for building our HTML.
What is a Semantic Model?
According to Martin Folwer, "a is an in-memory representation, usually an object model, of the same subject that the domain specific language describes." In our case, the model would be a set of classes that know how to render HTML. By using a semantic model we can free ourselves from dealing with strings and instead output the HTML (typically via ToString) once we've added all the elements and attributes we desire to the model.
There are two primary semantic models available in ASP.NET MVC: MVC 2.0's TagBuilder and FubuMVC's HtmlTags.
TagBuilder
TagBuilder is the html builder that is available in ASP.NET MVC 2.0. I'm not a huge fan but it gets the job done -- for simple jobs. Here's an overview of how to use TagBuilder. See my Tips section below for a few comments on that example.
The disadvantage of TagBuilder is that unless you wrap it up with our own classes, you still have to write the actual tag name over and over in your code. eg. new TagBuilder("div") instead of new DivTag. I also think it's method names are a little too long. Why not have AddClass instead of AddCssClass or Text instead of SetInnerText? What those methods are doing should be pretty obvious even in the short form.
I also don't like that it wants to generate an id attribute from your input instead of letting you set it yourself using external conventions. (See GenerateId and IdAttributeDotReplacement)). Obviously these come from Microsoft's default approach to MVC but may not be optimal for all programmers.
HtmlTags
HtmlTags is in my opinion the much better option for generating html in ASP.NET MVC. It was actually written as a part of FubuMVC but is available as a.
HtmlTags provides a much cleaner syntax for writing HTML. There are classes for most of the major tags and it's trivial to create additional ones by inheriting from HtmlTag. There are also methods on each tag for the common attributes. For instance, FormTag has an Action method. The SelectTag class allows you to set the default option or first option independent from adding other options. With TagBuilder there isn't even an abstraction for building selects!
The project is open source and always improving. I'll hopefully find time to submit some of my own enhancements soon.
Tips
-
It's best not to have insanely overloaded html helpers. Use fluent builders.
-
In html helpers, return the TagBuilder/tag itself (not a string!) so that you can continue to add attributes outside the helper; see my first sample above.
-
Create a static entry point into your builders. I created a static Tags class that gives me access all the HtmlTag classes I need. This way I don't clutter my code with "new" keywords. eg. Tags.Div returns a new DivTag instance.
-
If you find yourself doing something a lot, create an extension method for it. I created a Nest extension method that reads much more fluently than the AddChildren method. It also accepts a params array of tags so I can very easily nest many children.
I hope you have found this post helpful. Join me in my war against HTML literals! I’ll have some more samples of how I use HtmlTags in future posts.
Update: more info on our HtmlTag extensions here.