An MVC Portable Area is really just a dll that contains the views, controllers, scripts, etc… needed to use in a website that is either a Web Forms website or an MVC website. I will cover the MVC website here.
Why Use One?
I have used portable areas in many projects since they came out. A developer can use them for a reusable widget or a complete engine. I have actually used them for both.
I am going to assume that you have a new project. It is just as easy to add a portable area to an existing solution.
First, let’s create a blank solution. Click on New Project, then select Other Project Types –> Visual Studio Solutions. Name it PortableAreaDemo
Next, right click on the solution in Solution Explorer and Add New Project. Choose Web and ASP.NET MVC 3 Application. I Named mine PortableAreaDemo.Mvc.
Choose Internet Application on the next screen:
Next, add another project. This is also going to be a ASP.NET MVC 3 Web Application. I called mine PortableAreaDemo.PortableAreas. Note, you might get an error here or might not see your solution node. If so, follow this link: http://stackoverflow.com/questions/7457935/solution-folder-not-showing-in-visual-studio-2010-how-can-i-make-it-visible
This time, just make it an empty application.
Hopefully you see something like this:
Next, go ahead and delete the Controllers, Views, Models, Scripts, and Content folders under the PortableAreas project. Also, remove the Global.asax inside that project as well.
Now, right click on the PortableAreas project and add an Area. Let’s call it Demo. This should produce something like this:
Notice now that it created an AreaRegistration child called DemoAreaRegistration. We will need to now go and add a Library Package Reference to this. Right click on References under the PortableAreas project –> Add Library Package Reference. Then click on Online –> All. Wait for it to load, then type MvcContrib in the search box. Install the package.
Now go back into DemoAreaRegistration.cs and change the parent name to PortableAreaRegistration.
Move the routes out into a private method called RegisterRoutes. By default, if you were to call the base.RegisterAreas here, it would set up the EmbeddedResource. However, your routes get set up in the wrong order and you will lose control once your portable area gets more sophisticated. I would strongly suggest not using the built in ones here and registering them yourself. Override the RegisterArea that passes the IApplicationBus instead of the one that just has the context:
Then add a private method called RegisterRoutes and add the following routes into it:
When all is done, your registration class should look like this:
So a little explanation of this. When your application first starts, there is a little piece of code in Application_Start that will end up calling this Portable Area Registration. Area routes should always be called before your normal routes to give it a chance to find the Area name. Otherwise, the default route would think the Area name was a controller name. Here is the piece of code that calls the portable area registration:
Ok, so now let’s create a controller in the Demo area. Let’s call it “World”. Now let’s add an action to it. Can you guess the name? Yep, that’s right “Hello”. Create a Razor partial View for it. Type “Hello World” in the view. When all is said and done, you should look something like this:
So in order to make it embedded, right click on the Hello.cshtml file and choose Properties. Change the Build Action to Embedded Resource.
Next, add the reference for the PortableAreas Project to the main Mvc project.
Now add a folder called Areas under the Mvc project. Open the folder Views under the Mvc project and copy the Web.config up to the Areas folder that you just created.
You should now look like this:
So, why are we adding the folder called Areas and a web.config into it? It is because when the dll gets put into the project, it will put your portable area into this folder underneath the covers. This is where it pretends it is and will look for the views and such inside of this folder.
Now, in the Index.cshtml view under Home, add the line at the bottom:
Set the PortableAreaDemo.Mvc as the Startup Project and Press “Start Debugging”, you should now see:
Hopefully you got it working. If not, go back through and check the steps, otherwise, you can comment here or catch me on twitter at @mike_d_moser and I can try and help you out. Thanks and happy coding.