Dr. Dobb's | HTML Templates In ASP.NET MVC Views

HTML Templates In ASP.NET MVC Views

It all depends on how styling and CSS are important for the type of application you're building

October 27, 2008
URL:http://www.drdobbs.com/windows/html-templates-in-aspnet-mvc-views/211100204

Among other things, the ASP.NET MVC Framework pushes an extremely thin and passive view and subsequently a neat separation between HTML templates and code that produces the actual response for the user.

After a few years of extensive use of server controls, you may feel baffled and confused when looking at the typical source code of an ASPX page in an ASP.NET MVC Framework project.

Have you ever seen it? At first, it doesn't really look different from old-fashioned Active Server Pages. It is a mix of plain HTML tags and ASP-style <% ... %> code blocks.

Code blocks may look like below and are saved in a standard ASPX file:


<% foreach (var customer in ViewData.Model)
   { %>
       
    <p>
      [
       <%= Html.ActionLink("Change", "Edit", 
                           new { id = customer.ID } ) %>                 
      ]
         
      <%= Html.ActionLink(customer.Name, "Detail", 
                          new { id=customer.ID ) %> 
    </p>
       
<% } %>

Any code fragment in each code block is processed as in classic ASP.NET. When the view is processed, a dynamic code-behind class is created that contains a function call that incorporates the code in the code blocks. The output of the function is a piece of markup that combines with any other static markup you may have in the page.

The view is essentially an HTML template with functional and data placeholders. Functional placeholders are code blocks; data placeholders are references to external data injected in the view. The ViewData object is the object that represents this content.

In code blocks, you generate HTML and bind element's attributes to injected data. This process is not as easy and maintainable as you may think at first. For this reason, the Html object exists to offer an easier way to generate HTML tags from some input data. The ActionLink method in the code snippet just generates an <a> tag.

Why should you prefer this code over classic ASP.NET where server controls are everywhere and rule the world? The answer is only one: You want a thinner user interface that is also easier to style.

A thin user interface is a user interface that is obtained from a HTML template plus some data. No code is involved with the processing of the user input and the generation of the view. All the code (and the subsequent logic) is moved to an external class. The view doesn't virtually need testing beyond the obvious verification that it contains properly formatted and expected data.

Having a user interface made of plain HTML makes it also much easier for you to apply styles. With server controls, in fact, you have only a limited control over the generated markup. To style the output of a server control you essentially assign values to a bunch of public properties. Beyond this, you have no control over how the control uses those values to produce markup.

Many developers, for example, would like to have a grid rendered as a table with proper use of tags like TBODY and TFOOT. Not in all versions of ASP.NET, though, the DataGrid control does include (and style) these tags. An approach entirely based on raw HTML is perhaps heavier to write and may reduce productivity in the long run but it for sure enhances the control over output and styles. In the end, it all depends on how styling and CSS are important for the type of application you're building.