MyContactBook: Part 1 - Create Project & Setup for Responsive Design using Bootstrap

Steps :
Step - 1 : Create New Project.

Go to File > New > Project > Select asp.net MVC4 web application > Entry Application Name > Click OK > Select Internet Application > Select view engine Razor > OK

Step 2: Create a folder inside Content for bootstrap.css

Go to Solution Explorer > Right Click on Content folder > Add > New Folder > Rename folder "bootstrap".
I have created this folder for store bootstrap.css files which I have downloaded from internet for free bootstrap templete.

Here I have also added some other resources for fonts.

Step 3: Add latest version of jQuery (Jquery 1.11.1)

Here I have added latest version of jQuery 1.11.1 in the Scripts folder. You can download from here
I have also added js files (bootstrap.js, bootstrap.min.js) in the bootstrap folder under Scripts folder ( for bootstrap, you can download from here

Here is the Solution Explorer structure....

SolutionExplorer

In this example, I have used one tables as below
Step 4: Design _Layout.cshtml page for responsive design.
_Layout.cshtml
            <!DOCTYPE html>
            <html>
            <head>
                <meta charset="utf-8" />
                <meta name="viewport" content="width=device-width" />
                <title>@ViewBag.Title</title>
                @Styles.Render("~/Content/css")
                @Scripts.Render("~/bundles/modernizr")
                <link href="~/Content/bootstrap/bootstrap.css" rel="stylesheet" />
            </head>
            <body>
                <div>
                    @* Header Menu *@
                    <div class="navbar navbar-default navbar-fixed-top">
                        <div class="container">
                            <div class="navbar-header">
                                <a href="/" class="navbar-brand">Contact Book</a>
                                <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>
                            </div>
                            <div class="navbar-collapse collapse" id="navbar-main">
                                <ul class="nav navbar-nav">
                                    <li>
                                        <a href="/">Home</a>
                                    </li>
                                    <li>
                                        <a href="/Home/Add">Add Cantact</a>
                                    </li>
                                    <li>
                                        <a href="/Home/Export">Export</a>
                                    </li>                   
                                </ul>
                                <ul class="nav navbar-nav navbar-right">
                                    <li><a href="#" target="_blank">Login</a></li>
                                    <li><a href="#" target="_blank">Register</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="container">
                    @* Page Header *@
                        <div class="page-header" id="banner">
            
                        </div>
                    @* Page Body *@
                        <div class="page-body">            
                            <div class="row">
                                <div class="col-xs-12">
                                   @RenderBody()
                                </div>
                            </div>
                        </div>
                    @* Page Footer *@
                        <footer>
                        <div class="row">
                            <div class="col-xs-12">
                   
                                <p>Made by <a href="#" rel="nofollow">Sourav Mondal</a>. Contact at <a href="mailto:souravmondal45@gmail.com">souravmondal45@gmail.com</a>.</p>
                    
                            </div>
                        </div>
                    </footer>
                    </div>
                </div>  

                @Scripts.Render("~/bundles/jquery")
                @RenderSection("scripts", required: false)
                <script src="~/Scripts/bootstrap/bootstrap.min.js"></script>
            </body>
            </html>

        
Step 5: Add mime type in web.config file for allow woff font. (I have used in this app)

Open web.config file and add this below xml code inside <system.webServer>

            <staticContent>
              <remove fileExtension=".woff" />
              <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
            </staticContent>
        
Step 6: Add a Controller

Go to Solution Explorer > Right Click on Controllers folder form Solution Explorer > Add > Controller > Enter Controller name > Select Templete "empty MVC Controller"> Add.

            using System;
            using System.IO;
            using System.Linq;
            using System.Web;
            using System.Web.Mvc;

            namespace MVCContactBook.Controllers
            {
                public class HomeController : Controller
                {
                    //
                    // GET: /Home/
                    public ActionResult Index()
                    {
                    }
                }
            }
        
Step 7: Add View for Index Action.

Right Click on Action Method (here right click on form action) > Add View... > Enter View Name > Select View Engine (Razor) > Add.

Complete View
             @{
                ViewBag.Title = "Index";
            }

            <h5>Contact List</h5>
        
Step-8: Run Application.
MyContactBook: Part 1 - Create Project & Setup for Responsive Design using Bootstrap
Posted By :