Creating Asp .Net MVC 4 Application From Start

This blog post will describe a step by step process of creating a brand new MVC 4 application from scratch. The idea is to use this blog post as a reference to all the other MVC blog posts I may make on this blog. This will take out the process of repeating these steps on multiple blog posts resulting into huge blog posts.

Creating The Asp .Net MVC Application

Let's start by creating a new Asp .Net MVC 4 Empty application.

Select the Empty Project template.

Next we will add couple of packages we need to use in almost any web application.

• Microsoft ASP.NET Web Optimization Framework
• jQuery
• jQuery Validation
• jQuery Unobtrusive Validation

Adding NuGet Packages

Search and install ASP .NET Web Optimization Framework.

Check for System.Web.Optimization under references tab.

Search and install jQuery Unobtrusive Validation Framework.

As highlighted in the above screen shot this package has dependency on Core jQuery and jQuery Validation plugin. So once you install this package it will automatically installed it's dependencies.

Go ahead and install that and confirm into the solution explorer, following JavaScript files will be added under Scripts folder

Adding BundleConfig and Registering Bundles

The main purpose of using the Microsoft ASP.NET Web Optimization Framework is so we can bundle multiple JavaScript files in our website and deliver them at once as part of client's request instead of creating multiple requests, each for individual script file.

For this we will need to add a new class file named BundleConfig, under App_Start folder in our MVC application.

Next, define two bundles with appropriate aliases as described in the below screen shot. The bundles we are configuring are

• ~/bundles/jquery [Packages jQuery file]
• ~/bundles/jqueryval [Packages jQuery Validation and jQuery Unobtrusive Validation files]

Once we have the bundles configured we need to enable this bundles at the Application level inside Global.asax file.

Adding Layout Page & ViewStart Page

As a final step in our White Label MVC solution is the MasterPage (Layout Page in MVC) and the ViewStart page. As shown in the screen shot below, create a folder Shared and a Razor view named _Layut.cshtml. This file will be our MasterPage,so go ahead and define all the HTML elements in this View.

And, also create a file _ViewStart.cshtml which will define the the default Master page for all of our application views so we do not have to keep defining the Master Page for ever view , the way you are used to do in Asp .Net

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

Defining Script Section in _Layout.cshtml page

As best practices suggests, we want to define all of our JavaScript at the bottom of the page so let's go ahead and create a Section at the bottom of our page named, scripts.

The Section in Asp .Net MVC are very similar to Asp .Net ContentPlaceHolder. This place holder section in MVC defines where the Child view can place it's content.

Couple of things to note in above screen shot.

• @RenderBody is the default place holder where all child Views' content will be placed unless content from these Views is defined under a specific section.
• Scripts section is defined as required false. when you do not want to force a specific section defined by all the Views, you can define them as required:false. That means the View can chose not to put the content in that section if they do not have anything. In our case scripts section does not need to be defined by all the Views, so are marking that as not required.

Okey, at this point our white label Asp .Net MVC application is ready to be used in any of our applications. I will be referring this blog post for good number of MVC posts.