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>© 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>