MVC Area in an External Assembly

The majority of ASP .NET MVC sites I build I treat the site itself as a single UI.  I don’t bother breaking it down into pieces, it is an MVC after all.  Thus it already addresses separation of concerns.  But what happens when your site gets large and you want to break it into application verticals within one MVC host.  The first thing you do is break the site into Areas.  This makes it possible to keep things organized.  Now lets take it a step further, and you would like your area to be in a separate assembly.  Maybe it is shared between applications, or you just want to track the development and control deployment a bit more.

I Googled all over trying to find a good solution.  The most helpful post came from Patrick Boudreaux a couple years ago.  Working your way through Patrick’s post you see that Javascript and Css still an issue:

To make a fully self-contained portable area, static content such as css, images and javascript needs to be embedded in the assembly, and found in a special way, just as the view templates are.

Thus we will include a way to solve that issue in my own ‘sepcial way’.  Mileage may vary, so let me know in the comments.

You can find the example code on GitHub. This series will be known as The Poor Mans Modular Area for ASP .NET MVC or PMMA for short.
works on my machineWe will try to make this as simple as possible.  I feel like ‘Simple‘ is a forgotten art form in the .NET world.  It would be great to just include a reference to another MVC application and use it’s areas.  If you try that though, you will find issues with both projects trying to take the wheel to drive.  We can avoid that by simply removing redundant pieces of the hosted Area.  Also, I want to simply and clearly prove the way the application is running, so we will assemble a prof of concept project.  We will  perform a simple string assignment in the Area’s controller, print that string in a View and load a Javascript file and a CSS file that all live in the Included project.

Add Area

The Project

Starting the project created a new MVC 5 solution and called it ‘MasterUI’.  Then add a second MVC 5 project called ‘Included’.  Next add an area by right clicking the Include project and selected Add > Area and name it “TestArea”.  Then within the area right clicked on the Controller folder and added a controller named ExampleController.cs.  Then inside the Index action add the line:

ViewBag.Message = "SUCCESS!!!";

Now right click on the Index() method name and selected add View.  My view Code looks like this:

@{
    ViewBag.Title = "Index";
}

@Styles.Render("~/Included/Content")

<h1>EXAMPLE AREA</h1>
<h2>@ViewBag.Message</h2>

@section scripts
{
    @Scripts.Render("~/Included/Scripts")
}

You will notice the Styles.Render() under the default ‘Title’ assignment that refer to a package with a URL that includes the Area name.  I did this to keep convention and keep it clear where the script is coming from.  It may make sense to be even more explicit, but this will be OK for this context.  Then note it will place the message inside H2 tags to prove the controller is talking to the view.  The Scripts.Render() call will place some scripts in the ‘scripts’ layout section of the master layout.  It too refers to the Area name.

From the Included project delete Global.asax, Controllers, fonts, Models and Views. In the ‘MasterUI’ project add a reference to the ‘Included’ project.  Run MasterUI and navigate to /TestArea/Example and prove you get a 404.

The Magic

Custom ToolThe first thing you want to do is add a Visual Studio extension that allows you to precompile your MVC Razor views.  Open Extensions and Updates and search for and install Razor Generator.  Razor Generator has two pieces: a VS extension and a NuGet package.  These enable you to compile your Razor Views into the library.  Enabling this is a little manual, but the payoff is well worth the effort.  Once you install the VS Extension, manage the NuGet packages on the Included project, search for and add RazorGenerator.Mvc.  As long as we are thinking about our views, browse to TestArea\Views in Solution Explorer.  Locate the _ViewStart.cshtml and view it’s properties.  Here is where the manual part happens.  You want to type “RazorGenerator” into the ‘Custom Tool’ field.  This should cause a .cs file to be generated from your view.  There is no need to edit the .cs file, simply make your changes in the .cshtml and it will be updated for you.  Next do the same to Example\Index.cshtml.

Now it is time to setup our static content.  ASP .NET MVC has great static content handling built-in.  We will leverage this by using a custom bundle transform.  You may not consider my method to be “correct” but it seems to work.  I am open to suggestions, let me know in the comments.  The class implements IBundleTransform as follows:

public class StringResourceTransform : IBundleTransform
{
    private List<String> _resourceFiles = new List<String>();
    private string _contentType;

    public StringResourceTransform(List<String> resourceFiles, String contentType = "text/javascript")
    {
        _resourceFiles = resourceFiles;
        _contentType = contentType;
    }

    public void Process(BundleContext context, BundleResponse response)
    {
        string result = String.Empty;

        foreach (var resource in _resourceFiles)
        {
            using (Stream stream = Assembly.GetExecutingAssembly()
                .GetManifestResourceStream(resource))
            {
                using (StreamReader reader = new StreamReader(stream))
                {
                    result += reader.ReadToEnd();
                }
            }
        }

        response.ContentType = _contentType;
        response.Content = result;
    }
}

This allows you to specify a Bundle by giving a list of Resource paths.  When the request comes in, the resources are read into a string and passed back out to via the response.  Given the above class, you would then specify your bundles in the Included project’s Bundle config similar to the this:

var scriptsBundle = new Bundle("~/Included/Scripts", 
  new StringResourceTransform(new List<String>() 
    { 
      "Included.Scripts.test1.js" 
    }));
scriptsBundle.Transforms.Add(new JsMinify());
bundles.Add(scriptsBundle);

var cssBundle = new Bundle("~/Included/Content", 
  new StringResourceTransform(new List<String>()
    { 
      "Included.Content.Test.css" 
    }, "text/css"));
cssBundle.Transforms.Add(new CssMinify());
bundles.Add(cssBundle);

Above first specifies a JS file that is located in the Included project under the Scipts folder by the name of test1.js.  You notice that the contentType defaults to “text/javascript” so it doesn’t need to specify this on these sorts of files.  The second set of lines do the same for a css file located in the Content folder.  The path is specified as the location within the project by setting the files to be an Embedded Resource.

First place a file in the Scripts directory by the name of test1.js.  Place the following text into it:

alert('success!!');

Then in its properties set ‘Build Action‘ to “Embedded Resource”.  Next, add a file by the name of Test.css to the Content directory and also set its Build Action to “Embedded Resource”.  Add the following text to it.

h2
{
    color: red;
}

Now head back to the MasterUI.  There are only a couple changes that need to be made to make it aware of Included.  With all the work we did in the Bundle config, simply add the following to the end of the BundleConfig in MasterUI:

Included.BundleConfig.RegisterBundles(bundles);

This will ensure the bundles fire.  Now you just need to make sure the routing can find the controllers.  The following line could be placed several places, but I just put mine in the Global.asax:

ControllerBuilder.Current.DefaultNamespaces.Add("Included.Areas.TestArea.Controllers");

Success

This bit of magic lets the routing know to look in our Included project area namespace and find controllers.  This way you don’t have to make any crazy changes to routing or build a custom anything else. Now run the application and go to /TestArea/Example.  If you see an alert that says ‘success!!” and a result like the screenshot you did it right.

Enhancements

As you may be thinking, you could certainly do this without having a sub-folder ‘Areas’.  The reason I did this is to make it clear we are dealing with an area, and to keep the namespace a little more organized.

If you are running in debug mode optimizations are off so you have to enable them with

BundleTable.EnableOptimizations = true;

But the problem then is that you have all your minification turned on too.  This is addressed by simply surrounding your minify transforms with #if(!DEBUG) compiler directives.

Conclusion

Using this method I plan on creating a multi-facet application that will be a one stop shop for custom tools where I work.  I will keep you posted on how it works out for me, feel free to do the same or ask questions in the comments.

MVC Area in an External Assembly

IIS with Zend Server: Zend Controller and URL Rewrites

I have always been a fan of LAMP.  In fact, in the past it was the only good way to get your hands on real server apps.  Apache has served me well over the year and was the first HTTP server I knew.

Over the years I have worked at many mixed OS shops, but IIS always seemed to be around and I ended up configuring it in one way or another.  It didn’t take long for me to find that configuring IIS was much simpler than Apache.  If you have used Apache for any length of time you know that it is a bit of a black art at times.  I don’t know anyone that considers themselves an Apache configuration expert.

Historically speaking  PHP with IIS performance on Windows has been dismal.  Microsoft recognized this and started working with the PHP community to enhance IIS support for Fast-CGI and now there are an endless supply of Microsoft interactions with PHP.  I don’t think I am the only one that thought it odd to see M$ at Zend Con the first time. (Thanks for the ASP book by the way)

I still hadn’t any use for IIS on any real PHP development or hosting.  The biggest draw back left was the lack of support for URL Rewriting.  While one of many things offered in Apache, it was a deal breaker in many of my situations.  So 12 years after I started developing websites and web apps, Zend encouraged me to use IIS once again.  “How did Zend encourage you to use IIS?” you may ask.  Well they distribute Apache in Zend Core, but they also offer IIS support in Zend Core, Platform and now Server.  To start with my current dev box runs Windows Vista Ultimate.  So when I got the new Zend Server beta, I decided to use it with my IIS installation.

There are dozens of tutorials out there on how to install Zend Server, the only difference in the install is that you pick to use the existing IIS install.  This will install and configure IIS fore use with your IIS.  If you open ‘inetmgr’ you will notice a virtual directory in your default site called ZendServer.  The only problem I had with the install is that my Default Weg Site is listening on port 8080 and the Zend Server installer failed to figure this out, so all my links in the start menu and such refer to flat http://localhost/ instead of http://localhost:8080/.  Being a beta I suppose that will be fixed by the time it is released.  I have had good experience and responsiveness from the Zend teams in the past.

Once Zend Server is installed it offers a much more organized tool set than Zend Core + Zend Platform.  Some features though may not be useful for all.  One of which is the output caching.  Depending on how you use it the caching in IIS may be better for you, especially if you or your admin are familiar with it.  Zend Server comes with a nice web interface to the php.ini satisfying those mouse using admins.  The Zend Server Dashboard presents you with events that were tracked, and that may be of interest.  Thins like slow script execution and errors, and you can drill right down to where it is coming from.  There are plenty of places that talk about the features of Zend Server and they probably explain it more in depth.

The install also comes with a little standalone utility that you can find in the Zend Server install directory in the ‘bin’ folder.  It is called Zend Controller (zendcontroller.exe).  It holds some links directly to various places in the ZendServer web interface, launching your default browser.  It also has a quick search form for PHP Documentation, Zend’s Website, Zend Framework documentation and MySQL documentation.  The neat thing it houses is a ultra simple bench mark tool.  Simply set the url and the request duration in seconds and hit start and it will see how many requests per second it can handle.  I may post some results a little later with IIS vs. Apache using this simple tool.

So all seemed to be well until I remembered I like to use Rewrite Rules to keep my urls clean.  I don’t like to see ‘http://www.example.com/somefoo.php/somestuff/here/?key=value&someotherjunk&#8217;.  I figured that there should be some good way to do this now with IIS7.  Sure enough, an ‘I feel lucky’ click later I had the Microsoft URL Rewrite Module for IIS 7.0 (x86) : Download.  All is hopeful.

So I installed it.  Opened IIS Manager, selected the website I wanted, and clicked the URL Rewrite icon. |ICON| I was presented with an empty list, so I clicked the “Add Rules…” link on the right-hand side.  I noticed “Import Rules”, interesting.  I will check this out later.  I tried “User Friendly Url” icon.  This only offered simple shortening that didn’t fit my need.  What i needed was to rewrite ‘/index.php/list/foo/?orderby=bar’ from ‘/list/foo/?orderby=bar’.  This isn’t too dificult in Apache, although every time I do it I end up hacking arround with it a bit until I get it working.  So the one I want is “Blank rule”.

RewriteI named it ‘Index’ and set the pattern to match everything like ‘^(/*)’ because I saw below additional conditions.  Then I clicked Add Conditions since I thought I should not run images, css and js through the rewrite and thus the index.  My code is not set up to handle that.  I selected “{QUERY_STRING}” for the Condition input, and under ‘Check if input string’ set to does not match the pattern “.*.jpg” and clicked OK.  I then did the same for png, gif, css and js files.  Alternately, if you dont mind people accessing everything under the web root, you could set your conditions to {REQUEST_FILE} “Is not a File” and “Is not a Directory” to avoid having to put an acception for every file type you need to access directly.  Or you may be able to use your Front Controller as a catch all for those types of requests too.

I then clicked apply and restarted the site.  Now we have nice clean secure urls that a malicelious visitor would not think is even PHP (cause who runs PHP on Windows? hehe).

IIS with Zend Server: Zend Controller and URL Rewrites