Matt Palmer’s Blog

Adding a rich text editor to ASP.NET MVC using strongly typed helpers, DataAnnotations & jQuery

mpalmer — Mon, 15 Feb 2010 19:07:00 GMT

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.

Quality is in the Details

mpalmer — Wed, 13 Jan 2010 20:36:00 GMT

I recently read a great post that tied chef Gordon Ramsey's obsessive nature to software quality:

Gordon Ramsey, in his auto-biography, defended his obsessive perfectionist nature, arguing he has to obsess. You don’t win Michelin stars without it.
“It doesn’t matter how amazing the steak is, if it’s served on a cold plate it’s crap. If it’s served with a dull knife it’s crap. If the gravy isn’t piping hot, it’s crap. If you’re eating it on an uncomfortable chair, it’s crap. If it’s served by an ugly waiter who just came in from a smoke break, it’s crap. Because I care about the steak, I have to care about everything around it. “
The parallels in software are obvious. If you see a few lines of atrocious code, you can make a judgement about the programmer. By judging the programmer, you can judge his boss, and by judging his boss you can judge the company. That’s the nature of fractals. The desire for quality trickles down to everything from making sure that the homepage photo isn’t blurry all the way through to making sure that font in Christmas card is correct. As Aristotle said, excellence is not an act but a habit.

Attention to detail is vital. Thomas Keller, the only American with two three-star restaurants, is famously obsessed with the details. In The Soul of a Chef, Michael Ruhlman notes that Keller stores his fish on ice in the direction they swim in the ocean. His serving staff are trained by ballet instructors. He has banned the use of tongs in his kitchen, believing they harm the food. He has stopped to correct kitchen staff when he believed they were not gentle enough with the loaf when slicing bread, and has instructed his servers to replace your bread if it cools before you are ready to eat it. He even inspects every plate that comes back to the kitchen, looking for anything that wasn't eaten.

Chef David Chang of Momofuku turned a tiny noodle shop into one of the most popular restaurants in New York by holding himself to a higher standard:

Just because we're not Per Se, just because we're not Daniel, just because we're not a four-star restaurant, why can't we have the same ... standards? ... I know we've won awards, all this stuff, but it's not because we're doing something special—I believe it's really because we care more than the next guy.

It's easy to see who pays attention to detail in the software world:

How much attention are you paying to the details of your application? You may not be building the next Apple product, but why not hold yourself to the same standards?

Is your app ready for Windows 7?

mpalmer — Thu, 25 Jun 2009 13:10:00 GMT

Windows 7 will be available in stores October 22 - is your app ready? Here's a quick checklist to make sure your application takes full advantage of the new features in Windows 7:

Test for compatibility
Tools like Application Verifier can help you ensure your application has a smooth transition to Windows 7. Learn more about application compatibility at the Windows Developer Center.
Add support for Libraries
Windows 7 Libraries allow users to group similar files across several folders. When your application works with Libraries, you can suggest a reasonable place for users to save their work, or you can even create Libraries specific to your application. Check out three strategies for making your application Libraries-aware on the Windows 7 for Developers blog.
Use the new Ribbon API
The Ribbon menu that was introduced with Office 2007 is "the next generation user experience" for Windows applications. Grab the sample code or check out the Windows 7 Ribbon series on Channel9 to find out how to use the ribbon in your app.
Integrate with the web using Accelerators
Using the Windows 7 Accelerator Platform you can make sharing your application's content with sites like Facebook and Live Maps just a click away. You can even create your own accelerators to make use of your product's website.
Speed up your code with the new Windows 7 Instrumentation updates
You've probably heard by now that Windows 7 is faster than XP or Vista - can your app keep up? The new Windows 7 Intrumentation features and updates to Event Tracing for Windows (ETW) can make finding the bottlenecks in your code easier than ever. The Windows 7 RC Training Kit for Developers has hands-on labs to try out the new features.
Qualify for the "Compatible with Windows 7" logo
Check out the Windows 7 Software Logo Program to find out how your application can qualify for the "Compatible with Windows 7" logo - which will also net you a priority listing on the Windows 7 Compatibility Center.