To maintain a persistent look across our site's pages, we'll use a Layout file. This layout file will use the basic Bootstrap HTML template at first and we'll build onto it as we progress throughout the book. To create this file, complete the following steps:
Create a new
Layoutfile by right-clicking on theViewsfolder in the Visual Studio's Solution Explorer and navigate to Add | New Folder. Name the new folderShared.Next, right-click on the
Sharedfolder and navigate to Add | New Item…. Select the MVC 5 Layout Page (Razor) item template, name the new item_Layout.cshtmland click on Add, as shown in the following screenshot:
After the new file is added to you project, open it and replace its contents with the following HTML markup:
<!DOCTYPE html> <html lang="en"> <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</title> <!-- Bootstrap --> <link href="@Url.Content("~/css/bootstrap.css")" rel="stylesheet"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> @RenderBody() <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="@Url.Content("~/js/bootstrap.js")"></script> </body> </html>In the preceding markup, we set the viewport's
widthproperty to the device's width and theinitial-scalevalue to1. This will cause our site to adapt to the screen size of the device the user is viewing it from.Next, we reference the Bootstrap style sheet by using the
Url.Contenthelper method. This helper method converts a virtual or relative path to an absolute path, making sure that when the web page is opened, the style sheet will be loaded correctly.We then check if the browser accessing the site is Internet Explorer 9 or earlier; if it is, we include the
HTML5Shivworkaround that enables styling of HTML5 elements in Internet Explorer Version 9 and earlier. We also include the version of theRespond JSlibrary suitable for versions of IE9 and earlier.Just before the closing the
<body>tag of the file, we include the jQuery library and thebootstrapJavaScript library.Tip
Note that the
HTML5Shivworkaround, Respond JS, and jQuery files are loaded from a Content Delivery Network (CDN). This is a good approach to use when referencing to most of the widely used JavaScript libraries. This should allow your site to load faster if the user has already visited a site, which uses the same library from the same CDN, because the library will be cached in their browser.