You may have read about the new strongly-typed helpers in ASP.NET MVC 2. In addition to the HTML element helpers like Html.TextBoxFor(), you can use the more generic Html.EditorFor() to build your own template for editing a custom data type. In this post, I'll show you how to create a single template you can use for any forms that need a rich text editor.
UIHints using Using DataAnnotations
First, we need to specify the type of data we'll be building a template for. We'll use a simplified CMS model as an example:
public class CMSPage
{
public CMSPage() { }
string Title { get; set; }
string URL { get; set; }
string Content { get; set; }
}
Using DataAnnotations, we can specify the type of each of these elements:
public class CMSPage
{
public CMSPage() { }
[DataType(DataType.Text)]
string Title { get; set; }
[DataType(DataType.Url)]
string URL { get; set; }
[DataType(DataType.Html)]
string Content { get; set; }
}
We have already provided enough information for the EditorFor to build a decent edit form for our CMSPage object—but with a UIHint we can make this even better:
public class CMSPage
{
public CMSPage() { }
[DataType(DataType.Text)]
string Title { get; set; }
[DataType(DataType.Url)]
string URL { get; set; }
[DataType(DataType.Html)]
[UIHint("Html")]
string Content { get; set; }
}
EditorFor now knows we want to use the "Html" template for the Content field—now we just need to create the template.
Custom EditorTemplates
Create a new folder in Views/Shared called EditorTemplates, and create a new partial view, Html.ascx, in that folder. Since this template will be used for editing HTML, we can use string as the type.
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<String>" %>
<%= Html.TextArea("", Model, new { @class = "html" })%>
Now the EditorFor helper will use our new Html.ascx template for any fields we've specified to be HTML using the UIHint attribute. Currently our template is just a textarea with the CSS class html applied, but with a little jQuery and progressive enhancement we can improve on that.
Upgrading your textarea with markItUp!
markItUp! is a jQuery plugin that lets you turn any textarea into a rich text editor for any number of text formats—we'll be looking at an editor for HTML, but there are markItUp! sets available for formats like Textile, markdown, wikis, and many others. After downloading the latest release and the Html set, add the required CSS and JavaScript references:
<link rel="stylesheet" type="text/css" href="markitup/skins/markitup/style.css" />
<link rel="stylesheet" type="text/css" href="markitup/sets/html/style.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="markitup/jquery.markitup.js"></script>
<script type="text/javascript" src="markitup/sets/html/set.js"></script>
Now all we need to upgrade our textarea to a rich text editor is:
jQuery(function ($) {
$('textarea.html').markItUp(mySettings);
});
So what are the advantages of this approach?
- Reusable - all you need to do to add the same editor support to another field on any model is to add the appropriate UIHelper attribute. You could even develop several templates like this to use as a standard base project.
- DRY - there is exactly one place to change the editor for all "Html" type fields.
- Consistent - you can be sure that all "Html" fields will have the same editor control.