Alternative directory layout for MVC

In .Net the MVC pattern is implemented through a template project. The project is set up for you when you create a new MVC application and imposes certain patterns on you. And that is exactly what MVC is, a pattern.

By default you will create a controller, a view and a model. Usually you add scripts to that and have some shared layout views. Since you are following a certain pattern it is easy for third party scripts to embed themselves into your solution when you install them through NuGet. The standard pattern also makes the solution predictable and everyone who are familiar with MVC will know where to look for what in your project.

As your project grows so will the number of files. And you will quickly find navigating through a long list of folders and files in your project.

Personally I do not understand why this is the layout that has been chosen as default. The emphasis is on the four main areas of any page: Model, View, Controller, Script. This is how you are expected to categorize your code. Not by functionality, not by feature, but by the four basic components that all pages contain.

So I propose changing this layout to be page centric. A change that is very easy to do on any existing solution, but makes it easier to maintain the solution.

Move controllers, models and javascripts into the views folder for each page. Ask Visual Studio to refactor the namespace in controllers and models to correspond to the new placement. Change reference to the JS-files to reflect the new placement.

Now this might work for a smaller project, but if a page is big you may want to split the code up even further. And here the four main areas come in.

JavaScript, Controllers and Views have different file extensions and can be easily told apart in the editor. With a proper naming convention they will even group nicely based on feature/function. The model however shares file type with controllers. There can also be multiple models. So for clarity one approach could be to put page specific models in a subfolder named “Models”. If the page has multiple scripts you may want to put them in a subfolder too.

The end result is a cleaner project layout where working within one page is easier and faster. As a bonus you get all page related code located within a single folder, so deleting or replacing a page is much easier.

So for some technical details:
The Views-folder contains a web.config file to disallow getting files from it. This is a security feature to stop delivery of views without first processing them.

Because of this web.config file the webserver is instructed to not serve any files form this folder. This means that JavaScript-files will not be served by default. To achieve this you need to add a line to your web.config file under the “handlers” section.