What is _Layout With Example Code

To include both _header.cshtml and _footer.cshtml partial views in your _Layout.cshtml page and pass parameters to them, you can follow similar steps as before. Here's how you can do it




<!DOCTYPE html>
<html>
<head>
    <!-- Your head content here -->
       <partial name="_head.cshtml"/>
</head>
<body>
    <!-- Include the header partial view and pass parameters -->
    <partial name="_header.cshtml" />
 
    <main role="main" class="container">
        <!-- Main content -->
        @RenderBody()
    </main>
 
    <!-- Include the footer partial view and pass parameters -->
    <partial name="_footer.cshtml" />
</body>
</html>
 

<!DOCTYPE html>
<html>
<head>
    <!-- Your head content here -->
</head>
<body>
    <!-- Include the header partial view and pass parameters -->
    <partial name="_header.cshtml" model="@ViewData" />
 
    <main role="main" class="container">
        <!-- Main content -->
        @RenderBody()
    </main>
 
    <!-- Include the footer partial view and pass parameters -->
    <partial name="_footer.cshtml" model="@ViewData" />
</body>
</html>
 
 

<!-- _header.cshtml -->
 
<header>
    <h1>This is the header</h1>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact</a></li>
        </ul>
    </nav>
</header>
 
 
<!-- _footer.cshtml -->
 
<footer>
    <p>&copy; 2022 My Website. All rights reserved.</p>
</footer>
 
 
 
<!-- _head.cshtml -->
 
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - My Website</title>
<link rel="stylesheet" href="~/css/site.css" />
<script src="~/lib/jquery/jquery.min.js"></script>
<script src="~/lib/bootstrap/js/bootstrap.bundle.min.js"></script>
 

<!DOCTYPE html>
<html>
<head>
    <!-- Your head content here -->
</head>
<body>
    <!-- Include the header partial view and pass parameters -->
    <partial name="_header.cshtml" model="@ViewData" />
 
    <main role="main" class="container">
        <!-- Main content -->
        @RenderBody()
    </main>
 
    <!-- Include the footer partial view and pass parameters -->
    <partial name="_footer.cshtml" model="@ViewData" />
</body>
</html>

 

@*public IActionResult Index()
{
    // Set parameters for header partial view
    ViewData["HeaderParam1"] = "Header Value 1";
    ViewData["HeaderParam2"] = "Header Value 2";
 
    // Set parameters for footer partial view
    ViewData["FooterParam1"] = "Footer Value 1";
    ViewData["FooterParam2"] = "Footer Value 2";
 
    return View();
}
*@

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - WebApplication1</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/WebApplication1.styles.css" asp-append-version="true" />
</head>
<body>
    <!-- Include the header partial view -->
    <partial name="_header.cshtml" />
 
    <!-- Main content -->
    @RenderBody()
 
    <!-- Include the footer partial view -->
    <partial name="_footer.cshtml" />
 
    <!-- Bootstrap core JavaScript-->
    <script src="~/template1/vendor/jquery/jquery.min.js"></script>
    <script src="~/template1/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
 
    <!-- Core plugin JavaScript-->
    <script src="~/template1/vendor/jquery-easing/jquery.easing.min.js"></script>
 
    <!-- Custom scripts for all pages-->
    <script src="~/template1/js/sb-admin-2.min.js"></script>
 
    <!-- Page level plugins -->
    <script src="~/template1/vendor/chart.js/Chart.min.js"></script>
 
    <!-- Page level custom scripts -->
    <script src="~/template1/js/demo/chart-area-demo.js"></script>
    <script src="~/template1/js/demo/chart-pie-demo.js"></script>
    <script src="~/toastr/toastr.min.js"></script>
 
    <!-- Render section for additional scripts -->
    @await RenderSectionAsync("Scripts", required: false)
 
    <!-- Include partial views using different approaches -->
    <!-- Approach 1: Using partial name without extension -->
    <partial name="_PartialName" />
 
    <!-- Approach 2: Using partial name with extension -->
    <partial name="_PartialName.cshtml" />
 
    <!-- Approach 3: Using partial name with path (relative to Views folder) -->
    <partial name="~/Pages/Folder/_PartialName.cshtml" />
 
    <!-- Approach 4: Using partial name with absolute path -->
    <partial name="/Pages/Folder/_PartialName.cshtml" />
 
    <!-- Approach 5: Using Html.PartialAsync with name only -->
    @await Html.PartialAsync("_PartialName")
 
    <!-- Approach 6: Using Html.PartialAsync with name and extension -->
    @await Html.PartialAsync("_PartialName.cshtml")
 
    <!-- Approach 7: Using Html.PartialAsync with path (relative to Views folder) -->
    @await Html.PartialAsync("~/Pages/Folder/_PartialName.cshtml")
 
    <!-- Approach 8: Using Html.PartialAsync with absolute path -->
    @await Html.PartialAsync("/Pages/Folder/_PartialName.cshtml")
 
    <!-- Approach 9: Using RenderPartialAsync with name and passing data -->
    @{
        await Html.RenderPartialAsync("_AuthorPartial", Model.AuthorName);
    }
 
    <!-- Approach 10: Using RenderPartialAsync with model -->
    @model PartialViewsSample.ViewModels.Article
    @{
        await Html.RenderPartialAsync("_AuthorPartial", Model.AuthorName);
        await Html.RenderPartialAsync("_AuthorPartial", Model.PublicationDate);
        var index = 0;
        foreach (var section in Model.Sections)
        {
            await Html.RenderPartialAsync("_ArticleSection", section, new ViewDataDictionary(ViewData) { { "index", index } });
            index++;
        }
    }
</body>
</html>