Introducing the MVC Themed Web App Project Template

Quickly theming your ASP.NET MVC application is not easy. I discovered the Web App Theme rails generator one day whilst searching for web templates. To see it in action click here. Now, I really like Rails and I think ASP.NET MVC strives to become as good as RoR. So with that in mind, I ported the Web App Theme generator to ASP.NET MVC.

I’ve created a Visual Studio 2010 project template that will add all the themed goodness to your ASP.NET Web application as well as a few other personal touches(jQuery Datatables for all list views). If you have any question/comments or want to help develop this template drop me a line on Twitter or leave a comment.

Installing the Visual Studio 2010 project Template
Using the project template
Important files/folders
Changing the theme
Theme preview

1. Installing the Visual Studio 2010 project Template

To install the template you have 2 choices:

Download from Visual Studio Gallery or;
Install via the Visual Studio 2010 Extension Manager

Download from Visual Studio Gallery

To download it from the Visual Studio Gallery, visit the template page and click on the Download button. This will download a .vsix file. Once it’s downloaded double-click the file and install the template:

If it is installed successfully you should see this form:

Install via the Visual Studio 2010 Extension Manager

Probably the quickest way to get your hands on the project template. In Visual Studio 2010, select Extension Manager… from the Tools menu.

In the search field type MVC Themed App, after a short time you should see the template in the search results:

Click on Download. When prompted click Install.

2. Using the project template

With the template installed, start a new project in Visual Studio and select MVC Themed App. You’ll find it under Visual C#.

The default project layout looks like this:

3. Important files/folders

The CodeTemplates folder contains T4 template for adding a new controller and View(Create, Edit and List is already themed). The Membership folder contains all the files needed for the CodeFirst Membership Provider. You’ll notice the Models folder contains User.cs and Role.cs, this is used by the Membership Provider.

The Context folder contains the EF database context class and Initializer. The initializer will automatically create a new user called Demo with a password 123456 as well as a new Admin role. We set the initializer in the Application_Start method in Global.asax.cs .

Content\Themes contain all the css for the different themes. I wanted to use a different folder structure(public\stylesheets, etc.) à la Rails but the VS templates only allow specific folder lengths.

The App_Code folder contains a collection of helpers to make refering to script and css files easier as well as an extension for the label helper that allows specifying htmlattributes on a label. Read more about it here

Views\Shared contains the _Layout file. It’s split into 4 partial views:

_UserNavigation
_MainNavigation
_SideBar
_Footer

This will hopefully make it easier to customize

Web.config – Make sure you change the connectionString value. Currently it assumes you have SQL server on your local machine and admin right to the local server. By default it will create a MVCThemedApp database with the necessary code-first Membership provider tables.