So, you’re using ASP.NET MVC and having a blast (at least I hope you are). If you are anything like me (and most developers), your design skills are pretty much non-existent. That’s why there are designers working in most web applications.

But anyway, if they keep complaining about the structure of the html you hand them, you can do something to ease their pain (and yours). For simplicity, let’s say they complaint about the views you generate using the List template.

Let’s use the Person object we created in the last quick tip:

public class Person

 {

     private string _name;

     private int _age;

 

     public string Name { get { return _name; } set { _name = value; } }

     public int Age { get { return _age; } set { _age = value; } }

 

     public Person(string name, int age)

     {

         _name = name;

         _age = age;

     }

 }


Now, add an action method to your Home controller with the following code:

public ActionResult List()

{

    Person p1 = new Person("Nuno Silva", 30);

    Person p2 = new Person("John Doe", 28);

    List<Person> personList = new List<Person>();

 

    personList.Add(p1);

    personList.Add(p2);

 

    return View(personList);

}


Right-click the method name, choose Add View and make sure you select a strongly-typed view. Choose the Person object from the list, and pick the List template. The generated view will be similar to this:

<h2>List</h2>

 

<table>

    <tr>

        <th></th>

        <th>

            Name

        </th>

        <th>

            Age

        </th>

    </tr>

 

<% foreach (var item in Model) { %>

 

    <tr>

        <td>

            <%= Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) %> |

            <%= Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ })%>

        </td>

        <td>

            <%= Html.Encode(item.Name) %>

        </td>

        <td>

            <%= Html.Encode(item.Age) %>

        </td>

    </tr>

 

<% } %>

 

</table>


If you browse to http://<yoursite>/Home/List you will see a table displaying the information we created in the action method. Let’s say the design team is lazy and asks you to send them this view using an unordered list instead (ul element).

Sure, you can change it, but you can see this happening for every view you create based on this template. Wouldn’t it be nice if you could create your own template to render an unordered list?

Open your file explorer, and go to C:\Program Files\Microsoft Visual Studio 10.0\Common7\IDE\ItemTemplates\CSharp\Web\MVC\v2\CodeTemplates\AddView (this is for Visual Studio 2010, so change the directory accordingly).

You will see a list of files with “.tt” extension. These are text template files and this format is used widely in Visual Studio for several code generation tasks. Unfortunately, Visual Studio doesn’t currently provide a good experience in editing these files. The only tool that I’m aware of that does this is Clarius Visual T4.

Anyway, I copied the List template, renamed it to Unordered List and made a few changes (which was not hard to do since we are basically trading the <table> element for a <ul> and <td> for <li>. You can download the template I build here.

Now that we have a new file called UnorderedList.tt in that folder, we can go back to Visual Studio, delete the view and try to generate it again. You will immediately see on the list of templates, our new template available:

 add view menu in visual studio

Here’s what the new view looks like:

<h2>List</h2>

<ul>

    <% foreach (var item in Model)

       { %>

    <li>

        <div class="Name">

            <span>

                <%= Html.Encode(item.Name) %></span>

        </div>

        <div class="Age">

            <span>

                <%= Html.Encode(item.Age) %></span>

        </div>

    </li>

    <% } %>

</ul>


Sure, you can easily code this by hand, but if we were talking about an object with 20 properties it would be tiresome. Besides, you do this once and you solve the problem for the rest of your project. You can even add css classes if you want or add some branding information to all the templates.

As you saw, “installing” templates is done by copying them to that folder. So, it’s very easy to distribute this to the other developers on your team.

Until next time!