Hello and welcome to my blog post for LessThanDot and in this post I will discuss how to setup a working ASP.NET MVC 4 (with Razor) project using the Empty Template.

That’s right, a blank project, I didn’t want the templates doing the work for me, I wanted to create a lean project that I had control over and I thought this would be easy enough but I was very wrong and tripped over a couple of times so hopefully this post will avoid any confusion and pain for newbies to the world of ASP.NET MVC (and avoid having to punch their laptop to death).

“Wait you punched your laptop to death?!”

Yes, metaphorically speaking as per my above tweet…I came close to actually doing it in real life, that’s how frustrated I was but alas frustration can often lead to lots of fun learning which I did in between the random expletives and “WTF!” shouts throughout this process.

So lets start, the first thing you want to do is NOT USE THE TEMPLATES! I know I know, sounds crazy but trust me you want to do it right and this is the best way my friends.

Start Visual Studio 2012 and then select the ASP.NET MVC 4 project type:

Give the project a meaningful name and then left-click the OK button to continue. You will then be presented with the following screen (Project Tempaltes), select the Empty Project type and left-click OK to continue.

If everything goes to plan Visual Studio will start generating your project folders and files and present you with the Empty Solution:

You will need to do a few things first before the project can actually work (i.e. if you want to use any kind of JavaScript/jquery/ajax and Web Content).  First we need to add some folders so right-click the project name (MvcApplication3 fro example) and select Add > New Folder and label it Scripts (or alternatively if you have created another template based MVC site such as the Internet one just drag the Scripts folder from Windws Explorer into your Visual Studio 2012 IDE and drop it onto the project name which will cause Visual Studio 2012 to take a copy of the folder and create it locally with files below your project).

Expand the Views folder which currently only has the web.config file.  Right-click the Views folder and select Add > New Folder labelling it Home.  Create another one and call it Shared, these two folders will contain the default views Index.cshtml and _Layout.cshtml (the shared view is like the MasterPage from the previous ASP.NET Form development days, it is used as a global view providing common page structure and other features across your views).

Now the important bit, you need to download the correct Web.Optimization package as its not included in your project and trying to create, build and compile any kind of web enabled page will cause no end of grief no less messages such as:

Compiler Error Message: CS0103: The name ‘Scripts’ does not exist in the current context

You may also see initial errors such as:

$ is not defined

All these can be avoided by running the following command from the nuget package manager command line.  To access the command line you need to display the command window:

Left-clicking the Command Line option will display a new command window at the bottom of your IDE which lets you enter nuget package manager specific commands.  Enter the following command to download the correct package for your project:

Once the package has been downloaded you will need to configure your Web.Config files, Global.asax file and add a new class in the App_Start folder so lets do this now.

Open up your root Web.config file and add the following line below the other namespaces (in the pages > namespaces section):

<add namespace="System.Web.WebPages" />

You will also need to do the same for your other web.config file located in the root of the Views folder.

Next you need to modify your Global.asax file located in the root of the project and add the following line below the other statements in the Application_Start() method:

BundleConfig.RegisterBundles(BundleTable.Bundles);

Now you need to add a new class called BundleConfig.cs in the App_Start folder.  Modify the using block to look like this:

using System.Web;
using System.Web.Optimization;

Modify the contents of the class block to look like this:

// For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                "~/Scripts/jquery-{version}.js"));
 
    bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                "~/Scripts/jquery-ui-{version}.js"));
 
    bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                "~/Scripts/jquery.unobtrusive*",
                "~/Scripts/jquery.validate*"));
 
    // Use the development version of Modernizr to develop with and learn from. Then, when you're
    // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
    bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                "~/Scripts/modernizr-*"));
}

Now save the file and we need to create a controller file and two view pages.  Right-click the Controllers folder and left-click on Add > Controller… to display the New Controller dialog:

Give it the name HomeController and left-click on Add to continue.  Now we need to create the Index view the controller will work with.  Before we do that we need to create a view that will “automagically” assign the same razor layout to all your views so right-click the Views folder and left-click on Add > View… (VS 2012 is clever enough to recognise the context you’re in, in this case the Views folder).  The Add View dialog box will appear:

Make sure you un-tick the “Use a layout or master page:” checkbox (as all your views will be using this _ViewStart file).

Now modify the file to look like this:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

Next we need to create the Index View so right-click the Home folder (the one you created earlier) and select Add > View… to display the Add View dialog box and label this view page Index and finally left-click Add to create it.

Modify the contents of the file to look like this:

@{
    ViewBag.Title = "My first LTD Mvc 4 Index Page";
}
@using (Html.BeginForm())
{
     <h1>Hello, World!h1>
}

Finally you need to create the shared layout view page, right-click the Shared folder and left-click Add > View… to display the Add View dialog box, label the view page as _Layout and ensure as with the previous pages the “Use a layout or master page” checkbox is un-ticked.

Modify the _Layout.cshtml view page to look like this:

DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Titletitle>
head>
<body>
    <div>
        @RenderBody()
    div>
    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
body>
html>

This should be enough for you to compile the project however it will still cause you pain unless you save your project and restart Visual Studio 2012, after which the references and page helpers should kick into life.

Build and Compile your project and then press F5 or click on the Debug button to fire up your project, if all has gone well you should see a simple page with the words “Hello, World!” across the top left.

Well done, now go make a cup of tea and eat some digestives.