MVC Edit View Template Upgrades

I’m building a new LMS using ASP.NET MVC and I am making heavy use of the View templates added in RC1. (see: T4 Templates: A Quick-Start Guide for ASP.NET MVC Developers)

I made a few changes to the default template to allow (1) table rows and cells instead of <p> tags, (2)add spaced to “ProperyName” so it looks like “Property Name”, and (3) use reflection to determine the <input> type generated by the Html helper. For all string Properties, a normal <input type=”text” /> is still generated, but for Int32, I am generating a <select> and for Booleans, a <input type=”checkbox” /> since these are the normal fields I use for forms.

For an object that looks like this

public class Person {
   public string FullName { get; set; }
   public bool IsActive { get; set; }
}

The default Edit View looks like this:

<p>
    <label for="FullName">FullName:</label>
    <%= Html.TextBox("FullName") %>
    <%= Html.ValidationMessage("FullName", "*") %>
</p>
<p>
    <label for="CampusID">IsActive:</label>
    <%= Html.TextBox("IsActive") %>
    <%= Html.ValidationMessage("IsActive", "*") %>
</p>

Here’s what I wanted the Edit View to look like:

<tr>
    <td class="form-title"><label for="FullName">Full Name</label></td>
    <td class="form-input"><%= Html.TextBox("FullName") %></td>
    <td class="form-val"><%= Html.ValidationMessage("FullName", "*") %></td>
</tr>
<tr>
    <td class="form-title"><label for="Password">Is Active</label></td>
    <td class="form-input"><%= Html.CheckBox("IsActive") %></td>
    <td class="form-val"><%= Html.ValidationMessage("IsActive", "*") %></td>
</tr>

Here’s how I handled the different property types

Property Type	Html Helper	Output
String (and others)	Html.TextBox	<input type="text" />
Boolean	Html.CheckBox	<input type="checkbox" />
Int32	Html.DropDownList	<select>

You can modify this easily in the code below to put whatever controls you want for each property type. To use the template, just create a folder in your project called CodeTemplates\AddView:

Here is my are the parts of Edit.tt file that I updated:

<#
    
if(!String.IsNullOrEmpty(mvcHost.ViewDataTypeGenericString)) {    
    List<PropertyInfo> properties = new List<PropertyInfo>();

    FilterProperties(mvcHost.ViewDataType, properties);  
#>    
    <%= Html.ValidationSummary() %>     <% using (Html.BeginForm()) {%> 


        <table class="form-admin">    
<#

    foreach(PropertyInfo pi in properties) {    
#>

            <tr>    
                <td class="form-title"><label for="<#= pi.Name #>"><#= FormatLabel(pi.Name) #></label></td>

                <td class="form-input"><%= Html.<#= GetInputType(pi) #>("<#= pi.Name #>") %></td>    
                <td class="form-val"><%= Html.ValidationMessage("<#= pi.Name #>", "*") %></td>

            </tr>
<#    
    }    
#>  
        </table>  
        <input type="submit" value="Save" />    
    <% } %>

    <div>   
        <%=Html.ActionLink("Back to List", "Index") %>    
    </div>
<#+
    
public string FormatLabel(string label) {    
    return System.Text.RegularExpressions.Regex.Replace(label, "([a-z](?=[A-Z])|[A-Z](?=[A-Z][a-z]))", "$1 ");

} 
  
public string GetInputType(PropertyInfo pi) {    
    switch (pi.PropertyType.ToString()) {
    
        case "System.Int32":    
        case "System.Int64":    
            return "DropDownList";
    
        case "System.Boolean":    
            return "CheckBox";
    
        case "System.String":    
        default:    
            return "TextBox";    
    }    
}



public void FilterProperties(Type type, List<PropertyInfo> properties) {     if(type != null) {    
        PropertyInfo[] publicProperties = type.GetProperties(BindingFlags.Public | BindingFlags.Instance | BindingFlags.Static);
  

        foreach (PropertyInfo pi in publicProperties)    
        {    
            if (IsBindableType(pi.PropertyType) && pi.CanRead && pi.CanWrite)    
            {    
                properties.Add(pi);    
            }    
        }    
    }    
}

#>

Hope this is helpful to you!