Creating a MVC layout page

The last step in creating a Bootstrap 4 enabled ASP.NET MVC project is to create a master layout page that will reference the Bootstrap CSS and JavaScript files. To create the layout page, complete the following steps:

  1. Add a new file called _Layout.cshtml to the ViewsShared folder.
  2. Add the following HTML to the file:
            <!DOCTYPE html> 
        <html> 
        <head> 
            <meta charset="utf-8" /> 
            <meta name="viewport" content="width=device-width,
             initial-scale=1.0" /> 
            <title>My Bootstrap Site</title> 
            <link rel="stylesheet" href="~/css/bootstrap.css" />     
        </head> 
        <body> 
 
            <div class="container body-content"> 
                @RenderBody() 
                <hr /> 
                <footer> 
                    <p>&copy; @DateTime.Now.Year - Your Bootstrap 4 site</p> 
                </footer> 
            </div> 
 
        </body> 
        </html>
  3. Save the file.
  4. In order to use the layout file, add a new file called Index.cshtml to the Views/Home folder and set its contents to the following:
            @{ 
            Layout="~/Views/Shared/_Layout.cshtml"; 
        } 
        <h1>This is my Bootstrap 4 site. </h1>

Testing the site

In order to test the site, you'll need to switch back to the command prompt and enter the following command in order to start the Kestrel web server and run your site:

dotnet run

A message will be displayed, stating that the web server is listening on http://localhost:5000. Open your browser and navigate to the URL. You should see your website running inside the browser with the default Bootstrap 4 styling.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.139.83.62