Using Controls with ASP.NET MVC ViewPage

Jeffrey Richardson — Sat, 07 Mar 2009 10:16:08 GMT

For the last few months, I've been attempting to create WebForm controls specifically designed to work well with ASP.NET MVC and the ViewPage (as well as ViewMasterPage and ViewUserControl). Yesterday, as I near finish with my implementation, I find that Microsoft has already done so themselves. However, on second look, it's not finished, though does appear to be a great start. As I debate whether to finish and bugproof my own implementation, choose to use Microsoft's implementation when they finally have time to finish it, or simply derive Microsoft's current implementation to better fit my needs, I'll describe what I've come up with so far, as a form of public comparison.

First, my implementation exists in the erroneously named "MvcExtras.Expressions" assembly. This is a historic naming back when I was attempting to implement everything using only expression builders. While expression builders are still used, some of the work has been relocated to controls. I've only implemented four controls; however, combined with the provided expression builders, I'm able to express everything that Microsoft's controls can express, with the exception of a repeater and a drop down list, and express many things that Microsoft's implementation yet cannot.

Controls:

Input: This control represents the <input /> HTML element, in all it's types. By utilizing the Data property along with one of the InputExpressionBuilders, data from the ViewData can be easily obtained.
Form: This control represents the <form> HTML element. This control is of rare use when using the "self post" design model typically used in ASP.NET MVC. This is mainly a workaround to enable using the UrlRouteExpressionBuilder to set the action attribute of a <form> element, as <form runat="server"> creates an HtmlForm and all of it's WebForm magic that is typically undesirable in ASP.NET MVC.
ValidationMessage: This control represents the HtmlHelper.ValidationMessage methods. It contains similar implementation, and results in similar or same behaviour.
ValidationSummary: This control represents the HtmlHelper.ValidationSummary method. See above.

Expression Builders:

InputIdExpressionBuilder: Sets the id, name, and value of an Input control based on the name specified in the expression. Also, styles the Input control if an error exists in the ModelState.
CheckIdExpressionBuilder: Sets the id and name of the 'checkbox' type Input control, and specified if the checkbox should be checked.
InputNameExpressionBuilder, CheckNameExpressionBuilder: Same as above, except the id is not set.
RadioExpressionBuilder: Sets the name and value of the 'radio' type Input control, and determines from the ViewData if the radio should be checked.
UrlRouteExpressionBuilder: Generates a URL based on route values specified.
UrlRouteWithCategoryExpressionBuilder: Same as above, but copies over the "category" route value along with the "controller" and "action" if not explicitly specified.
ViewDataExpressionBuilder: Represents the ViewData.Eval method. This expression builder is a simple frontend to the ViewData.Eval method.

These controls and expression builders do not rely on any external code to work, and the expression builders were built with no-compile pages in mind. Usage is simple as well: the InputData based expression builders simply are assigned to the Input.Data property, while all the others can be used on any property of a string type.

Example:

<asp:Literal runat="server" Mode="Encode" Text="<%$ViewData: Title %>" />

<mvc:ValidationSummary runat="server" />

<mvc:Input runat="server" type="text" Data="<%$Id: username %>" />

<mvc:ValidationMessage runat="server" Field="username">Username is invalid</mvc:ValidationMessage>

<mvc:Input runat="server" type="password" Data="<%$Id: password %>" />

<mvc:Input runat="server" type="checkbox" Data="<%$Check: rememberMe %>" />

<mvc:Input runat="server" type="radio" Data="<%$Radio: status, invisible %>" />

<mvc:Input runat="server" type="radio" Data="<%$Radio: status, away %>" />

<mvc:Input runat="server" type="radio" Data="<%$Radio: status, online %>" />

<a runat="server" href="<%$Url: action=About %>">About</a>

<a runat="server" href="<%$Url: category=Account, controller=Auth, action=LogOn %>">Sign On</a>

The above is not exactly a real world example one would use, but it should explain how everything fits together.

I would release a binary, but it's in an unfinished state at the moment, a few things I've mentioned above are in a state of half implementation; all the right flags get checked, but some are ignored currently when rendering. In the meantime, if I decide my current implementation is worthy of continuing, I'll plan on finishing it up, as well as providing the binary here for others to use as well.

Web Controls

Using Controls with ASP.NET MVC ViewPage

Controls:

Expression Builders:

Example: