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 business layer that is classes and the properties.
  • View is the part that deals with the display of data on the screen.
  • Controller interacts with the view and gets 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