Asp.net MVC 5 separate projects for UI and Web

Question

How can I go about separating my MVC project into UI specific (JS, CSS, Images, Fonts, and maybe Views) and Controller/Model specific (Controllers, Helpers, Models, and may be Views). Since our front-end developers work mostly independent of Visual Studio, I was looking for best practices in separating projects. Any pointers or sample projects?

Answer 1

You can easily do this and I've done it for each of my projects in MVC as well.

One project has your Controllers, ViewModels, and in my case, any custom logic related to Dependency Resolution for MVC and custom classes related to security authentication with MVC. Basically any code that touches the MVC framework core and is not involved in rendering content.

The other one has pretty much everything that you use on the client-side, and code needed for the front end. Which in my case, code-wise, is very minimalist and included some code for Glimpse and Elmah. The rest is your Views, Styles, Scripts, static content like downloads, etc.

As for the files in App_Start, My views project has Bundles, Filters, and obviously any HtmlHelpers you may have, custom css transformationslike for LESS.

My Controller's App_Start has the RouteConfig. These aren't necessarily critical it's just the way I ended up organizing mine and really depends what aspects you need access to during the startup of those components.

I will say that to save yourself time, in your Views/web.config file, add a namespace entry for your Company.Project.ViewModels namespace so that it's done in one place and you don't have to add it to each view, as this namespace would reside in your Controllers Project.

Your project with the Views will be your startup project. Just make sure in the global.asax your calls to the FilterConfig, RouteConfig and BundleConfig all resolve correctly.

It's fairly easy to do, my recommendation is to try it yourself and split it out the way you want and if you have problems come back and ask about the difficulties rather than looking for a step by step guide.

Bottom line is, yes it's possible and yes it works,

Answer 2

This is how we finally ended up doing it.

• Create a separate visual studio project called SolutionName.Client (this is where all frontend js and scss files go)
• Create you MVC project called SolutionName.MVC (this is the asp.net mvc project)
• Using Grunt.JS write tasks that compiles all js and css files and drops them to SoltuionName.MVC/Content folder
• Similarly write tasks that drops all Views (razor files) into SolutionName.MVC/Views folder.
• In Project build settings, add a pre-build tasks to run grunt task.

This setup took few hours to get it working but it is now quite useful.