Layout Pages

Learning objectives#

• Build a layout with RenderBody
• Define optional and required sections
• Set the default layout in _ViewStart
• Pass a page title from views to the layout

Explanation#

A layout is a view (by convention Views/Shared/_Layout.cshtml) with the full HTML page. It calls @RenderBody() exactly once, where the current view’s output goes.

Views/_ViewStart.cshtml runs before every view and sets Layout = "~/Views/Shared/_Layout.cshtml", so views use it automatically. A view can set a different Layout or Layout = null.

Sections let a view put content in other places of the layout: the view writes @section scripts { ... } and the layout calls @RenderSection("scripts", required: false). If a section is required and missing, rendering fails.

The view runs before the layout, so values set in the view (ViewBag.Title) are available in the layout’s <title>.

IsSectionDefined("sidebar") lets the layout show default content when a view does not provide a section.

Syntax#

1@* _Layout.cshtml *@
2<title>@ViewBag.Title</title>
3<main>@RenderBody()</main>
4@RenderSection("scripts", required: false)
5

6@* A view *@
7@{ ViewBag.Title = "Cart"; }
8<h1>Your cart</h1>
9@section scripts { <script src="~/Scripts/cart.js"></script> }

Code example: A layout with a title, a body and two sections#

1// Controllers/PagesController.cs
2using System.Web.Mvc;
3

4namespace ShopSite.Controllers
5{
6    public class PagesController : Controller
7    {
8        public ActionResult Cart() => View();
9        public ActionResult Terms() => View();
10    }
11}
12

13@* Views/_ViewStart.cshtml *@
14@{
15    Layout = "~/Views/Shared/_Layout.cshtml";
16}
17

18@* Views/Shared/_Layout.cshtml *@
19<!DOCTYPE html>
20<html>
21<head>
22    <title>@ViewBag.Title | Shop</title>
23</head>
24<body>
25    <header><a href="/">Shop</a></header>
26    <aside>
27        @if (IsSectionDefined("sidebar"))
28        {
29            @RenderSection("sidebar")
30        }
31        else
32        {
33            <p>Free delivery over 500 rupees</p>
34        }
35    </aside>
36    <main>
37        @RenderBody()
38    </main>
39    <footer>&copy; 2026 Shop</footer>
40    @RenderSection("scripts", required: false)
41</body>
42</html>
43

44@* Views/Pages/Cart.cshtml *@
45@{ ViewBag.Title = "Your cart"; }
46<h1>Your cart</h1>
47<p>2 items</p>
48@section sidebar {
49    <p>Have a coupon? Apply it at checkout.</p>
50}
51@section scripts {
52    <script src="/Scripts/cart.js"></script>
53}
54

55@* Views/Pages/Terms.cshtml *@
56@{ ViewBag.Title = "Terms"; }
57<h1>Terms of sale</h1>

GET /Pages/Cart
200 OK
<!DOCTYPE html>
<html>
<head>
    <title>Your cart | Shop</title>
</head>
<body>
    <header><a href="/">Shop</a></header>
    <aside>
    <p>Have a coupon? Apply it at checkout.</p>
    </aside>
    <main>
<h1>Your cart</h1>
<p>2 items</p>
    </main>
    <footer>&copy; 2026 Shop</footer>
    <script src="/Scripts/cart.js"></script>
</body>
</html>

GET /Pages/Terms
200 OK
<!DOCTYPE html>
<html>
<head>
    <title>Terms | Shop</title>
</head>
<body>
    <header><a href="/">Shop</a></header>
    <aside>
            <p>Free delivery over 500 rupees</p>
    </aside>
    <main>
<h1>Terms of sale</h1>
    </main>
    <footer>&copy; 2026 Shop</footer>
</body>
</html>

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. _ViewStart sets the layout for every view in the Views folder.
2. Cart.cshtml runs first: it sets ViewBag.Title, produces its body HTML and defines two sections.
3. The layout then runs. The title uses the value set by the view, RenderBody inserts the body, and the sections appear where RenderSection is called.
4. Terms defines no sections, so the layout shows the default sidebar text and the optional scripts section renders nothing.

Real-world use case#

Common mistakes#

Best practices#

• One main layout plus specialised layouts (admin, print) that can nest
• Put scripts in a scripts section at the end of the body
• Use IsSectionDefined for sensible defaults
• Keep layouts free of business logic; use child actions or partials for menus

Remember this#

Practice exercise#

1// Controllers/PrintController.cs
2using System.Web.Mvc;
3

4namespace ShopSite.Controllers
5{
6    public class PrintController : Controller
7    {
8        public ActionResult Invoice() => View();
9    }
10}
11

12@* Views/Shared/_PrintLayout.cshtml *@
13<!DOCTYPE html>
14<html>
15<head><title>Print</title></head>
16<body class="print">
17@RenderBody()
18</body>
19</html>
20

21@* Views/Print/Invoice.cshtml *@
22@{ Layout = "~/Views/Shared/_PrintLayout.cshtml"; }
23<h1>Invoice #1001</h1>

GET /Print/Invoice
200 OK
<!DOCTYPE html>
<html>
<head><title>Print</title></head>
<body class="print">
<h1>Invoice #1001</h1>
</body>
</html>

Mini quiz#

Want more? Practise all ASP.NET MVC MCQs · ASP.NET MVC interview questions

Related topics#

My notes#

Saved in this browser.