Master C# Logo banner
Welcome to - Master C#, the easy way... - by Saurabh Nandu


Building an HTML5, ASP.NET MVC 4 based website - Part2

by Saurabh 22. May 2012 16:59

Part 2 – Starting the Project and Bootstrap Integration

In the previous article. I defined the user stories for the web site as well as I selected the technologies that I would be using to build this application. In this blog post I will directly dive into starting the project, and integrating it with Twitter Bootstrap to get a rich HTML5 template ready to start building our application.

Setting up the Visual Studio Project

Before you get started with the project make sure that you have ASP.NET MVC 4 installed for Visual Studio else you can download it from ASP.NET MVC 4 Beta. Once you have everything in place, fire up Visual Studio (as administrator since we want to create a new IIS project) got to File menu –> New Project to bring up the New Project dialog (Figure 1 below).

Figure 1: New Project dialog

Expand the Visual C#, Web project templates and select the ASP.NET MVC4 Web Application template. You can also see that I prefer to store my project in the c:\apps folder rather than in My Documents folders which Visual Studio tries to save by default. You can choose where you want to save your folder so that you can easily access it later. I have also provided the name of the project and solution as RateMyMehndi. Click OK to create the project, and VS opens the New ASP.NET MVC4 Project (Figure 2) dialog.

Figure 2: New ASP.NET MVC4 Project

There are different MVC4 templates provided by Microsoft which act as starting points for different kinds of applications. I want to start from scratch so I select the Basic template and click OK to create the project. Visual Studio will go ahead and create an empty MVC4 project with basic JavaScript's and some other plumbing files but no controllers. If you do not want any JavaScript files to be generated then Empty project template can also be selected. Now we have the project setup we can move ahead with building our application.

Setting up HTML5, CCS3 boilerplate template

UI Design and consistency of UI is one of the most important aspects of any website. Since I plan to use HTML5 instead of starting the UI from scratch there are some very useful HTML5 based boilerplate templates which not only provide a standards compliant HTML5 markup but are also supplied with a rich CSS3 and JavaScript framework making it very easy to build good looking, consistent and standards compliant websites very quickly. These templates also provide responsive layouts for mobile browsers. There are a wide variety of websites offering such templates like 960 Grid System, 1kb Grid, Blueprint CSS, one of the most popular and widely used template system from Twitter Bootstrap, HTML5 Boilerplate and Initializr which uses the HTML5 Boilerplate template but provides far more flexible options. Template systems like HTML5 Boilerplate go a step ahead and also provide lots of commonly used IE hacks as well as other important tags and scripts to make your development experience faster. Which template system is the best? Well it totally depends on what are the needs of your project, each one of them allows you to configure the various elements of the template and download a custom version so that the size of the template is at minimum. Its interesting to see how much effort has been put in to minimize the size of these templates while providing some very rich features for developers.

In my RateMyMehndi web application, I have decided to use the template from Bootstrap since its one of the simplest and most popular template available. You can look through the Bootstrap website to learn more about using the template. Download the zip file from the Bootstrap website and extract its content to a known folder.

Merging Bootstrap with ASP.NET MVC4 template

When you extract the Bootstrap zip file it contains 3 folders css, img and js containing respective files. In order to use them we need to copy over the files into our Visual Studio. Expand the css folder from Bootstrap and copy the bootstrap-responsive.min.css file into your visual studio projects Content folder, in my case the full path to copy the file is C:\apps\RateMyMehndi\RateMyMehndi\Content. You can see that bootstrap provides 2 different style sheets one is normal bootstrap.css and another is bootstrap-responsive.css the later allows you to define layouts that automatically adapt themselves on mobile devices. Hence I choose to use the responsive layout css. They also provide the minified versions of the same css file for faster download on the client side, again since I do not plan to debug or modify their original css, I use the minified version.

Then from the js folder copy the file bootstrap-min.js to your visual studio projects Scripts folder, in my case the full path to copy the js file is C:\apps\RateMyMehndi\RateMyMehndi\Scripts. Bootstrap provides a single JavaScript file bootstrap.js as well its minified version. Since I do not plan to debug or modify their JavaScript, I use the minified version directly.

Once the files have been copied over, fire up Visual Studio and open the Solution Explorer window. In the Solutions Explorer window click on the Show All Files icon (circled in Figure 3 below). This will show all the files in the project folder, the ones which are not included in the project are shown greyed out.

Figure 3: Solutions Explorer – Show All Files

You can see from Figure 3 above that under the Content folder the file bootstrap-responsive.min.css and under the Scripts folder the file bootstrap.min.js which I had copied over are shown in gray. Right-click on the bootstrap-responsive.min.css file in Solution Explorer and select Include in Project from the context menu. Repeat the same step for including the bootstrap.min.js file into the Solution. Once these files have been included in the solution you are ready to use them in your project as well as when you are ready to deploy the application these files will get automatically get copied in the final deployment package. The next step is to delete the Site.css style sheet file under the Content folder, this file contains the default styles defined by Microsoft in the empty template, since we want to use the styles from the boostrap template its best to delete the default file. Right-click on Site.css in Solution Explorer and select Delete from the context menu and confirm the alert to delete the file.

In Solution Explorer expand the App_Start folder and open the BundleConfig.cs file. This file has the configuration for bundling of JavaScript and CSS files in MVC 4. Bundling is a great feature of MVC4 which allows you to bundle multiple different JavaScript/CSS files  into a single JavaScript/CSS file at runtime. This significantly reduces the round trip the browser needs to make to download all the separate JavaScripts/CSS files required by the application, thus speeding up your applications load time. We need to update this file to include our bootstrap files in the Bundling configuration.

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

namespace RateMyMehndi
    public class BundleConfig
        public static void RegisterBundles(BundleCollection bundles)
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(

            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/bootstrap-*")); 
	    bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/bootstrap-*"));

	    bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(

Listing 1: BundleConfig.cs

If you look at line number 23, you can see that I am calling the Add method on the BundleCollection object bundles to include a new script to the bundle. I create a new object of type ScriptBundle giving it a virtual path of “~/bundles/bootstrap”, this virtual path name will be used when we want to inclue this particular script bundle on our page. Then I call the Include method of ScriptBundle class and pass the virtual path to the actual JavaScript file to include in the bundle. You can either provide the full name of the file or wildcard character * is also allowed. 
On line 26 similar to the above code, I add the bootstrap style sheet to the bundle using the StyleBundle class instead.

Rough Site Layout

Now that I have the project setup the next step for me is to build a rough layout of the various elements on the website. This helps me setup the basic layout template in my project. Based on the layout required I will update the _Layout.cshtml master template file so that it provides areas to plug-in partial pages. Figure 4 (below) shows the various high-level elements of my website, the site is divided into 3 common areas of header, content and footer. The header area holds the logo and navigation menu. The content area will hold the main mehndi design, rating and comments for the design as well as a side column to show case the top artists and top mehndi designs. The footer will hold the usual copyright notice.

Figure 4: RateMyMehndi rough site layout

Based on the rough layout that I have decided to use for the website, the next step is to update the _Layout.cshtml layout file for my MVC4 project to represent the above structure using HTML5 semantic markup. Open the _Layout.cshtml file from Solution Explorer, expand Views –> Shared. In MVC4 project this folder contains the views which are shared across screens.

<!DOCTYPE html>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    @Styles.Render("~/Content/themes/base/css", "~/Content/css")
    <!-- Start of Bootstrap container -->
    <div class="container">
        <!-- Start of header Row -->

            <div class="row">
                <div class="span7">
                    <h1>Welcome to Rate My</h1>
                <div class="span5">
                    <!-- Show Facebook Login details -->

                <div class="navbar">
                    <div class="navbar-inner">
                        <div class="container">
                            <ul class="nav">
                                <li class="active"><a href="@Url.Content("~/")">Home</a></li>

        <!-- end of header row -->
        <!-- start of content row -->

            <div class="row">
        <!-- end of content row -->
            <!-- Start of footer Row -->
            <div id="footer" class="row">
                <div class="span12">Copyright 2012 - All Rights Reserved.</div>
            <!-- end of footer row -->
    <!-- End of bootstrap container -->

    @RenderSection("scripts", required: false)

Listing 2: _Layout.cshtml containing basic page layout 

Listing 2 shows the _Layout.cshtml file updated with basic HTML5 mark-up using bootstrap. In bootstrap, the page layout is contained within the top level div at line 16 with the css class container, which contains all the inner layout elements on the page. As shown in Figure 4 the page is divided into three major parts Header, Container and Footer using the HTML5 tags Header, Section and Footer respectively.  Within each of the 3 sections I have defined div elements with css class row from bootstrap. This element allows you to define separate rows within the container div defined below body tag. Under the header I have defined a navigation menu using the HTML5 tag Menu. The menu tag contains an unordered list with the menu items, right now I have defined only one link to Home. The bootstrap css classes navbar, navbar-inner, container and nav are all used to defined a navigation bar. Since I am using the bootstrap css files, the menu item is automatically styled by used the above tags.

This concludes this blog post where I have created an ASP.NET MVC 4 project in Visual Studio and integrated it with Twitter Bootstrap. In the next post I’ll start working on the first user story and integrating with Facebook.

Tags: , , ,


Comments (11) -

COO Rwanda
6/9/2012 12:50:12 AM #

Article was very well written!I recommend this article.


AT United States
6/11/2012 3:30:11 AM #

Thank you for the post. It helps me a lot to gain more confidence. Logical thinking is good.
This is really an informative blog. Thanks for sharing with us.


SimpleScripts United States
7/7/2012 9:12:50 AM #

This is the right blog for anyone who wants to find out about this topic. You realize so much its almost hard to argue with you (not that I actually would want...HaHa). You definitely put a new spin on a topic thats been written about for years. Great stuff, just great!


.Net Training Indore
.Net Training Indore United States
8/6/2012 3:40:55 AM #

Your articles always have a lot of really up to date information.


Janis Baldwin
Janis Baldwin United States
9/29/2012 9:53:36 AM #

need the next part please!!  Just starting this stuff and it's a whole new ballgame for me.


akdar United States
11/6/2012 4:30:43 PM #

next part is it comming or not ?


KK lolu
KK lolu Zimbabwe
11/28/2012 1:21:16 PM #

Nice article


tha United States
12/20/2012 1:12:51 AM #

After a lot of confusion finally found a solution.


kelvin United Kingdom
1/6/2013 9:46:22 AM #

You just saved my llife please please i'm dieing againg for the nxt one  . thanks a millions.


Nice United Kingdom
1/7/2013 11:21:21 AM #

Thank you so much & great job, it is very rare to find articles as informative as this.....Can't wait to hear the end of the story...will be here waiting for the next post...


Austin United States
3/1/2013 12:05:56 PM #

Toward the end of the article, you said "the page layout is contained within the top level div at line 16 with the css class container". I think you meant line 11.


Pingbacks and trackbacks (3)+

Add comment

  Country flag

  • Comment
  • Preview

Copyright 2011 All rights reserved.