Post
Ask Question

MVC Beginners Tutorial with Bootstrap

Introduction

  • MVC is a framework for building web applications with the MVC design.
Now what is MVC?
  • MVC is a model-view-control design that seprates buisness logics ,UI design and user interaction.

    mvc

  • Model deals with the buisness layer that is classes and the properties.

  • View is the part that deals with display of data on the screen.

  • Controller interacts with the view and get the user inputs from view.

  • Controller sends input to the model and in return model sends output to the controller after performing actions.

  • Controller then displays the output on screen.

  • In traditional webform pattern code and design file is same and if we place the control on the design page that reflects in the code file also.

  • In Mvc design this file system is replaced.Here we put all the logic in one file called controller.From one controller we can call different UI.

  • In controller there is ActionResult that returns action against the ActionResult.

  • There is a view created against the ActionResult with the same name as the action result.

  • If we created the view against an ActionResult then in the Views folder a folder is created with the same name as of controller containing the views of that controller only.

Start by creating the project

  • Open the VS create new project,find ASP.NET MVC 4 Web Application.

    Open

  • After that a window appears select Internet Application and click OK.

    Internet Application

  • Mvc project will be created.

  • SolutionExplorer shows many folders.

    folders

  • Here in the solution explorer every folder has unique meaning.

  • Properties folder contains the version information and some other information about the project.

  • References store the refrence dlls required in the project.

  • App_Start contains the configuration files.

  • Content folder contain the css files.

  • Controllers folder contain the controllers for code.

  • Models folder contain the classes for buisness logics.

  • Scripts contain the javascript files.

  • Views folder contains views for the controllers.
Download CSS and JS files for bootstrap.
  • Go to the References folder right click on the folder >Find>Manage NuGet Packages>Click on the option.

  • Install bootstrap package.

    boostrap

  • Bootstrap is installed automatically and css files are saved in content folder and js files are saved in script folder.
Now register css and scripts for entire project.
  • Go to the App_Start folder > Open BundleConfig.cs,

  • Delete the code in the RegisterBundles method and replace with the given code.
    1. public class BundleConfig    
    2.    {    
    3.        public static void RegisterBundles(BundleCollection bundles)    
    4.        {    
    5.            StyleBundle(bundles);    
    6.            ScriptBundle(bundles);    
    7.        }    
    8.     
    9.        public static void StyleBundle(BundleCollection bundles)    
    10.        {    
    11.            bundles.Add(new StyleBundle("~/css")    
    12.                     .Include("~/Content/bootstrap.css"));    
    13.        }    
    14.     
    15.        public static void ScriptBundle(BundleCollection bundles)    
    16.        {    
    17.            bundles.Add(new ScriptBundle("~/js")    
    18.                     .Include("~/Scripts/jquery-{version}.js")    
    19.                     .Include("~/Scripts/bootstrap.js"));    
    20.        }    
    21.    }    
  • StyleBundle method register the css files.

  • ScriptBundle method register the js files.

  • Check the path of the files.

  • ~/css and ~/js are the root path for css and js files.

  • Call the both methods in the RegisterBundle method.

  • Check the path of the files carefully.

Now create the layout page for the entire project.

  • Go to the views folder find shared folder inside views folder.

  • Open _Layout.cshtml present in shared folder.

  • Write below given code,
    1. <!DOCTYPE html>    
    2. <html lang="en">    
    3. <head>    
    4.     <meta charset="utf-8" />    
    5.     <title>@ViewBag.Title - My ASP.NET MVC Application</title>    
    6.     <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />    
    7.     <meta name="viewport" content="width=device-width" />    
    8.     @Styles.Render("~/css")    
    9. </head>    
    10. <body>    
    11.     
    12.     <nav class="navbar navbar-inverse">    
    13.         <div class="container-fluid">    
    14.             <!-- Brand and toggle get grouped for better mobile display -->    
    15.             <div class="navbar-header">    
    16.                 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">    
    17.                     <span class="sr-only">Toggle navigation</span>    
    18.                     <span class="icon-bar"></span>    
    19.                     <span class="icon-bar"></span>    
    20.                     <span class="icon-bar"></span>    
    21.                 </button>    
    22.                 <a class="navbar-brand">Mvc App</a>    
    23.             </div>    
    24.     
    25.             <!-- Collect the nav links, forms, and other content for toggling -->    
    26.             <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">    
    27.                 <ul class="nav navbar-nav">    
    28.                     <li class="active"><a href="#">1st LINK</a></li>    
    29.                     <li><a href="#">2nd Link</a></li>    
    30.                     <li class="dropdown">    
    31.                         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Link Dropdown<span class="caret"></span></a>    
    32.                         <ul class="dropdown-menu">    
    33.                             <li><a href="#">SubLink1</a></li>    
    34.                             <li><a href="#">SubLink2</a></li>    
    35.                             <li><a href="#">SubLink3</a></li>    
    36.                             <li role="separator" class="divider"></li>    
    37.                             <li><a href="#">SubLink4</a></li>    
    38.                             <li role="separator" class="divider"></li>    
    39.                             <li><a href="#">SubLink5</a></li>    
    40.                         </ul>    
    41.                     </li>    
    42.                 </ul>                  
    43.                 <ul class="nav navbar-nav navbar-right">    
    44.                     <li><a href="#">Right side links</a></li>    
    45.                     <li class="dropdown">    
    46.                         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Link Dropdown<span class="caret"></span></a>    
    47.                         <ul class="dropdown-menu">    
    48.                             <li><a href="#">1st Link</a></li>    
    49.                             <li><a href="#">2nd Link</a></li>    
    50.                             <li><a href="#">3rd Link</a></li>    
    51.                             <li role="separator" class="divider"></li>    
    52.                             <li><a href="#">4th Link</a></li>    
    53.                         </ul>    
    54.                     </li>    
    55.                 </ul>    
    56.             </div>    
    57.             <!-- /.navbar-collapse -->    
    58.         </div>    
    59.         <!-- /.container-fluid -->    
    60.     </nav>    
    61.     <div class="container">    
    62.         @RenderBody()    
    63.     </div>    
    64.     
    65.     
    66.     @Scripts.Render("~/js")    
    67.     @RenderSection("scripts", required: false)    
    68. </body>    
    69. </html>  
  • In the code given above we define the layout for entire project.

  • @Styles.Render("~/css") this is used to render the css files that included in the bundleConfig.cs file.

  • In the body tag nav bar is placed that is used to place the links for the page redirection.

  • This layout of bootstrap is fully responsive.

  • @RenderBody() is used to render the content on the page.

  • @Scripts.Render("~/js") include all the js files that included in the BundleConfig.cs file.

  • Now HomeController is created automatically inside the controllers folder.

  • View against the ActionResult is also created automatically.

  • Now inside the views folder find folder named Home ,find Index.cshtml view inside the Home folder.

  • Replace the code with the below given code.
    1. @{    
    2.     ViewBag.Title = "Home Page";    
    3. }    
    4. <h1>Your 1st MVC app created.</h1><br />    
    5. <h1><a href="">Click here next part is pretty intresting.</a></h1>  
    Now run the application.Result will look like this.

    result

Start with your own project.

Similar Articles