Book Image

Bootstrap for ASP.NET MVC - Second Edition

By : Pieter van der Westhuizen
Book Image

Bootstrap for ASP.NET MVC - Second Edition

By: Pieter van der Westhuizen

Overview of this book

One of the leading open source frontend frameworks, Bootstrap has undergone a significant change and introduced several features that make designing compelling, next-generation UIs much simpler. Integrating Bootstrap with ASP.NET's powerful components can further enhance its capabilities. This book guides you through the process of creating an ASP.NET MVC website from scratch using Bootstrap. After a primer on the fundamentals of Bootstrap, you will learn your way around and create a new ASP.NET MVC project in Visual Studio. You will move on to learn about the various Bootstrap components as well as techniques to include them in your own projects. The book includes practical examples to show you how to use open-source plugins with Bootstrap and ASP.NET MVC and guides you through building an ASP.NET MVC website using Bootstrap, utilizing layout and user-interface components. At the end of this book, you will find some valuable tips and tricks to help you get the most out of your Bootstrap-integrated and ASP.NET MVC-integrated website.
Table of Contents (15 chapters)
Bootstrap for ASP.NET MVC Second Edition
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface

Creating a MVC Layout page


The final step for using Bootstrap 4 in your ASP.NET MVC project is to create a Layout page that will contain all the necessary CSS and JavaScript files in order to include Bootstrap components in your pages. To create a Layout page, follow these steps:

  1. Add a new sub folder called Shared to the Views folder.

  2. Add a new MVC View Layout Page to the Shared folder. The item can be found in the .NET Core | Server-side category of the Add New Item dialog.

  3. Name the file _Layout.cshtml and click on the Add button:

  4. With the current project layout, add the following HTML to the _Layout.cshtml file:

    <!DOCTYPE html> 
            <html lang="en"> 
              <head> 
                <meta charset="utf-8"> 
                <meta name="viewport" content="width=device-width,
                 initial-scale=1, shrink-to-fit=no"> 
                <meta http-equiv="x-ua-compatible" content="ie=edge"> 
                <title>@ViewBag.Title</title> 
                <link rel="stylesheet" href="~/css/bootstrap.css" /> 
              </head> 
             <body> 
               @RenderBody() 
     
                <script src="~/lib/jquery/dist/jquery.js"></script> 
                <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script> 
             </body> 
            </html> 
    
  5. Finally, add a new MVC View Start Page to the Views folder called _ViewStart.cshtml. The _ViewStart.cshtml file is used to specify common code shared by all views.

  6. Add the following Razor markup to the _ViewStart.cshtml file:

            @{ 
                Layout = "_Layout"; 
            } 
    
  7. In the preceding mark-up, a reference to the Bootstrap CSS file that was generated using the Sass source files and Gulp is added to the <head> element of the file. In the <body> tag, the @RenderBody method is invoked using Razor syntax.

  8. Finally, at the bottom of the file, just before the closing </body> tag, a reference to the jQuery library and the Bootstrap JavaScript file is added. Note that jQuery must always be referenced before the Bootstrap JavaScript file.

Content Delivery Networks

You could also reference the jQuery and Bootstrap library from a Content Delivery Network (CDN). This is a good approach to use when adding references to the most widely used JavaScript libraries. This should allow your site to load faster if the user has already visited a site that uses the same library from the same CDN, because the library will be cached in their browser.

In order to reference the Bootstrap and jQuery libraries from a CDN, change the <script> tags to the following:

<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script> 

Note

You can download the example code files for this book from https://github.com/Pietervdw/bootstrap-for-aspnetmvc.

There are a number of CDNs available on the Internet; listed here are some of the more popular options: