ASP.NET MVC HTML Helpers

One of the things I love about ASP.NET MVC is the fact that I get to work with bare-metal HTML. With Webforms we got the ease of use of just dropping a control on a form, but the HTML generated was less that optimal. Depending on the application you were doing, it was worth the trade off. Webforms put all kinds of bloat in your HTML that was required to support the Webforms way of doing things. This is one of the major reasons I have moved almost completely to MVC. Although MVC does makes things easier to test and give you a greater separation of concerns, this was all technically achievable with Webforms, it just took more work to get there. The Webforms bloat caused a lot of issues like increased page weight and sometimes it was difficult to ensure that the generated HTML was CSS friendly.

Webforms controls may make it quicker to get a UI built, but you don't to sacrifice some of that flexibility when working with ASP.NET MVC. Instead of having to hand craft all of your HTML, you can use HTML helpers. HTML helpers are methods that build HTML tags based on parameters you pass in. Instead of building a HTML textbox by hand like this:

<input type="text" name="firstname" id="firstname">

You can do this:

<% Html.TextBox("firstname"); %>

The TextBox method has multiple parameters including passing in the value of the textbox and other style options. You might be thinking, there isn't much difference in code between the two. In this simple example, either options works. One thing you will notice is that in the top HTML block, I am also setting the id as well as the name. This helps greatly when using jQuery and the helper does that for you. But lets think that you are building a textbox that contains a value from your model. You could build the HTML like this:

<input type="text" name="firstname" id="firstname" value="<%= Model.FirstName %>">

Or you could do this using a helper:

<% Html.TexBox("firstname", Model.FirstName); %>

Both methods will produce the same HTML, but the second one is more flexible. Let's say for instance, you have a business requirement change (like that ever actually happens...) and that textbox now needs to be a text area. Not likely that this would happen with a first name type property, but bare with me. You will have to change your HTML to this:

<textarea name="firstname" id="firstname"><%= Model.FirstName %></textarea>

Or you can simply change the helper method you are using:

<% Html.TextArea("firstname", Model.FirstName); %>

I have personally had to do this fairly often. When the business requirements change as frequently as they do sometimes, it pays to be flexible. If you need to set any custom attributes on the HTML tag you can also do that with the helper by either passing in a dictionary or using an anonymous type:

<% Html.TextArea("firstname", Model.FirstName, new { parameter = "value" }); %>

HTML helpers can certainly make things easier and save you some time when building your UI. They don't have the bloat that comes with Webforms controls, but have a great deal of flexibility. Using extension methods you can also create your own if you need something special or just need to tweak the way they get rendered.