MVC Edit View Template Upgrades

March 11, 2009 | .NET | 0 Comments

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:

image

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!

Leave a Reply

Fork me on GitHub

Social Widgets powered by AB-WebLog.com.