Layouts and Partial Views

Analogy categoryAnalogies

Layout Pages: A Shared Page Shell

A layout page, conventionally named _Layout.cshtml and stored in Views/Shared, defines the common HTML shell (head, navigation, footer) that wraps every individual view's content. A view opts into a layout either by setting Layout = "~/Views/Shared/_Layout.cshtml" in its own @{ } block, or more commonly by leaving that unset and letting Views/_ViewStart.cshtml apply a default layout to every view in the application, avoiding repetition across dozens of views.

🏏

Cricket analogy: Like every match at a given stadium sharing the same pitch, boundary rope, and sightscreen setup regardless of which two teams are playing, _Layout.cshtml provides the shared shell that every individual view's content plays out within.

RenderBody, RenderSection, and _ViewStart

Inside _Layout.cshtml, @RenderBody() marks the single spot where the calling view's main content is injected; every layout must call it exactly once. @RenderSection("Scripts", required: false) defines an optional named slot that individual views can fill using @section Scripts { ... }, commonly used for page-specific JavaScript placed at the bottom of the layout for performance. _ViewStart.cshtml runs before every view in its directory (and subdirectories) and typically just sets Layout = "~/Views/Shared/_Layout.cshtml", centralizing that assignment instead of repeating it in every view.

🏏

Cricket analogy: Like a designated 'drinks break' slot in a Test match schedule that's mandatory once per session, while an optional extra strategy huddle can be called only if a captain requests it, RenderBody is the mandatory slot and RenderSection is the optional one.

cshtml

<!-- Views/Shared/_Layout.cshtml -->
<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title - MyStore</title>
    <link rel="stylesheet" href="~/Content/site.css" />
</head>
<body>
    @Html.Partial("_NavBar")

    <div class="container">
        @RenderBody()
    </div>

    @Html.Partial("_Footer")

    <script src="~/Scripts/jquery.js"></script>
    @RenderSection("Scripts", required: false)
</body>
</html>

<!-- Views/_ViewStart.cshtml -->
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

Partial Views: Reusable Fragments

A partial view is a smaller .cshtml file, typically prefixed with an underscore like _ProductCard.cshtml, rendered inline via @Html.Partial("_ProductCard", product) or the async Html.RenderPartial / Html.PartialAsync variants. Unlike a layout, a partial view doesn't wrap other content, it is content, and it's ideal for markup repeated across multiple views, such as a navigation bar, a shopping-cart mini-summary, or a single row in a table that both the main list view and an AJAX-refreshed update reuse identically.

🏏

Cricket analogy: Like a broadcaster reusing the same 'player stats' graphic template across every innings without redesigning it each time, a partial view like _PlayerStats.cshtml is rendered wherever needed instead of duplicating that markup in every view.

Html.RenderPartial() writes directly to the response stream and returns void, so it must be called inside an explicit code block like @{ Html.RenderPartial("_Footer"); } rather than with the @ expression syntax; using @Html.RenderPartial(...) will not compile. Html.Partial(), by contrast, returns an MvcHtmlString and can be used with @ directly.

Choosing Between Partial Views, Layouts, and Sections

Use a layout when you need a whole-page wrapper applied consistently, such as the header/footer shell every page shares. Use a partial view when you need a reusable content fragment that multiple, otherwise-different views embed, such as a card component reused in a grid and a detail page. Use @section blocks when a specific view needs to inject content into a specific, named slot the layout defines, such as page-specific meta tags or a script bundle that shouldn't load on every page.

🏏

Cricket analogy: Like choosing between the fixed stadium structure (layout), a reusable graphic overlay used across multiple broadcasts (partial view), and an optional special commentary segment only aired for a specific match (section), each MVC tool matches a different scope of reuse.

_Layout.cshtml defines the shared page shell; @RenderBody() marks the single required slot for the calling view's content.
_ViewStart.cshtml centralizes the Layout = "..." assignment so every view doesn't need to repeat it.
@RenderSection("Name", required: false) defines an optional named slot filled per view with @section Name { ... }.
Partial views (e.g. _ProductCard.cshtml) are reusable content fragments, not page wrappers, rendered via Html.Partial().
Html.RenderPartial() writes directly to the output and must be called in a code block, not with @ expression syntax.
Choose layouts for whole-page shells, partial views for reused fragments, and sections for optional named layout slots.