Working on a series of articles on ASP.NET MVC 2.0 that are subject to change when ASP.NET MVC 2.0 gets released as a part of Visual Studio 2010:
Although the names may change, I think the concepts will remain the same.
Our Buddy Class Contact_Metadata
If you have been following my series of posts, you will remember that we have been working with a very simple Contact Class that has two properties, Name and Email. We also implemented a buddy class, called Contact_Metadata, to hold all the metadata ( attributes from System.ComponentModel.DataAnnotations ) that has accumulated for various validation and display purposes:
[MetadataType(typeof(Contact_Metadata))]
public class Contact : Entity
{
public string Name { get; set; }
public string Email { get; set; }
}
internal class Contact_Metadata
{
[Required(ErrorMessage = "Name is required.")]
[StringLength(100, ErrorMessage = "Name must be 100 characters or less.")]
public string Name { get; set; }
[Required(ErrorMessage = "Email is required.")]
[StringLength(200, ErrorMessage = "Email must be 200 characters or less.")]
[RegularExpression(@"\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*", ErrorMessage = "Valid Email Address is required.")]
[DataType(DataType.EmailAddress)]
public string Email { get; set; }
}
DataTypeAttribute
You will also remember that we added a DataTypeAttribute to the Email Property:
[DataType(DataType.EmailAddress)]
public string Email { get; set; }
to have it display the Email as a mailto hyperlink in our default Details Page:
No magic here even though it feels like it. As long as we use the new Html.DisplayFor Template Helper in ASP.NET MVC 2.0, it will notice that DataTypeAttribute with an enumeration of DataType.EmailAddress and properly display that email address as a mailto hyperlink. Good stuff. You can read about this in the previous tutorial, DataTypeAttribute and ASP.NET MVC 2.0 Goodness with Templated Helpers.
UIHintAttribute Instead of DataTypeAttribute
You will be happy to know that you can replace the DataTypeAttribute with a UIHintAttribute ( also in System.ComponentModel.DataAnnotations ) in this case to accomplish the same thing.
Hence, if I replace the DataTypeAttribute:
[DataType(DataType.EmailAddress)]
public string Email { get; set; }
with a UIHintAttribute:
[UIHint("EmailAddress")]
public string Email { get; set; }
I get the same result:
Customizing the Output with DisplayTemplates
Now just like we did with the Contact Entity ( Html.DisplayFor Template Helper in ASP.NET MVC 2.0 to render Complex Object ), we can customize the output of an EmailAddress by creating our own Display Template for EmailAddress. Let's create a partial view, called EmailAddress.ascx, in the DisplayTemplates folder of our ASP.NET MVC 2.0 website and customize the display of the EmailAddress to include a simple email icon.
I quickly created a Display Template that looks as follows:
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<string>" %>
<a href="mailto:<%= Html.DisplayFor(emailaddress => emailaddress) %>">
<%= Html.DisplayFor(emailaddress => emailaddress) %>
</a>
<img src="/Content/email.gif" />
Now when the Contact Details is displayed you see the small email icon at the end of the email address because it is now using our custom Display Template.
There are other ways to pull this off, too, but as you can see there is some really neat stuff you can do with the DataTypeAttribute, UIHintAttribute, and Display Templates with the Html.DisplayFor Template Helper in ASP.NET MVC 2.0. Yes, we are getting a bit of that ASP.NET Dynamic Data in our ASP.NET MVC Websites and it feels good!
Come check out my quick presentation on ASP.NET MVC 2.0 Preview 1 at the Tampa ASP.NET MVC Developer Group!
Hope this helps,
David Hayden
ASP.NET MVC Tutorials