Friday, June 11, 2010

MVCContrib – Portable Areas – Part 1

Update: After seeing a post on I have updated my sample code to work with the latest MvcContrib available through NuGet that supports MVC 2.

This is the first of a series of posts on how to use the MVCContib project’s portable areas functionality. Throughout this series we will be building out a ‘search’ application that utilizes portable areas (PAs) to provide the search functionality.  The consuming application is a relatively ‘dumb’ application that is used as a framework to serve up our PAs. 

In this entry I will discuss what libraries are necessary to use portable areas, how to configure your solution and projects and we will end the post with a basic web application runs a search using   The source code for this post can be found at MVCContrib Portable Areas - Example App at


The MVCContrib library which can be downloaded from MVCContrib download at CodePlex.  You will also need MVC 2 installed to be able to run the sample application.  I have built the example application using Visual Studio 2010 – Ultimate as my IDE but I will also include a vs2008 Professional version of the project.

Lets Get Started!

Start up Visual Studio and create a new ASP.NET MVC 2  Web Application to be the consuming application project, I named mine PortableAreas – Consuming App.  Next we need to create a Windows Library project which will be our portable area library, I named mine SearchPA project.   After creating the projects add the following references:

  1. PortableAreas – Consuming App: 
    • MVCContrib.dll
    • And a reference to SearchPA project
  2. SearchPA:
    • MVCContrib.dll
    • System.ComponentModel.DataAnnotations
    • System.Web
    • System.Web.Mvc
    • System.Web.Routing

The SearchPA Project

imageThe layout of this project will be similar to a normal MVC project with a few changes.  The first change is the Bing folder.  Since we are starting off with Bing search all Bing related code will be under this folder.  The Controllers, Models, and Views folders are exactly the same as a normal MVC project.  The Messages folder will contain classes that are used to communicate with the consuming application.  We will talk more about Messages in the next post.  The other difference is the BingRegistration.cs file.

The BingRegistration class is used to register our PA with the consuming application and to inform the view engine about the presence of our routes and views.  It inherits from the class MvcContrib.PortableAreas.PortableAreasRegistration. From this class we override the RegisterArea method which has two parameters: AreaRegistrationContext and an IApplicationBus object.  The AreaRegistrationContext is used to map the Bing related routes.  The IApplicationBus is used for messaging between the PA and consuming app.  For now we are going to ignore the IApplicationBus but we will be used in the next post of the series.  After the routes are added we call a method to register the views with the view engine as you can see below.  The last task we need to do is override the AreaName property to set it to Bing.

There is one thing to keep in mind when you create your registration class, it must be at the base namespace of the controllers.  If the class in not in this namespace the portable area will not work.   

After the registration class has been completed the coding of the controllers and the models are the same.  In our case we will have an HTTP GET and HTTP POST version of an index method in the BingController class.  The contents of these methods are exactly the same as they would be for a ‘normal’ MVC app so I will let you read the code when you download the sample app.

The views in portable area are programmed in the same manner as normal views.  The only difference between the ‘normal’ MVC app’s views and the views in this project are that you must set them up as an embedded resource. Setting up a PA's View as an Embedded Resource  This allows the views to be packaged into the dll and the only thing the consuming application needs to do is add a reference to the SearchPA.dll.  In order to set up the view right-click on the view in the Solution Explorer and select Properties from the menu.  Select the Embedded Resource from the Build Action drop down.  Once that is done your view is ready. And with that we are done with the SearchPA project.


The Consuming MVC App

There are only a couple of additions needed to the MVC application in order to use our SearchPA portable area.  The first is configure the Global.asax file.

The code snippet above is from the global.asax file.  The only addition to this file for Part 1 of this series is the InputBuilder.BootStrap() line.  This line is necessary to initialize the embedded view engine used by the PAs.  In Part 2 we will add code to this method to allow communication bet the PA and consuming application.

The second modification is in the web.config file under the Area’s folder. The Areas/Web.Config file is needed to allow us to display the views that are part of the SearchPA project.  If you do not have this web.config file with the settings displayed below you will receive the error message below. 

Parser Error - Google Chrome

The Areas/Web.config file is used to set the pages attribute validationRequest=”false”.  This allows the the embedded views to be served by the consuming application.

Let’s Try It!

Now that we have everything set up hit F5 and lets run the application. On the home page the Bing Search tab is from the SearchPA project.  Clicking on the ‘Bing Search’ tab is when the code that is part of the PA kicks in.

Home Page - Google Chrome

Here’s the search form.  This form is embedded into the SearchPA.dll.  When I do a search for ‘MVCContrib’ the results will be displayed by the results view in the SearchPA.  The consuming application does nothing but handle the routing.

Home Page - Google Chrome (2)

And here is the results view…

Search Results Page - Google Chrome


Now we have a functional Bing search application using the MVCContrib Portable Area functionality.  We went over what you’ll need (MVCContrib download at CodePlex and ASP.NET MVC 2) and how to setup both projects for a self-contained portable area project.

What’s Next…

In the next article we will go over how PAs can communicate with the consuming application.


No comments:

Post a Comment