text ASP.NET MVC AND BOOTSTRAP

Posted 2021-05-03

#######################################
0. Latest stable version

	3.3.7

0.1 Requirements
Bootstrap needs jQuery. Bootstrap 3.3.7 supports jQuery version 1.9.1 to 3. 
So download minified jQuery core 3.0.0 from https://code.jquery.com/jquery-3.0.0.min.js.
	
#######################################
0. How to find Bootstrap version in existing MVC project

	1. Tools ->
			NuGet Package Manager ->
				Package Manager for Solution ->
					Locate Bootstrap ->
						(On right screen -> See version)

	2. Get-Packages


1. How to add bootstrap to asp.net mvc (NuGet)

	- If we are using Default MVC template -> Bootstrap will be automatically added 
	  (VS2015+) as a Nuget Package. The default bootstrap will be of older version 
	  (usually 3.0.0). We have to upgrade BootStrap Nuget Packageto add the latest version.
	  
	  As I’ve mentioned earlier, the default user interface of the project is bootstrap. 
	  If you check the code in the ../Views/Shared/_Layout.cshtml file, you ca see the 
	  bootstrap template with bootstrap navbar and container.
	  
2. How to Upgrade to Current Bootstrap Version
	File ->
		New ->
			Project ->
				Manage NuGet Packages For Solution ->
					Select BootStrap package -> Version visible in right panel
					Select project name in the right panel of NuGet screen + Install
					Upgrade all other Nuget Packages that depend (jQuery / Antlr)
					
					
3. Where are bootstrap files located in project
Bootstrap files are located in 3 folders:
		/Content/
			bootstrap-theme.css
			bootstrap-theme.css.map
			bootstrap-theme.min.css
			bootstrap-theme.min.css.map
			bootstrap.css
			bootstrap.css.map
			bootstrap.min.css
			bootstrap.min.css.map
		/fonts/
			glyphicons*
		/Scripts/
			bootstrap.js
			bootstrap.min.js
			
4. Bootstrap grid system
The bootstrap grid system is handled in the views. For example, if you open the ../Views/Home/Index.cshtml file, you can see the grids and columns of bootstrap.

5. How to add bootstrap in ASP.NET MVC (Manual)
	1. Create Empty MVC project (Empty MVC projects will have no bootstrap on)
			Empty Template + MVC selected
	2. Download Bootstrap http://getbootstrap.com.
	3. Copy the folders css, fonts, js from the downloaded zip file and paste them to the MVC project folder
	4. Go to the visual studio solution explorer and include the folders to the project. (In case if you are 
	   not familiar with including the files and  folders to a project: 
			(a) Select the project in solution explorer and press the Show All Files icon. 
			(b) The bootstrap folders which we have pasted to the project folder will be 
			    visible in doted lines now. Select the folders css, fonts and js and right-click. 
				From the right-click menu, select Include in Project. The folders are included in the MVC project.)
	5. Bootstrap needs jQuery. Bootstrap 3.3.7 supports jQuery version 1.9.1 to 3. So download minified jQuery
	   core 3.0.0 from https://code.jquery.com/jquery-3.0.0.min.js.
	6. Place the file jquery-3.0.0.min.js under the project’s js folder. Include the file to the project, just 
	   like how we have included the bootstrap files.
	
	
	
########################################
# HOW TO USE BOOTSTRAP WITH ASP.NET MVC

Using Bootstrap In MVC
To use the bootstrap in the project, you have to add a bootstrap template. 
Bootstrap template is nothing but the bootstrap navigation bar and container.

In a MVC project you can add the navigation bar and container in the Layout file
 and the bootstrap grid and column system in the views. Follow these steps to 
 implement the template.

	1. Create a folder named Shared under Views.
	2. Under the Shared folder, add a layout page named _Layout.cshtml.
	3. Remove the content in the _Layout.cshtml file and paste the below code. This file has the important codes required for the bootstrap to work. See the highlighted part of the code below. The first block has the 3 meta tags which are required for bootstrap. These 3 meta tags should immediately follow the . The next part in the head section is the bootstrap’s css file reference. In the body tag, we will have the navigation bar defined by the class navbar. Then the @RenderBody() is wrapped by the bootstrap’s container class. Finally, we have the script reference for the jQuery and Bootstrap js file. (NOTE: I’m not going to use bundling technique for the css and js files in this article. Just like any other css and js file you can bundle the bootstrap css and js files using bundle config and use the @Style.Render and @Script.Render to include the bundled files.) The content of _Layout.cshtml is also available here in GitHub.
		<!DOCTYPE html>
		<html>
			<head>
				<meta charset=”utf-8″>
				<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
				<meta name=”viewport” content=”width=device-width, initial-scale=1″>

				<title>@ViewBag.Title – MyTecBits.com Application</title>

				<link href=”/css/bootstrap.min.css” rel=”stylesheet”>
			</head>
			
			<body style=”padding-top: 70px;”>
				<div class=”navbar navbar-inverse navbar-fixed-top”>
					<div class=”container”>
						<div class=”navbar-header”>
							<button type=”button” class=”navbar-toggle” data-toggle=”collapse” data-target=”.navbar-collapse”>
								<span class=”icon-bar”></span>
								<span class=”icon-bar”></span>
								<span class=”icon-bar”></span>
							</button>
						@Html.ActionLink(“MyTecBits.com Sample”, “Index”, “Home”, new { area = “” }, new { @class = “navbar-brand” })
						</div>
					<div class=”navbar-collapse collapse”>
						<ul class=”nav navbar-nav”>
							<li>@Html.ActionLink(“Home”, “Index”, “Home”)</li>
							<li><a href=”#”>About</a></li>
							<li><a href=”#”>Contact</a></li>
						</ul>
					</div>
				</div>
			</div>

			<div class=”container body-content”>
				@RenderBody()
			<hr />
	<footer>
		<p>&copy; @DateTime.Now.Year – My ASP.NET Application</p>
	</footer>
</div>

<script src=”/js/jquery-3.0.0.min.js”></script>
<script src=”/js/bootstrap.min.js”></script>

@RenderSection(“scripts”, required: false)
</body>
</html>

#
Create another layout file, under Views and name it _ViewStart.cshtml.
Remove all the content in the _ViewStart.cshtml file and paste the below code. 
This is just to specify the Layout file while rendering of the views.

@{
Layout = “~/Views/Shared/_Layout.cshtml”;
}

Now you have to create a view, which will have the bootstrap’s grid and column classes.
Right click the Controllers folder. From the right-click menu select Add >> Controller.
From the Add Scaffold pop-up window, Select MVC 5 Controller with read/wright actions.
Name the controller as HomeController. The HomeController.cs controller class file is 
created under the Controllers folder. A sub-folder named Home is also created under the 
Views folder.

Now, add a view named Index under the Home folder. When adding a view make sure to select 
the layout page you have created earlier.


Add Bootstrap In ASP.NET MVC 26
In the Index.cshtml view page, you can do the bootstrap grid layout using row and column classes. 
Below is the sample content, I’ve added to the index view.
Add Bootstrap In ASP.NET MVC 27
To know more about using the bootstrap classes with server-side HTML controls and MVC’s HTML Helpers see the section below.

Sample ASP.NET Web Forms Source Code
The sample MVC project is available in GitHub: https://github.com/mytecbits/MyTecBits-Bootstrap-Empty-MVC

Web Page In Desktop Mode
Add Bootstrap In ASP.NET MVC 28

Web Page In Mobile Mode
Add Bootstrap In ASP.NET MVC 29

 

E. Adding Bootstrap In ASP.NET From CDN
Bootstrap is also available at several content delivery networks (CDN). The recommended 
CDN for bootstrap is MaxCDN. To add the bootstrap in your ASP.NET project (both MVC and Web Forms), 
use the below cdn references instead of downloading and adding it to your project. Using 
CDN will help you to improve the performance of your web page, but the disadvantage is, you have 
to be connected to internet for this to work, even in development or production environment.

1. In <Head> Section Before Any Other Head Content:
	<meta charset=”utf-8″>
	<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
	<meta name=”viewport” content=”width=device-width, initial-scale=1″>
	<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css” integrity=”sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u” crossorigin=”anonymous”>

2. Just Before </Body> Tag:
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js” integrity=”sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa” crossorigin=”anonymous”></script>

 

F. Using Bootstrap Classes With ASP.NET Controls
The bootstrap components can be implemented in the web site element using the style sheet classes. 
In ASP.NET, there are several types of controls like the server-side HTML Controls, Web Form Controls, 
MVC’s HTML Helpers, etc… Below are few of the examples of using bootstrap classed in different types of controls.

Adding Bootstrap Classes In Server Side HTML Controls
Using bootstrap in server-side HTML controls (with runat = server) is straight forward, you just need 
to add the class attribute and add the required bootstrap classes in it.

For example, In the input html control
	
	<input type=”text” id=txtFirstName size=25 runat=server>

you can add the bootstrap class (class=”form-control”) like this:

	<input type=”text” id=Text1 size=25 runat=server class=”form-control”>


######
# HOW TO ADD BOOTSTRAP STYLES TO OTHER ASP.NET CONTROLS
Add Bootstrap In ASP.NET Controls

You can use the same technique in other server-side html controls like button, textarea, checkbox, radio, 
select (list box), etc…

######
Adding Bootstrap Classes In Web Form Controls
Now, we’ll see how to add bootstrap classes to the web form controls like <asp:Label id=Label1 runat=”server”>Label</asp:Label>.

In a web form control you can use the CssClass attribute to add the bootstrap classes to the control.

For example, in the label control

	<asp:Label id=Label1 runat=”server”>Warning from MyTecBits.com!…</asp:Label>

you can add the warning alert bootstrap class “alert alert-warning” like this:

	<asp:Label id=Label1 runat=”server” CssClass=”alert alert-warning”>Warning from MyTecBits.com!…</asp:Label>


#######
Add Bootstrap In ASP.NET Controls

Similarly you can use the CssClasses attribute to add the bootstrap classes in other Web Form Controls as well.

While using bootstrap style in GridView control, you have to perform an additional step. The details are 
available in the article Applying bootstrap styles to GridView control.


########
# ADDING BOOTSTRAP IN MVC HTML HELPER
Adding Bootstrap Classes In MVC’s HTML Helpers
Adding bootstrap classes to HTML Helpers is simple, but not as straight forward as in Web Form Controls or 
HTML Server-Side controls. To add style classes to HTML Helpers, you have to overload it. If you want to 
create a bootstrap link button using the @Html.ActionLink, then you have to overload it with the htmlAttributes object.

For example, in the action link

@Html.ActionLink(“Go Home”,”Index”,”Home”)

you can add the bootstrap’s button class “btn btn-default” like this:

@Html.ActionLink(“Go Home”, “Index”, “Home”, null, new { @class = “btn btn-default”})



#############################################
# USEFUL LINKS

# INFORMATION ON BOOTSTRAP
http://www.mytecbits.com/microsoft/dot-net/how-to-add-bootstrap-in-asp-net#MvcNuGet

# INSTRUCTION ON USING BOOTSTRAP STYLE SHEET VERSION 3 WITH WEB FORMS
http://www.mytecbits.com/microsoft/dot-net/bootstrap-3-0-0-with-asp-net-web-forms

# INSTRUCTION ON USING BOOTSTRAP STYLE SHEET VERSION 3 WITH MVC 5 ENTITY FRAMEWORK 6 WITH DATA FIRST MODEL
http://www.mytecbits.com/microsoft/dot-net/bootstrap-3-with-mvc-5-and-entity-framework-6-database-first