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.
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.
After that a window appears select Internet Application and click OK.
Mvc project will be created.
SolutionExplorer shows many 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.
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. }
9. public static void StyleBundle(BundleCollection bundles)
10. {
11. bundles.Add(new StyleBundle("~/css")
12. .Include("~/Content/bootstrap.css"));
13. }
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>
12. <nav class="navbar navbar-inverse">
13. <div class="container-fluid">
14. 
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>
25. 
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. 
58. </div>
59. 
60. </nav>
61. <div class="container">
62. @RenderBody()
63. </div>
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.

Start with your own project.

5 Comments

Join the conversation! Your thoughts help the community grow.

kawtare Omri3y ago
Merci Salhil
Lindokuhle Nene8y ago
Thank you. However if you are looking for a tutorial to show you how to set up a bootstrap theme into your MVC app watch this video https://www.youtube.com/watch?v=PhaDvEpzbYM&t=73s
Sahil Saini10y ago
Thanks
Santhakumar Munuswamy10y ago
Thank you for nice share
Vignesh Mani10y ago
Nice one