Creating the master layout

You've added the CSS and JavaScript files needed to create the master layout file for your project. Next, you need to create a home controller as well as a master layout file. To do this, complete the following steps:

  1. Add a new empty controller called HomeController to the Controllers folder by right-clicking on it and selecting Add | New Item....
  2. Select MVC Controllers Class from the list of project items and click on the Add button.
  3. Next, right-click on the Views folder in your project and navigate to Add | New Folder. Name the folder Shared.
  4. Right-click on the newly created Shared folder and navigate to Add | New Item...
  5. Select MVC View Layout Page in the list of project items and keep the name of the file as _Layout.cshtml and click on Add.
  6. Open the index.html file in the Bootstrap 4 Admin Dashboard template source files and copy its contents to the _Layout.cshtml file.
  7. Change the <head> tag to reference the styles.css folder in the correct folder, as illustrated in the following code:
            <head> 
            <meta charset="utf-8"> 
            <title>Bootstrap 4 Dashboard</title> 
            <meta name="description" content="A admin dashboard theme that will 
                get you started with Bootstrap 4." /> 
            <meta name="viewport" content="width=device-width, 
                initial-scale=1.0"> 
 
            <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap
                /4.0.0-alpha/css/bootstrap.min.css" /> 
            <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/
                font-awesome.min.css" rel="stylesheet" /> 
            <link rel="stylesheet" href="~/css/styles.css" /> 
        </head>
  8. Update the following code just above the closing </body> tag:
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1
        /jquery.min.js"></script> 
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js        
        /bootstrap.min.js"></script> 
        <script src="~/js/scripts.js"></script>
  9. Next, you'll notice that the page is divided into distinguishable elements:
    • A <nav> class that contains the site's navigation menu
    • A <div> with an ID of main
    • * A <div> with a class name of .col-md-9 col-lg-10 main
  10. Leave the <nav> and <div> tags with an ID of main as is, and replace all markup inside the <div class="col-md-9 col-lg-10 main"> element with the @RenderBody() method.
  11. Next, add a new file called _ViewStart.cshtml to the root of the Views folder. In order to enable all views to use the new layout file, change its contents to this:
            @{
         Layout = "_Layout";
         }
  12. The master layout is now complete; next, you'll need to add a view for the Index action in the home controller.
..................Content has been hidden....................

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