Note: this is based on ASP.NET MVC 2 RC, and will not work on earlier builds.
The quick pitch: make your User Controls as cool as built-in render helpers!
The goal of this post is to show you how to change the way MVC user controls are called from something like this:
<%= Html.Partial("~/Views/Shared/gravatar.ascx", new { Email = "foo@bar.com", Size = 80 }) %>
To something that looks just like a built-in render helper (like Html.TextBox(…)):
<%= Html.Gravatar("foo@bar.com", 80) %>
The current model for User Controls in MVC
If you have used ASP.NET MVC, you probably know that you can use User Controls (.ascx files) to provide partial rendering.
For example, the default MVC app has a Site.Master and a LogOnUserControl.ascx under Views/Shared, and the Site.Master contains:
<div id="logindisplay">
<% Html.RenderPartial("LogOnUserControl"); %>
</div>
As a slightly nicer alternative, you can change the RenderPartial call to:
<%= Html.Partial("LogOnUserControl") %>
What’s wrong with this pattern
While this pattern certainly works, there are some issues with it. Let’s look at a few:
Hard coded paths with no intellisense
The first is that you need to refer to them by their path. In the example above, the UC is in the same folder as the master, so you can use a relative path, but in the general case, you would have to refer to it as “~/Views/Shared/LogOnUserControl.ascx”, which gets ugly. If you use T4MVC (plugging my other baby if you don’t mind!), it’ll get rid of the literal string and give you intellisense, but in essence it still works the same way: the View engine gets a literal string and tries to go from there.
Inconsistent with HTML render helpers
Another issue is that even though the UC is basically an HTML render helper, it doesn’t look like one when you call it. Ideally, you really want to call it the same way you call ‘built in’ helpers. e.g. since you can call Html.TextBox(), you should be able to call Html.LogOnUserControl(). In comparison, the RenderPartial call looks painfully complex.
Difficult to pass parameters
Suppose your UC needs to receive parameters from the caller. With Partial/RenderPartial, you have to pass those through a model object, which is painful. You can either rely on untyped data, or create a custom ViewModel type to encapsulate the data you need. In either case, it looks nothing like a call to a render helper like Html.TextBox(…), which takes ‘natural’ parameters.
How we can make this better
The tools at our disposal
There are many little known gems in ASP.NET that allow us to put together a very nice solution that solves all those issues.
The first little known fact is that Web Applications can have an App_Code folder, where all its files get compiled into a single assembly that all pages reference. Of course, the App_Code folder is very well known in Web Sites, but the fact that they can also be used in Web Application Projects (WAPs) is often overlooked.
The second little known gem is that user controls can go in App_Code! Come on, admit it, you didn’t know that. No one knows that! :)
The third one is that you can associate a control builder for an entire User Control (or page), and not just for controls within the page.
And finally, the fourth gem is the ControlBuilder.ProcessGeneratedCode method, which I blogged about a while back. This method lets us modify the code generated for the User Control (or page), which opens up some very powerful possibilities.
What the end result looks like
Instead of giving you all the technical details here (the full sample is attached), let’s look at what the end result looks like. In order to use it, you just need to add a reference to the MvcUserControlHtmlHelpers assembly in the sample (I know, lame name).
Then you can just move your User Control into App_Code, and make a small change to it. e.g. in the example above, you would change the directive from
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
to
<%@ Control Language="C#" Inherits="MvcUserControlHtmlHelpers.UserControlHtmlHelper" ClassName="LogOnUserControl" %>
So basically you change the base type and give it a specific class name.
One you have that, the real fun begins, as you can change Site.master to just have
<div id="logindisplay">
<%= Html.LogOnUserControl() %>
</div>
You now have full intellisense, and the call looks just like a built-in helper. Yeah!
So what about parameters?
Suppose you want to write a User Control that displays Gravatars. You’d put in in App_Code, and write something like this:
<%@ Control Language="C#" Inherits="MvcUserControlHtmlHelpers.UserControlHtmlHelper" ClassName="Gravatar" %>
<script runat="server">
// Declare the paramaters that we need the caller the pass to us
public string Email;
public int Size;
</script>
<%
// Build hash of the email address
// Note: in spite of its name, this API is really just a general MD5 encoder
string hash = FormsAuthentication.HashPasswordForStoringInConfigFile(Email.ToLower(), "MD5").ToLower();
// Construct Gravatar URL
string imageURL = String.Format("http://www.gravatar.com/avatar/{0}.jpg?s={1}&d=wavatar", hash, Size);
%>
<img src="<%= imageURL %>" alt="<%= Email %>" title="<%= Email %>" />
The key new concept here is that you declare the parameters that you want as public fields, and you just use them in your code. Basically, think of this as declaring a method, but without a real method declaration.
And once you have that, things get really nice in your view, where you can now write
<%= Html.Gravatar("foo@bar.com", 80) %>
or if you prefer, you can write
<% Html.RenderGravatar("foo@bar.com", 80); %>
With the same distinction as between Partial() and RednerPartial(). Now for the fun, try hitting F12 (Go To Definition) on one of those methods. You’ll get:
public static class GravatarExtensions {
public static string Gravatar(this HtmlHelper htmlHelper, string Email, int Size);
public static void RenderGravatar(this HtmlHelper htmlHelper, string Email, int Size);
}
What happened in that the special base generated some extension methods to allow you to call the User Control exactly as you would call a ‘built-in’ helper like Html.TextBox.
How does it all work
To pull this magic, it uses a combination of the various things I outlined above. I won’t go into the details since the full source is attached and has enough comments to make it clear what it’s doing. The file you want to look at is UserControlHtmlHelper.cs. I warn you, I had to use a scary trick to get around a CodeDom limitation. Also, there are some edge cases that don’t work yet but could be made to work. At this point, this is just a sample!
Enjoy, and let me know what you think about this pattern.
