Channels ▼
RSS

Web Development

HTML Templates In ASP.NET MVC Views



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.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 
Dr. Dobb's TV