What do you get when you mix a legacy VB.NET WebForms application, ASP.NET MVC, and Razor views that are written in C#?  If you said “Pain!” you are quite right.  But what you also get is the ability to leverage your existing investment in VB.NET WebForms while crafting new code in ASP.NET MVC Razory-C# goodness.  In this series of posts, I’m going to tell you how you, too, can concoct a wicked brew that will enable you to do crazy things, such as creating Razor views in C# that utilize VB.NET WebForms master pages, or how you can render MVC action methods from within WebForms markup.

More...

Tags:

Those who have worked with ASP.NET MVC for more than a day have no doubt found themselves repeating common patterns when handling POSTs.  Jimmy Bogard recently blogged one way to simplify your actions.  I handled the same problem in Fail Tracker by implementing a very simple convention (one-model-in, one-model-out) and pushing some responsibility into the application framework.  With this in place, cross-cutting POST handling logic can be pushed out of the action methods, and a common “doh” error (forgetting to perform server-side validation) can be eliminated.  Read on to find out how you can adopt this simple convention in your application framework. 

More...

Tags:

One of my goals with Fail Tracker is to push the “Convention over Configuration” idea as far as you possibly can within the confines of ASP.NET MVC.  I’m obviously biased, but so far I think I’ve been quite successful, and Fail Tracker is probably the most enjoyable codebase I’ve ever worked with.  One convention I recently implemented eliminates the need to decorate view model properties with the DisplayNameAttribute.  The convention says “Pascal cased property names will be intelligently split into strings with spaces.”  Thanks to the infrastructure and pluggable model metadata system that Fail Tracker uses, implementing this convention was quite easy.

By default in ASP.NET MVC 3, a view model like the following:

public class LogOnForm
{
    [Required]
    [EmailAddress]
    public string EmailAddress { get; set; }

    [Required]
    [DataType(DataType.Password)]
    public string Password { get; set; }
}

will generate a field label that looks like this:

Note the missing space between “Email” and “Address.”  This is obviously not what we want.  The way I solved it originally was to apply the DisplayNameAttribute to my view model:

public class LogOnForm
{
    [Required]
    [EmailAddress]
    [DisplayName("Email Address")]
    public string EmailAddress { get; set; }

    [Required]
    [DataType(DataType.Password)]
    public string Password { get; set; }
}

which gives the desired UI:

But this seemed pointless to me.  Why should I have to remember to de-Pascal case my property names every time I created a view model?  Fortunately, I don’t have to.  Here’s the “model metadata filter” (a feature of the Fail Tracker application framework) that achieves the same thing:

public class PascalCaseToDisplayNameFilter : IModelMetadataFilter
{
    public void TransformMetadata(System.Web.Mvc.ModelMetadata metadata, IEnumerable<Attribute> attributes)
    {
        if (!string.IsNullOrEmpty(metadata.PropertyName) && !attributes.OfType<DisplayNameAttribute>().Any())
        {
            metadata.DisplayName = metadata.PropertyName.ToStringWithSpaces();
        }
    }
}

The ToStringWithSpaces extension method is a beautiful piece of Regex that James Kolpack gets credit for:

public static class StringExtensions
{
     public static string ToStringWithSpaces(this string input)
     {
         return Regex.Replace(
            input,
            "(?<!^)" + // don't match on the first character - never want to place a space here
            "(" +
            "  [A-Z][a-z] |" + // put a space before "Aaaa"
            "  (?<=[a-z])[A-Z] |" + // put a space into "aAAA" before the first capital
            "  (?<![A-Z])[A-Z]$" + // if the last letter is capital, prefix it with a space too
            ")",
            " $1",
            RegexOptions.IgnorePatternWhitespace);
     }
}

And that’s all there is to it.  Thanks to the application framework that is baked into Fail Tracker, simply creating the PascalCaseToDisplayNameFilter is all that’s necessary.  I can now remove most of my DisplayNameAttributes from my view models.  Do note though that the convention is quite easy to override.  If I do need to alter the labeling for a property, I can still use the DisplayNameAttribute exactly as before.  All my convention does is provide a more reasonable default without getting in the way of doing something different, which is exactly what a good convention should do.

If you want to know more about how these sorts of conventions are automagically wired up in Fail Tracker, feel free to check out Fail Tracker code.  I do plan to write much more about the application framework itself, but it may be a while as I’m targeting a magazine publication for that.

Tags:

I’m a big fan of pushing common concerns down into the infrastructure and framework of an application so that developers can easily leverage them.  One such concern that may come in a web application is displaying status messages, such as “Record Saved” or “There was a problem communicating with the database”.  My initial attempt at adding such functionality to RageFeed failed to encapsulate the concept of a status message, but after rethinking it and actually modeling it as an explicit action, I came up with an approach that I really like.

The Problem

It’s been a while since I’ve talked about RageFeed, my super-secret (probably will never see the light of day) social networking app, but I do manage to find time for it occasionally.  For a story I was working recently, I needed to display a status message to the user: whether or not their last operation succeeded or failed. 

This is a fairly standard requirement.  One thing I wanted to do though was correctly implement the Post/Redirect/Get pattern.  To summarize, I wanted users to be able to bookmark the form, return to it, refresh the form, etc. without triggering duplicate form submissions.  At the same time though, I wanted to have a status message display on the page, but only immediately after the user submitted the form.  If the user refreshed the page again, the status message should disappear. 

This seemingly tricky requirement is actually quite easy to implement using ASP.NET MVC’s TempData container.  Craig Stuntz has a good post on this poorly-named container.  In a nutshell, it’s a session-baked store that persists its contents across exactly one round-trip to the server.  This makes it ideal for passing data between requests in a Post/Redirect/Get scenario. 

First attempt - TempData

My initial attempt at implementing status messages for RageFeed worked as follows.  First, I added the message to TempData after the post-back, then performed a redirect back to the form:

[HttpPost]
[BindCurrentUserToParam("currentUser")]
public ActionResult Stalk([Bind(Exclude = "Id")]User currentUser, StalkForm stalkForm)
{
    if (!ModelState.IsValid)
    {
        return View();
    }

    var reply = _bus.RequestReply<StalkUserRequest, StalkUserReply>(
        new StalkUserRequest {RequestingUser = currentUser, TargetUsername = stalkForm.Username});

    if (!reply.Succeeded)
    {
        ModelState.AddModelError("Username", GetErrorMessageFor(reply.FailureReason));
        return View();
    }

    TempData.Add("SuccessMessage", string.Format("You are now stalking {0}!", stalkForm.Username));

    return this.RedirectToAction(c => c.Stalk());
}

And here’s how the TempData was handled in the view:

<% if (TempData["SuccessMessage"] != null) { %>
<div class="success-message">
    <%=TempData["SuccessMessage"] %>
</div>
<%} %>
<h1>Stalk Your Friends</h1>
<%using (Html.BeginValidatedForm()) { %>

There were definitely some problems with this approach though.  First, it was not reusable at all. I would have had to reimplement this functionality on any other pages that required status messages.  It was also loosely-typed and used a magic string, neither of which are optimal from a maintenance point of view.  Finally, the code did not clearly express it’s intent.  Someone reading the code may see the message being placed in TempData, but without knowledge of the system, they wouldn’t really know what that’s supposed to do.  The concept of displaying a status message after redirecting is very weakly modeled. 

Final solution – custom view result

I needed to do a few things to overcome these limitations.  First, I had to bake the concept of a status message deeper into the application framework.  I also had to make leveraging the concept easier, and make the code’s intent clearer, which I did by making the action (redirecting with a status message) explicit.  The final controller code looks like this:

[HttpPost]
[BindCurrentUserToParam("currentUser")]
public ActionResult Stalk([Bind(Exclude = "Id")]User currentUser, StalkForm stalkForm)
{
    ...

    return RedirectWithStatusMessage<StalkerController>(c => c.Stalk(), 
            StatusMessage.Success("You are now stalking {0}!", stalkForm.Username));
}

The action now utilizes a custom action result. Under the hood it is still using TempData, but the developer utilizing the concept no longer needs to know or care about that: it’s all handled by the application framework.  For completeness, here’s what the custom action result looks like:

public class RedirectWithStatusMessageResult<T> : MvcContrib.ActionResults.RedirectToRouteResult<T> where T : Controller
{
    public StatusMessage Message { get; private set; }

    public RedirectWithStatusMessageResult(StatusMessage message, Expression<Action<T>> expression) : base(expression)
    {
        Message = message;
    }

    public override void ExecuteResult(ControllerContext context)
    {
        context.Controller.TempData["StatusMessage"] = Message;

        base.ExecuteResult(context);
    }
}

Using a custom action result also makes the code a little easier to test and better separates the concerns, which is a nice bonus.

I also refactored the display of the status message out of the view and into the view master, making it available to any view in the entire application.

Final thoughts

The core problem with my initial solution was that it did not model the concept of redirecting with a status message explicitly.  Instead, it was clumsily specified using the weakly-typed TempData container.  After modeling the concept explicitly and pushing it into the application framework, I gained more readable code, code reuse, improved separation of concerns, and improved testability.  The moral of this story is to always model concepts explicitly, and to push any common concerns into the application framework where application developers can easily take advantage of them.

Tags:

smtp4dev is a great little tool for testing E-mail sending functionality in your application.  Instead of setting up your own SMTP server and fighting your ISPs restrictions, smtp4dev sits in your system tray and acts like a mock SMTP server, catching instead of relying them on to their destination.  You can then view the messages in the E-mail client of your choice.  Unfortunately, developers have to remember to run smtp4dev before they start testing the application.  If you are building an ASP.NET application, here’s a little trick that you can use to start smtp4dev when your application starts up.  NOTE: Big thanks to Rob for suggesting this.

RageFeed has the following folder structure:

Assets
Databases
Libraries
Source
	...
	Web (our MVC application)
	...
Utilities
	smtp4dev.exe

When a developer launches the ASP.NET MVC application, we’d like for smtp4dev to be launched automatically (if it isn’t already running).  Initially I was trying to make this problem harder than it was, exploring ways to perhaps have Visual Studio launch the process, but Rob’s suggestion was to just throw it in in the Application_Start event: 

protected void Application_Start()
{
    ...

    if (ConfigurationManager.AppSettings["Environment"] == "Development")
    {
        try
        {
            Smtp4Dev.Start();
        }
        catch (Exception ex)
        {
            throw new InvalidOperationException("Unable to start Smtp4Dev, check that AppSettings.Environment is set correctly.", ex);
        }
    }
}

This works, but you have to ensure that smtp4dev will only be launched when developers are testing things locally.  I added an AppSetting that contains the current deployment’s environment (ie: Development, Staging, Production, etc).  The app only attempts to run smtp4dev if the current environment is “Development”. 

The actual smpt4dev bootstrapper is quite simple:

public static class Smtp4Dev
{
    public static void Start()
    {
        if (Smtp4DevIsRunning())
        {
            return;
        }

        var path = HttpContext.Current.Server.MapPath("~/") + @"..\..\Utilities\smtp4dev.exe";

        Process.Start(path, "");
    }

    private static bool Smtp4DevIsRunning()
    {
        return Process.GetProcessesByName("smtp4dev.exe").Length > 0;
    }
}

Presto, when the application starts, it will launch smpt4dev if it isn’t already running.

Tags:

While I’m digging my new job, I’ve found myself in the less-than-desirable situation of having to work with WebForms again.  After working almost exclusively with ASP.NET MVC for the better part of three years, the inadequacies of WebForms seem even more prominent.  While running MVC and WebForms in the same applications is easy enough, we’re facing an added complication: our WebForms application was written in Visual Basic.  While you can’t mix-and-match C# MVC and VB WebForms within the same application directly, you can leverage MVCContrib’s Portable Areas to bring the two together, which is what I’ll show you how to do in this post.

Giving credit where credit is due, Jeffery Palermo already described how you can leverage MVCContrib’s Portable Areas within a WebForms application.  Unfortunately, his sample doesn’t work (it appears to depend on an older MVC 2 CTP), and his post omits several important details.  Jeffery’s post also focuses on the creation of reusable modules whereas my interest is bringing C# into our VB project as seamlessly as possible.  Hopefully this guide, even though it’s focus is on bridging the C#-VB divide, will be useful to anyone that’s envious of MVC but stuck with a substantial amount of WebForms code.

Create a new solution

To get started, let’s go ahead and create a new empty solution in Visual Studio 2010.

Next, add a Visual Basic WebForms application.  When you run the application, you should see something like this:

Note that I modified my master page to make it clear that the master page is a WebForms master page.  You’ll understand why later. 

Add MVC Support

As I mentioned, there’s plenty of information on the web about adding MVC support to an existing WebForms application.  The two play nicely side-by-side in the same project.  First, add references to the required assemblies: System.Web.Mvc, System.Web.Routing, and System.Web.Abstractions.  The last one is probably not strictly required, but I added it anyway. This is also a good time to go ahead and add a reference to MVCContrib.  Note that for the approach I’m going to describe to work, you will need to use a build based on the trunk and not the older release build available from CodePlex.  You can pick up a nightly build from the MVCContrib TeamCity build server (be sure to grab artifacts from a successful build).

Next, you need to update your web.config file.  Replace the default compilation section with the following:

<compilation debug="true" targetFramework="4.0">
    <assemblies>
        <add assembly="System.Web.Abstractions, Version=4.0.0.0, 
             Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
        <add assembly="System.Web.Routing, Version=4.0.0.0, 
             Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
        <add assembly="System.Web.Mvc, Version=2.0.0.0, 
             Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
    </assemblies>
</compilation>

Also add a pages element with the namespaces shown:

<pages>
    <namespaces>
        <add namespace="System.Web.Mvc"/>
        <add namespace="System.Web.Mvc.Ajax"/>
        <add namespace="System.Web.Mvc.Html"/>
        <add namespace="System.Web.Routing"/>
    </namespaces>
</pages>

This step probably isn’t necessary (depends on how you are deploying your application), but for good measure, go ahead and add the MVC HTTP handler and a binding redirect for MVC 1:

<httpHandlers>
    <add verb="*" path="*.mvc" 
        validate="false" type="System.Web.Mvc.MvcHttpHandler,
        System.Web.Mvc, Version=2.0.0.0, Culture=neutral, 
        PublicKeyToken=31BF3856AD364E35"/>
</httpHandlers>

<runtime>
    <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
        <dependentAssembly>
            <assemblyIdentity name="System.Web.Mvc" publicKeyToken="31bf3856ad364e35" />
            <bindingRedirect oldVersion="1.0.0.0" newVersion="2.0.0.0" />
        </dependentAssembly>
    </assemblyBinding>
</runtime>

Next up, we need to add some code in our Global.asax file:

Shared Sub RegisterRoutes(ByVal routes As RouteCollection)
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}")

    ' MapRoute takes the following parameters, in order:
    ' (1) Route name
    ' (2) URL with parameters
    ' (3) Parameter defaults
    routes.MapRoute( _
     "Default", _
     "{controller}/{action}/{id}", _
     New With {.controller = "Home", .action = "Index", .id = UrlParameter.Optional} _
    )

End Sub

Sub Application_Start()
    AreaRegistration.RegisterAllAreas()

    PortableAreaRegistration.RegisterEmbeddedViewEngine()

    RegisterRoutes(RouteTable.Routes)
End Sub

The RegisterRoutes procedure is pretty standard, and AreaRegistration.RegisterAllAreas is boiler-plate MVC 2.0 stuff.  The other bit is important though: PortableAreaRegistration.RegisterEmbeddedViewEngine will register a special view engine that allows the application to consume Portable Areas.

The final thing we need to do is add some special folders that are needed by MVC: the Areas folder and the Views folder.  For now, go ahead and add a view master page at ‘~/Views/Shared/Site.master’.  I’d recommend copying both the Views and Areas folders from an existing ASP.NET MVC application (be sure to remove any of the views you don’t need, but save the Site.master one).  Once you’re finished, you should have a structure like this:

At this point, the WebForms project is ready to consume our C# ASP.NET MVC Portable Area.  All we need to do is create one!

Creating a Portable Area

Most people recommend that you create a regular class library to serve as the host of your portable area, but there are some disadvantages to that approach.  First, you will have to re-add all the necessary MVC references in order to build controllers and views.  Second, you will lose all the Visual Studio tooling for MVC (as well as Resharper extensions for MVC projects).  In light of that, I recommend adding a regular-old ASP.NET MVC 2 (C#) application to your solution.  An MVC project is essentially a web application project, which means it produces a single DLL that you can reference from another application. 

After adding your MVC 2 project, you can remove all of the following: web.config files, Global.asax, views (but leave ‘~/Views/Shared/Site.master’ for now), controllers, models, script files, and CSS files. Save your project at this point, then unload it so that you can edit it. 

Edit project file, and add the following line to end of script before closing ‘project’ tag:

<Target Name="BeforeBuild">
  <ItemGroup>
    <EmbeddedResource Include="**\*.aspx;**\*.ascx;**\*.gif;**\*.css;**\*.js;**\*.png;**\*.jpg" />
  </ItemGroup>
</Target>

One of the requirements for building a Portable Area is that the views and any resources they depend on must be embedded in the assembly.  You can do this manually using the Properties pane in Visual Studio, but it’s easy to forget this critical step.  The MSBuild snippet above automatically embeds your views and any common content files. 

With your project file now modified, go ahead and reload it, then add a reference to MVCContrib.  We’ll add a “HelloWorld” controller to our project:

public class HelloWorldController : Controller
{
    public ViewResult Index()
    {
        return View();
    }

}

And we’ll create the corresponding view for our Index action:

<%@ Page Title="Hello from C#!" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Hello from C#!
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Hello, World!</h2>
    <p>This is a view from a portable area created in C#!</p>
    <p>The current time is <%=DateTime.Now.ToShortTimeString() %></p>

</asp:Content>

When creating the view, go ahead and specify the master, but note that at runtime the view will actually use the master from the parent project, not the Portable Area project.  We left the master view in the Portable Area project so that the views we create will have the correct content placeholder IDs (more on this later). 

The last thing we need to do to complete our portable area is add a registration class:

public class HelloWorldRegistration : PortableAreaRegistration
{
    public override string AreaName
    {
        get { return "HelloWorld"; }
    }

    public override void RegisterArea(AreaRegistrationContext context, IApplicationBus bus)
    {
        context.MapRoute("HelloWorld", "helloworld/{action}",
                         new { controller = "helloworld", action = "index" });

        RegisterAreaEmbeddedResources();
    }
}

Registration is fairly simple: we give our area a name, map a route to it, and call a base class method to register all the embedded resources for our Portable Area.

Visual Basic: Say Hello to C#!

So far we have a Visual Basic WebForms application and  C# MVC application, but the two aren’t playing in the same sandbox yet.  In the WebForms application, add a project reference to the C# MVC application.  Visual Studio will kindly let us do this because an MVC project is really just a class library project underneath all the bells and whistles.  

Build and launch your WebForms app.  It should take you to Default.aspx, which is a regular WebForms page.  Now, try navigating to the controller we created in C# by appending “/helloworld” to the URL.  If I’ve described the steps correctly, you should be greeted with something like the following:

Our WebForms app is routing requests to the controller we defined in C#, and the embedded view engine is returning the corresponding view.  Do note, though, that our view is being rendered using our VB MVC view master page, and not the view master page from our C# Portable Area.  That’s by design: Portable Areas are designed to be plugged in and reused within an application.  In this case though, we’d actually like for our C# view to use the same WebForms master page as our existing WebForms content; we don’t want to maintain two distinct master pages.  It turns out that you can do this quite easily.

C# View, Meet VB WebForms Master Page

Examining our view again, we see that it provides content for two placeholders: TitleContent and MainContent.  These placeholders match the standard MVC view master page that we added to our WebForms project under ‘~/Views/Shared/Site.Master’.  If you open up the WebForms master at ‘~/Site.master’ though, you’ll notice that it defines only HeadContent and MainContent.  Let’s add a TitleContent placeholder so that our views can still define their own page titles in the usual MVC way:

<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server"/></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>

Next, go back our view in the Portable Area, and change its MasterPageFile property to ‘~/Site.master’.  If you are using Resharper, you’ll notice errors indicating that there’s no master page file at that location and that your content placeholder IDs are no longer valid.  That’s because as far as Resharper (and Visual Studio) know, you are now referencing a master that doesn’t exist.  The only view master page in the C# project is at ‘~/Views/Shared/Site.master’.  All we need to do is move the master from it’s current location to the root of our C# project, and the errors will go away.  When we create new views in the future, we can reference the view master page at its new location, and our views will be generated with the correct path for our WebForms master.

Rebuild and refresh your application, and you’ll see that the Index view from our HelloWorld controller is now being rendered within the WebForms master, title-and-all:

Keep in mind that what I’ve described is a proof-of-concept only; I have not tried applying this to a real project yet, and there are likely to be issues with this approach.  If you do run into issues, I’d like to hear about them.  If you want to checkout my code, you may download the sample project here.

Tags:

The TestControllerBuilder in MVCContrib’s TestHelper library has a hard dependency on Rhino Mocks.  I’m not a big fan of Rhino Mocks, I prefer to use Moq, and while it’s not a big deal to reference two separate mocking libraries, I’d rather just have one mocking library in my project.  I’m working on a patch to address this open workitem in MVCContrib.  I don’t want to create a hard reference to Moq, so that means I have to access Moq, and all it’s generic types and methods, using reflection.  This post presents my Moq proxy class, based on a similar idea from StructureMap’s auto-mocking container.

The TestControllerBuilder in MVCContrib.TestHelper is a handy class for attaching mocks to an MVC Controller class to facilitate testing.  Unfortunately, it uses Rhino Mocks, which means you must include Rhino Mocks in your projects in order to leverage it.  My test projects already reference Moq (my preferred testing framework), and I don’t like the idea of carrying around two libraries that provide the same capabilities.  I’m not the only one, as there has been an open work item to address this issue for quite some time now. One of the nice things about Open-Source Software is that instead of wasting energy complaining about something, I can try to fix it. 

I have three main goals for the fix.  First, it should not be a breaking change.  Existing consumers of the API should be unaffected.  Second, it should not create a hard reference between MVCContrib and Moq.  MVCContrib is already using Rhino Mocks for its own testing, and I’m trying to remove the need for referencing two mocking frameworks in my own projects, so it would be a bit ironic if I required MVCContrib to pick up a dependency on Moq.  Finally, I want it to be very simple to swap out the mocking library; in fact, I’d like it to automatically use whichever library is available.  I’d even like it to be pluggable so that a different mocking library could be plugged in if desired.

I’m not 100% tied to this approach yet (I’m still thinking of this more as a spike for now), but I’m using the strategy pattern to decouple TestControllerBuilder from the mocking library.  There are other places in MVCContrib’s TestHelper library that are doing mocking, so I will probably change my approach, but this worked well as a proof-of-concept.  TestControllerBuilder now accepts an IControllerBuilderStrategy that handles the actual mocking and any other library-specific setup.  The interface is quite simple:

public interface IControllerBuilderStrategy 
{
    void Setup(TestControllerBuilder testControllerBuilder);
}

By default, TestControllerBuilder uses the RhinoMocksControllerBuilder (this satisfies my first goal: existing consumers of the API will get the exact same behavior as before).  Because MVCContrib.TestHelper has a direct dependency on Rhino Mocks, RhinoMocksControllerBuilder is a straight-forward refactoring of TestControllerBuilder’s mock-dependent logic into a new class:

public class RhinoMocksControllerBuilder : IControllerBuilderStrategy 
{
    protected MockRepository _mocks = new MockRepository();

    public void Setup(TestControllerBuilder testControllerBuilder)
    {
        var httpContext = _mocks.DynamicMock<HttpContextBase>();

        var request = _mocks.DynamicMock<HttpRequestBase>();
        var response = _mocks.DynamicMock<HttpResponseBase>();
        var server = _mocks.DynamicMock<HttpServerUtilityBase>();
        var cache = HttpRuntime.Cache;

        SetupResult.For(httpContext.Request).Return(request);
        SetupResult.For(httpContext.Response).Return(response);
        SetupResult.For(httpContext.Session).Return(testControllerBuilder.Session);
        SetupResult.For(httpContext.Server).Return(server);
        SetupResult.For(httpContext.Cache).Return(cache);

        SetupResult.For(request.QueryString).Return(testControllerBuilder.QueryString);
        SetupResult.For(request.Form).Return(testControllerBuilder.Form);
        SetupResult.For(request.AcceptTypes).Do((Func<string[]>)(() => testControllerBuilder.AcceptTypes));
        SetupResult.For(request.Files).Return((HttpFileCollectionBase)testControllerBuilder.Files);

        Func<NameValueCollection> paramsFunc = () => new NameValueCollection { testControllerBuilder.QueryString, testControllerBuilder.Form };
        SetupResult.For(request.Params).Do(paramsFunc);

        SetupResult.For(request.AppRelativeCurrentExecutionFilePath).Do(
            (Func<string>)(() => testControllerBuilder.AppRelativeCurrentExecutionFilePath));
        SetupResult.For(request.ApplicationPath).Do((Func<string>)(() => testControllerBuilder.ApplicationPath));
        SetupResult.For(request.PathInfo).Do((Func<string>)(() => testControllerBuilder.PathInfo));
        SetupResult.For(request.RawUrl).Do((Func<string>)(() => testControllerBuilder.RawUrl));
        SetupResult.For(response.Status).PropertyBehavior();
        SetupResult.For(httpContext.User).PropertyBehavior();

        _mocks.Replay(httpContext);
        _mocks.Replay(request);
        _mocks.Replay(response);

        testControllerBuilder.HttpContext = httpContext;
    }
}

Things get a little trickier for the Moq version.  Since TestHelper can’t reference Moq directly, it can’t use the API directly.  I decided to use the proxy pattern after reviewing how StructureMap’s AutoMocking Container handles a similar situation.  The builder itself is still very straight forward.  Though the proxy’s methods don’t map one-to-one to the underlying Moq API, they are pretty close:

public class MoqControllerBuilder : IControllerBuilderStrategy
{
    private static Exception _loadException;
    private static MoqProxy _proxy;

    static MoqControllerBuilder()
    {
        try
        {
            _proxy = new MoqProxy();
        }
        catch (Exception ex)
        {
            _loadException = ex;
        }
        
    }

    public void Setup(TestControllerBuilder testControllerBuilder)
    {
        if (_proxy == null)
        {
            throw new InvalidOperationException("Cannot use MoqControllerBuilder because an error occured while loading Moq.",
                                                _loadException);
        }

        var httpContext = _proxy.DynamicMock<HttpContextBase>();

        var request = _proxy.DynamicMock<HttpRequestBase>();
        var response = _proxy.DynamicMock<HttpResponseBase>();
        var server = _proxy.DynamicMock<HttpServerUtilityBase>();
        var cache = HttpRuntime.Cache;

        httpContext.ReturnFor(c => c.Request, request.Object);
        httpContext.ReturnFor(c => c.Response, response.Object);
        httpContext.ReturnFor(c => c.Session, testControllerBuilder.Session);
        httpContext.ReturnFor(c => c.Server, server.Object);
        httpContext.ReturnFor(c => c.Cache, cache);
        httpContext.SetupProperty(c => c.User);

        request.ReturnFor(r => r.QueryString, testControllerBuilder.QueryString);
        request.ReturnFor(r => r.Form, testControllerBuilder.Form);
        request.ReturnFor(r => r.Files, (HttpFileCollectionBase)testControllerBuilder.Files);
        request.CallbackFor(r => r.AcceptTypes, () => testControllerBuilder.AcceptTypes);
        request.CallbackFor(r => r.Params, () => new NameValueCollection { testControllerBuilder.QueryString, testControllerBuilder.Form });
        request.CallbackFor(r => r.AppRelativeCurrentExecutionFilePath, () => testControllerBuilder.AppRelativeCurrentExecutionFilePath);
        request.CallbackFor(r => r.ApplicationPath, () => testControllerBuilder.ApplicationPath);
        request.CallbackFor(r => r.PathInfo, () => testControllerBuilder.PathInfo);
        request.CallbackFor(r => r.RawUrl, () => testControllerBuilder.RawUrl);
        response.SetupProperty(r => r.Status);

        testControllerBuilder.HttpContext = httpContext.Object;
    }
}

The *real* fun happens in the proxy class. First is the MoqProxy class, which handles dynamically loading the Moq API and, using reflection, creating mock objects:

public class MoqProxy
{
    private Type _mockOpenType;

    public MoqProxy()
    {
        Assembly Moq = Assembly.Load("Moq");
        _mockOpenType = Moq.GetType("Moq.Mock`1");

        if (_mockOpenType == null)
        {
            throw new InvalidOperationException("Unable to find Type Moq.Mock<T> in assembly " + Moq.Location);
        }
    }


    public MockProxy<T> DynamicMock<T>()
    {
        return new MockProxy<T>(_mockOpenType.MakeGenericType(typeof(T)));
    }
}

The MockProxy<T> class is the proxy for the underlying Mock<T> type, which is the class used for setting up expectations.  This was a tricky class to implement due to the heavy use of generic parameters, but in the end, I managed to get it working:

public class MockProxy<T>
{
    private readonly Type _mockType;
    private PropertyInfo _objectProperty;
    private object _instance;

    public T Object 
    { 
        get
        {
            return (T)_objectProperty.GetValue(_instance, null);
        }
    }

    public MockProxy(Type mockType)
    {
        _mockType = mockType;
        _instance = Activator.CreateInstance(_mockType);
        _objectProperty = mockType.GetProperty("Object", _mockType);
    }

    private MethodInfo GetSetupMethod<TResult>() {
        var openSetupMethod = _mockType.GetMethods().First(m => m.IsGenericMethod && m.Name == "Setup");
        return openSetupMethod.MakeGenericMethod(typeof(TResult));
    }

    public void ReturnFor<TResult>(Expression<Func<T, TResult>> expression, TResult result)
    {
        var setupMethod = GetSetupMethod<TResult>();
        var setup = setupMethod.Invoke(_instance, new object[] { expression });
        var returnsMethod = setup.GetType().GetMethod("Returns", new [] {typeof(TResult)});
        returnsMethod.Invoke(setup, new object[] { result});
    }

    public void CallbackFor<TResult>(Expression<Func<T, TResult>> expression, Func<TResult> callback)
    {
        var setupMethod = GetSetupMethod<TResult>();
        var setup = setupMethod.Invoke(_instance, new object[] { expression });
        var returnsMethod = setup.GetType().GetMethod("Returns", new[] { typeof(Func<TResult>) });
        returnsMethod.Invoke(setup, new object[] {callback});
    }

    public void SetupProperty<TProperty>(Expression<Func<T, TProperty>> expression)
    {
        var openSetupMethod = _mockType.GetMethods().First(m => m.Name == "SetupProperty" && m.GetParameters().Length == 1);
        var setupMethod = openSetupMethod.MakeGenericMethod(typeof(TProperty));
        setupMethod.Invoke(_instance, new object[] {expression});
    }
}

Reflection is somewhat limited when it comes to working with overloaded generic methods.  I ended up using this approach for finding the desired overload via LINQ. 

With all the pieces in place, the TestControllerBuilder unit tests now pass when using either Rhino Mocks or Moq.  Again, this isn’t my final solution, I’m still waiting on feedback on a few possible approaches to decide what’s going to actually be implemented, but the MoqProxy is probably going to be a key piece of whatever solution I move forward with.

Tags:

Just a quick post to hopefully save others some time.  ASP.NET MVC 2.0 has built-in support for client-side validation, but it doesn’t work with the expression-based BeginForm HtmlHelper methods that are available in the ASP.NET MVC Futures assembly.  I also don’t like that I have to call a separate helper method to set my form up for validation.  To address these two limitations, I wrote my own extension method:

public static class ValidationHelper
{
    private const string LAST_FORM_ID_KEY = "_lastFormId";

    public static MvcForm BeginValidatedForm<TController>(this HtmlHelper helper, Expression<Action<TController>> action)
            where TController : Controller
    {
        helper.EnableClientValidation();

        var id = GetNextFormId(helper);

        TagBuilder builder = new TagBuilder("form");
        string str = helper.BuildUrlFromExpression(action);
        builder.MergeAttribute("action", str);
        builder.MergeAttribute("method", "POST");
        builder.GenerateId(id);
        helper.ViewContext.HttpContext.Response.Write(builder.ToString(TagRenderMode.StartTag));

        var form = new MvcForm(helper.ViewContext);

        helper.ViewContext.FormContext.FormId = id;

        return form;
    }

    private static string GetNextFormId(HtmlHelper helper)
    {
        int count = (int) (helper.ViewContext.HttpContext.Items[LAST_FORM_ID_KEY] ?? 0);
        count++;

        helper.ViewContext.HttpContext.Items[LAST_FORM_ID_KEY] = count;

        return string.Format("form{0}", count);
    }
}

Now you can simply do like this:

<h1>Sign-up</h1>

<p>Signing up is easy <em>and</em> free!</p>

<% using (Html.BeginValidatedForm<SignupController>(c => c.Create(null)))
{ %>
    <fieldset>
        <div>
            <p>1) Choose a username:</p>
            <%=Html.EditorFor(m => m.Username) %><%=Html.ValidationMessageFor(c => c.Username) %>
        </div>
        <div>
            <p>2) What's your E-mail address? <span class="note">(<a href="#">Why do we need this?</a>)</span></p>
            <%=Html.EditorFor(m => m.Email)%><%=Html.ValidationMessageFor(c => c.Email) %>
        </div>
        <%=Html.SubmitButton("submit", "Start Raging Now!") %>
    </fieldset>
<%} %>

and get client-side validation (assuming you’ve set everything else up correctly).

Tags:

The prevailing practice for moving data between the controller and the view in ASP.NET MVC applications is to utilize a view model.  While using a view model from within the view’s ASPX page is quite easy, utilizing it from JavaScript can be more complex.  While JavaScript blocks declared inline on the view page can easily consume values from the model, external script files cannot.  In order to take advantage of script batching and minimization, you should avoid the use of inline script blocks and instead use external JavaScript files (.js).  What happens when you need to reference a value from the view model in your JavaScript though?  Since the JavaScript files are not (by default) processed by the ASP.NET pipeline, it isn’t possible for them to leverage the Model; the Model exists server-side, while JavaScript is processed client-side. 

I’ve struggled with this limitation since the first preview release of ASP.NET MVC.  Here are a couple of the approaches that I tried (and hated):

Place scripts in partial views

Instead of following best-practices and placing JavaScript in an external script file, scripts can instead be placed in partial views.  This simplifies the main view by encapsulating the script, and it does allow the script to be re-used.  It also allows the script to easily reference values from the view model. 

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<AwesomeViewModel>" %>

<script type="text/javascript">
    
    alert('Hello from the view model: <%=Model.Hello%>');
    
</script>

The downside to this approach is that the script cannot be easily minimized or combined, and it can’t be cached by the browser since it is actually rendered inline in the final markup produced by the view. 

Pass view model properties through an initialization function

Another approach that I’ve used is to define an initialization function within my external JavaScript files.  Any values that are needed by the script can be extracted from the model within the main view, then passed to the external JavaScript through the initialization function.

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<AwesomeViewModel>" %>
...
<script type="text/javascript" src="ExternalScript.js"></script>
<script type="text/javascript">
    var name = "<%=Model.Name %>";
    ExternalScript_Init(name);
</script>
...

//Contents of ExternalScript.js
ExternalScript_Init(name) {
    alert("Hello from JavaScript: " + name);
}

This approach is also less than ideal.  Any values the script requires must be manually extracted from the view model, which makes maintenance more of a headache than it should be. 

The ideal solution

The previous two approaches “work”, but they each have drawbacks.  The ideal solution would allow the model to be easily consumed by external JavaScript files within a minimal amount of manual work.  Adding a new property to the view model should require zero JavaScript in order to expose the new property for use by scripts.  It turns out that this is actually quite easy to do….

The right way: serialize the model to JavaScript!

.NET 3.5 introduced the JavaScriptSerializer class for serializing objects to/from JSON. With it, most .NET types can be easily converted into a form that’s easily consumable by JavaScript.  Scott Gu introduced a simple ToJSON extension method on his blog which can be used to transform a view model into JSON.  When the output of this method is assigned to a JavaScript variable, the properties of the view model effectively become available to client-side script (note that methods defined on the view model, if any, are ignored by the JavaScriptSerializer). 

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<AwesomeViewModel>" %>
...
    <script type="text/javascript">
        var Model = <%=Model.ToJson() %>
        //If needed, new properties can be added to the model, such as URLs for AJAX requests:
        Model.MyAjaxMethod = '<%=Html.BuildUrlFromExpression<MyController>(c => c.DoAjaxyThing()) %>';        
    </script>

The above code block should appear before any scripts that wish to access properties from the view model, which can reference view model properties easily:

<script type="text/javascript">
    
    alert("Hello from the JSON view model:" + Model.Hello);
    
</script>

This is a big improvement over the other two approaches I’ve tried (at least in my opinion), but it still requires me to perform this mundane serialization task on each view.  An easy improvement is to move it to the master page:

<script type="text/javascript">
    var Model = <%=Model != null ? Model.ToJson() : "{}" %>;
</script>

Now every view that has a view model will automatically have a Model object available.

Thoughts?  Suggestions?  Anyone found a better solution that I’ve just overlooked somehow?

Tags:

I really don’t know if I should be proud or embarrassed by what I just implemented.  I’m going to go with “embarrassed”.  If anyone sees a better way to do it, let me know.

The Problem

I have a multi-tab interface (via jQuery UI  tabs).  The view is strongly-typed and has a view model, so it’s decoupled from the domain objects that are used to populate it.  The view is rendered using the MVC Future expression-based input builders, so instead of Html.TextBox(“Blah”), I’ve got Html.TextBoxFor(m => m.Property).  For those that don’t know, the expression-based builders allow you to bind to your view model using expressions instead of magic strings, so you get compile-time safety, rename support, etc.  Anyway, two of the tabs are *almost exactly* the same except for their labels and the underlying object that they’re bound to.  Basically, the original view model looks like this:

public class MySuperViewModel
{
    WidgetViewModel Tab1 { get; set; }
    
    WidgetViewModel Tab2 { get; set; }
}

What I want to do is render the same UI for both FirstTab and SecondTab, have both wired up by ASP.NET automagically, and not have to repeat a bunch of markup.

What doesn’t work

My first though was “oh, I’ll just make a strongly-typed partial view for WidgetTabViewModel, and render it twice!”  That doesn't work though because of how the expression-based input builders work.  They build their IDs based on the expression you pass in.  If I was going to take this approach, inside the partial for the tabs I would be calling this ‘Html.TextBoxFor(m => m.WidgetName)’, which will generate the following markup:

<input name=”WidgetName” … ></input>

Note that there’s nothing in the markup that’s going to let it ASP.NET MVC know where to wire things up in relation to the original view model.  Not good. This is what it needs to look like:

<input name=”Tab1_WidgetName” …></input>

My next thought was “well, I’ll just make a special view model to drive the tab partial view, and pass the expressions in via the view model”, like so:

public class TabViewModel
{
    public Expression<Func<MySuperViewModel, string>> Name;
    
    public Expression<Func<MySuperViewModel, string>> Value;
}

...
//Does not compile, TextBoxFor is actually TextBoxFor<Expression<Func<TabViewModel,object>>
<%=Html.TextBoxFor(Model.Name) %> 

This almost works, but unfortunately the expression-based input builders are defined on HtmlHelper<TModel>, where TModel is your view model type, meaning that the expressions I passed in from the top-level view do not match what TextBoxFor expects as input. 

My horrendous hack/brilliant solution

The fundamental problem is that I want to bind my inputs to expressions as if they were built from the top-level view using its HtmlHelper.  My solution is simple: I just pass in the top-level view’s HtmlHelper view the view model:

public class TabViewModel
{
    public Expression<Func<MySuperViewModel, string>> Name;
    
    public Expression<Func<MySuperViewModel, string>> Value;
    
    //HOT (Hack Or Not)?
    public HtmlHelper<MySuperViewModel> Helper;
}

In the partial view, I can render my inputs and get the correct binding names for MVC using ‘<%=Model.Helper.TextBoxFor(Model.Name))’.  In the master view, I can render the partial view using something like this:

<% Html.RenderPartial("MyTab", new TabViewModel
{
    Name = m => m.Tab1.Name,
    Value = m => m.Tab1.Value,
    Label = "Tab 1",
    Helper = Html
}); %>

I was sort-of surprised when this worked, but it did, and it saved me from having to duplicate about 100 lines of markup.  It still feels dirty though, so if anyone sees a good way to get around this (and I really hope there is), let me know. 

Tags: