My current client has a need for numerous customer facing web portals. We are developing those portals in MVC using Razor View Engine. They want the portals to share a "Master Page" layout where all portals look and interact the same. We called this Single eXperience Portal (SXP).
After doing some research we stumbled across the Razor Generator project on CodePlex. The Razor Generator allows the use of precompiled views in an MVC application. After removing some files from a standard MVC application, installing Razor Generator Extension for Visual Studio, and making a reference to the precompiled view assemble we were able to get the desired results.
We now can have as many portals as we want share the same Master Page layout. And since this will be used by all portals we were able to include numerous other common components like: common web pages (home, terms and agreement, contact us, about us), security, common javascript and css references (using CDN) , bootstap twitter framework, etc...
Below I have detailed the steps to set up your precompiled views and consuming MVC application that uses the views.
You will need to install the Razor Generator extension for Visual Studio.
The easiest and most effective way to get this working is to create a test MVC application. You will use this MVC application to mock up how you want your layout to look. From there you copy a few files/directory to a class library and apply the configuration to use the Razor Generator.
Step 1: Create an test MVC application. Select Internet template and Razor as View Engine. Since the precompiled MVC views are a Class Library project there is really no way to view the HTML for your Master Page within that project. We use the Anexinet.SXP.MVC project to layout our html and test some functionality.
**Notice I name solution Anexinet.SXP and project Anexinet.SXP.MVC
Step 2: Modify HTML in Views\Shared\_Layout.cshtml with your layout for master page html. For this example I am just going to use the default layout that comes from creating an MVC Internet template project. Below I have highlighted the area that will be used for application specific html. Everything else is part of my precompiled MVC view for our Master Page.
Step 3: Add a new Class Library project to the solution called Anexinet.SXP.Portal. Delete Class1.cs file.
Step 4: Copy Views Directory from MVC project and paste into root of Portal project. You can just right click and do a Copy and Paste in Visual Studio. Delete all the directories but 'Shared', also delete web.config file, Views\Shared\_LoginPartial.cshtml and Views\Shared\Error.cshtml. Your Portal project should only just have the Views\_ViewStart.cshtml and Views\Shared|_Layout.cshtml now.
The _Layout.cshtml is your Master Page html.
Step 5: Install the following NuGet Packages. Right click on the Anexinet.SXP.Portal project and select 'Manage NuGet Packages'. Click the Online section on the right and type in each of the following and Install.
- RazorGenerator.MVC.
- Microsoft.AspNet.Web.Optimization
Step 6: Configure _Layout.cshtml and _ViewStart to use RazorGenerator.Mvc. Select each file and in the Properties window set the value for CustomTool to RazorGenerator (hit enter after typing value in). You will see a new file was added under .cshtml file called _Layout.cshtml.generated.cs. If you view this file and it is not littered with a bunch of WriteLiteral("....") statements with your HTML from cshtml file then there is an issue with your HTML. It cannot have errors or be malformed. Add this line to the very top of _Layout.cshtml file:
@using System.Web.Optimization;
Step 7: Create another MVC application that will reference the Portal project and use the precompiled views. Right click on the solution and select Add New Project. Select MVC 4 application using Internet template. We need to install a few NuGet packages for this project to be able to use the precompiled views. Install the following from NuGet
- RazorGenerator.Mvc
- PrecompiledMvcViewEngineContrib
***You may have to update NuGet package Microsoft.AspNet.Web.Optimization to the latest version if different form the version install on Anexinet.SXP.Portal project.
Next add a reference to the Anexinet.SXP.Portal project. We also need to delete the Views\Shared\_Layout.cshtml and Views\_ViewStart.cshtml files because we are getting those from our Anexinet.SXP.Portal project. If you run the project you should now see standard default Home page for an MVC Internet template application. You are getting the _Layout.cshtml and _ViewStart.cshtml from your Portal Project.
Just to confirm we are getting this from the Portal Project, we can add some dummy text and rebuild. Our new text should be display on the screen. Add the following text to the _Layout.cshtml file from the Anexinet.SXP.Portal project.
Now rebuild your project and run the PortalClient project.
That is all you need to do to create precompiled MVC Razor views. This is a very simple example of this technology, there are many more complex real world applications. For example, we are dynamically creating the Navigation Bar depending on the applications (aka portals) you have access to. In that case I need to include the Controller code and any Models or ViewModels classes I need to render the View.
