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

Hi, I'm John Dyer. In my day job, I build websites and create online seminary software for a seminary in Dallas. I also like to release open source tools including a pretty popular HTML5 video player and build tools that help people find best bible commentaries and do bible study. And just for fun, I also wrote a book on the theology of technology and media.

Fork me on GitHub

Social Widgets powered by AB-WebLog.com.