Layouts & Partial Views

Learn how to share common page structure with layouts and reuse view fragments with partial views.

Layouts

A layout (typically `_Layout.cshtml`) defines the shared HTML shell — navigation, footer, common styles — that wraps every page, similar to a master template.

_Layout.cshtml

<!DOCTYPE html>
<html>
<head><title>@ViewData["Title"]</title></head>
<body>
    <nav>My Site</nav>
    <main>
        @RenderBody()
    </main>
    <footer>© 2026</footer>
</body>
</html>

Index.cshtml

@{
    ViewData["Title"] = "Home Page";
    Layout = "_Layout";
}

<h1>Welcome!</h1>

Sections

Sections let individual pages inject content into specific spots of the layout, like a page-specific script block.

@section Scripts {
    <script src="page-specific.js"></script>
}

Partial Views

A partial view is a reusable fragment of markup — like a product card or a comment — rendered inside another view.

<!-- _TaskCard.cshtml -->
<div class="card">
    <h3>@Model.Title</h3>
    <p>Priority: @Model.Priority</p>
</div>

<!-- Used inside another view -->
@foreach (var task in Model.Tasks)
{
    <partial name="_TaskCard" model="task" />
}

FAQs

When should I use a partial view vs a full component?

Partial views are great for simple, static reusable markup. For anything with its own logic or state, a View Component or Razor Component (Blazor) is a better fit.

Summary

Layouts define shared page structure that wraps individual views.
RenderBody() marks where the page-specific content is inserted.
Partial views let you reuse small markup fragments across pages.

Next Lesson →