Thursday, August 15, 2019

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"> 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> @{
     Layout = "_Layout";
     }
    Content Delivery Networks
    <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
    x
    x
  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:
  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 @RenderBodymethod 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.
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:
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:
source : https://subscription.packtpub.com/book/web_development/9781785889479/1/ch01lvl1sec14/creating-a-mvc-layout-page
Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)