best practice for mvc razor view layout

Question

I am looking for best practices for design razor view with MVC.

which would be better option:

HtmlHelper extension methods

    @Html.TextBox("txtName")

or
write the html directly

    <input type"text" id="txtName" name="txtName" />

I found 2 diferent links. The first one http://blogs.msdn.com/b/aspnetue/archive/2010/09/17/second_2d00_post.aspx says DO use HTMLHelper extension methods.
and the second one http://codeclimber.net.nz/archive/2009/10/27/12-asp.net-mvc-best-practices.aspx says 10 – Write HTML each time you can

so i am a little cofused

Answer 1

Since you're using Razor, I would make the most of what it has to offer, and the HtmlHelper extensions allow you to write html quicker and easier in a lot of places.

There may be times when you have to use Html instead, where you might want to include tags in an anchor and cannot use @Html.ActionLink, for example.

But where you can achieve the same result with either approach, I'd recommend you go with Razor.

Answer 2

Even the name HtmlHelper should already give you a hint whether you should use it or not. Do you want help? If not, just write html from the scratch. It does not really matter how the html was generated: from the scratch or using html helper. What matter is that it was generated with correct names of the inputs so that model binder can bind these inputs to the model.

For example, suppose you have the following Model that will be passed to the view and that will be received on the POST:

public class SomeModel
{
    public Customer Customer { get; set; }
}

public class Customer
{
    public int Id { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
}

In order to make sure that your inputs will be binded to the model you need three inputs on your page:

<input type="hidden" id="whatever" name="Customer.Id" /> 
<input type="text" id="whatever" name="Customer.FirstName" />
<input type="text" id="whatever" name="Customer.LastName" />

Having this html markup will assure proper model minding. However, you can achieve this markup by using HtmlHelpers, which is a lot easier:

@Html.HiddenFor(m => m.Customer.Id)
@Html.TextBoxFor(m => m.Customer.FirstName)
@Html.TextBoxFor(m => m.Customer.LastName)

This will not only give you proper name attributes on every input, but also assign id attributes accordingly so you don't have to do that all by your self.

---

It appears that the author from the second article suggests to never use HtmlHelpers for two reasons:

1. the learning purposes: I assume by saying "web developers have to be comfortable writing HTML" he means that developer should know exactly what html markup is required for proper model binding.
2. the fear of black box: It seem that author is afraid that improper html markup will be generated by using HtmlHelpers or he just does not know what html will be generated.

I disagree with his phrase: "HtmlHelpers whose only reason of living is hiding the HTML away". I'd rather say "HtmlHelpers whose only reason of living is helping writing Html markup"

---

Summary: HtmlHelpers help you write proper html markup, which is why I suggest you using it.

Answer 3

Html helpers are not cosmetic code snippets that just save time. Consider choosing the appropriate editor based on model property types, and - what is also very important - they help in client validation, provided you include jquery.unobtrusive-ajax.js and jquery.validate.js.
The last cannot be achieved by simply writing HTML.
From what I said it can be easily derived that Html helpers "know" about the model, while plain markup does not.
At the end it is up to you to decide what to use, but knowing more about Html helpers is better when making a decision.