MVC Edit View Template Upgrades

March 11, 2009 | .NET | 2 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!

Nested Comments for BlogEngine.NET

January 16, 2009 | .NET | 31 Comments

There are some great changes coming for BlogEngine.NET 1.5.0.0, and one of them is nested comments! I checked in the changes to Codeplex just last night, and I’ve implemented them here as a demo while we hammer out the final details.

Nested (or threaded) comments have been added to a lot of blog platforms lately (including WordPress 2.7), and it is a major feature of comment plugins like Disqus and Intense Debate. I personally think threaded comments make longer posts with lots of comments make a lot more sense.

Here’s an example of how a the comments in a recent post of mine make a lot more sense after turning on nesting. Since I responded in bursts to comments, they were out of order, but with nesting you can see that my comment (in dark brown) are now contextually nested and make much more sense. (Note: To make this work, I had to go back and manually add the “parentid” attribute to my comments to make them nested.)

Before (not nested)

After (nested)

Not nested Not Nested

 

If you want to try it out, you can try it on this post or download the latest check-in from Codeplex. Just be warned that this isn’t the final release. There may be some quirks in the JavaScript.

To add nesting to your existing themes, you’ll need to add the following code (marked by HTML comments) from the Standard Theme:

<div id="id_<%=Comment.Id %>" class="vcard comment<%= Post.Author.Equals(Comment.Author, StringComparison.OrdinalIgnoreCase) ? " self" : "" %>">
<p class="date"><%= Comment.DateCreated %> <a href="#id_<%=Comment.Id %>">#</a></p>
<p class="gravatar"><%= Gravatar(80)%></p>
<p class="content"><%= Text %></p>
<p class="author"> <%= Comment.Website != null ? "<a href=\"" + Comment.Website + "\" class=\"url fn\">" + Comment.Author + "</a>" : "<span class=\"fn\">" +Comment.Author + "</span>" %>
<%= Flag %>
<%= ((BlogEngine.Core.BlogSettings.Instance.IsCommentNestingEnabled && Comment.IsApproved) ? " | " : "") %>
<%= ReplyToLink %> <!—- add this for reply to links –>
<%= AdminLinks %>
</p> </div>
<!—- Start: threading –>
<div class="comment-replies" id="replies_<%=Comment.Id %>" <%= (Comment.Comments.Count == 0) ? " style=\"display:none;\"" : "" %>>
<asp:PlaceHolder ID="phSubComments" runat="server" />
</div>
<!—- End: threading –>

Hope you like it, and let me know if you implement it on your site!

Everyone’s Going “HD” (Sort of)

December 8, 2008 | .NET | 15 Comments

Last week, YouTube made big news by introducing “HD” video, thought it’s unclear what YouTube’s definition of “HD” is. The video is certainly higher definition, but it’s certainly not 720p or 1080p which is technically what HD is supposed to be. It might be 480p which is what Hulu.com does for their high quality streams (and is also what the Wii ouputs).

At DTS, we also recently revamped our videos to be “HD” (in the higher definition sense), moving to 480p in most cases.

We’ve also changed the player quite a bit. The old player had a lot of “chrome” around it and this new one is chromeless (ala Vimeo) and has the option to popout (similar to Hulu). Compare the old player below, with the new player showing two recent profiles, one of an alumnus and the other of a currents student who is also an NFL player.

Old player

image

New Embedded Player Samples

Some Technical Information

This player needed to be able to play both MP4s for video and MP3s for audio. Unfortunately, Flash’s built-in video controls like PlayButton and Seekbar only work for video, and there is no way to use them for audio. I wrote a some wrapper classes that can handle both MP4/FLVs and MP3s and normalizes the event model so they can both be hooked to the same control UI. If we move back to streaming it should be easy to write another class for that and have it all “just work.”

If anyone is interested in the source code, I’d be happy to publish it as an example of a Flash IDE AS3 video player that can also handle MP3s.

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.