Chapter 3: WebPages Layout

What is Page Layout in ASP.NET Web Pages?

It’s a system to create a consistent look and structure across all (or many) pages using:

• One layout template file (usually named _Layout.cshtml)
• Content pages that “plug into” this template
• Special Razor helpers like @RenderBody(), @RenderSection(), and @RenderPage()

Key players:

• _Layout.cshtml → the master template (HTML skeleton + common parts)
• Content pages (like Index.cshtml, About.cshtml) → only the unique stuff
• @RenderBody() → the “hole” where your page’s main content goes
• @RenderSection() → optional extra holes for things like page-specific scripts or styles
• @RenderPage() → way to include reusable mini-blocks (like a header or sidebar)

Important convention — Files starting with _ (underscore) are protected. You can’t browse them directly in the browser (e.g., /_Layout.cshtml gives 404). Perfect for templates!

Why Use It? (Teacher motivation speech)

• Consistency → same header/footer everywhere
• Easy updates → change one file, all pages update
• Cleaner code → content pages are short & focused
• Professional → looks like modern sites (think WordPress themes)

This is almost identical to how ASP.NET Core Razor Pages layouts work today — so learning it now pays off later!

How It Works – Step by Step with Real Examples

Step 1: Create the Layout File – _Layout.cshtml

Put this in the root or in a Shared folder (common practice).

_Layout.cshtml (basic version)

Key parts explained:

• @RenderBody() → mandatory! This is where the content from your page (Index.cshtml etc.) will appear.
• @RenderSection(“scripts”, required: false) → optional named section. Content pages can fill it if they want (e.g., add extra JS).
  • required: false = no error if page doesn’t provide it
  • If required: true → every page must define that section or error!
• You can have many @RenderSection() calls (e.g., “head”, “styles”, “footer-scripts”)

Step 2: Create a Content Page that Uses the Layout

Index.cshtml (your home page)

What happens when browser requests /Index ?

1. Server loads Index.cshtml
2. Sees Layout = … → loads _Layout.cshtml instead
3. Runs Index’s code blocks and sections
4. Renders _Layout’s HTML
5. Inserts Index’s main content at @RenderBody()
6. Inserts the @section scripts { … } at @RenderSection(“scripts”, …)
7. Sends beautiful full HTML to browser

Step 3: Reusable Blocks with @RenderPage()

Sometimes you want small reusable pieces (not full layout).

Create _Header.cshtml

Then in _Layout.cshtml or any page:

Or simpler (no params):

@RenderPage() inserts the entire output of that file right there.

Full Picture – Folder Structure (Recommended)

Bonus Teacher Tips (2026 style)

• Use PageData[“key”] or ViewBag.key to pass data to included files (like title).
• For global startup stuff (DB connection strings, email settings) → use _AppStart.cshtml (runs automatically on app start, also protected by _).
• In modern ASP.NET Core → same ideas, but folder is usually Pages/Shared/_Layout.cshtml, and it’s @await RenderSectionAsync(“scripts”, false) (async version).

Summary – Like Closing the Blackboard

ASP.NET Web Pages Page Layout = template system with:

• _Layout.cshtml as master template
• @RenderBody() for main content
• @RenderSection() for optional extras (scripts, head stuff)
• @RenderPage() for small reusable includes
• Layout = “…” in content pages to connect them

One change in layout → entire site updates. Magic!

Questions for homework? 😄

• Want to see a full site example with menu highlighting active page?
• How to make different layouts for admin vs public pages?
• Difference from Classic ASP includes?
• Or next topic: WebPages Folders / Global?

Tell me — next class is ready! Keep building, Webliance — you’re nailing this! 🚀🇮🇳