Master Page vs Layout Page in ASP.NET

Sandhiya Priya
Nov 05
670
0
0

Article

Introduction

In ASP.NET applications, we often need a common design for all pages — like a header, a footer, a menu, and company branding.
ASP.NET provides two approaches depending on the technology:

Technology	Template System
ASP.NET Web Forms	Master Page (.master)
ASP.NET MVC / ASP.NET Core	Layout Page (_Layout.cshtml)

Both serve the same purpose — to maintain a consistent UI and avoid repeating code — but they work differently.

1. Master Page in ASP.NET Web Forms

What is a Master Page?

A Master Page acts as a template for multiple pages. It contains common UI elements and ContentPlaceHolder controls where child pages insert content.

Key Features

Centralized design for all pages
Works only in Web Forms
Uses .master and .aspx files

Real-Time Example

Corporate internal portal:
Header (Company Name) + Left Menu + Footer, while each page shows different content like Dashboard, Employee Details, Attendance.

Master Page Example

Site.master

<!DOCTYPE html>
<html>
<head runat="server">
    <title><asp:ContentPlaceHolder ID="HeaderContent" runat="server" /></title>
</head>
<body>
    <header style="background:#1A2A80;color:white;padding:10px;">
        My Company Portal
    </header>
    
    <nav>
        <a href="Home.aspx">Home</a> |
        <a href="Employees.aspx">Employees</a>
    </nav>
    
    <hr />

    <asp:ContentPlaceHolder ID="MainContent" runat="server"></asp:ContentPlaceHolder>

    <footer style="background:#7A85C1;color:white;padding:10px;">
        © 2025 My Company
    </footer>
</body>
</html>

Child Page Example

Home.aspx

<%@ Page MasterPageFile="~/Site.master" %>

<asp:Content ContentPlaceHolderID="MainContent" runat="server">
    <h2>Welcome to HR Portal</h2>
</asp:Content>

2. Layout Page in ASP.NET MVC & ASP.NET Core

What is a Layout Page?

A Layout Page is the MVC/Core equivalent of a Master Page.
It uses Razor syntax (@RenderBody(), @RenderSection()) for content placement.

Key Features

Works in MVC & ASP.NET Core
Uses _Layout.cshtml
Supports Razor + HTML + C#
More flexible & modern UI architecture

Real-Time Example

E-Commerce Website Layout:
Header (logo, search, cart) → Product pages, checkout, order history inside layout.

Layout Page Example

_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
</head>
<body>

<header style="background:#1A2A80;color:white;padding:10px;">
    MyShop
</header>

<nav>
    <a href="/Home/Index">Home</a> |
    <a href="/Product/List">Products</a>
</nav>

<hr />

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

<footer style="background:#7A85C1;color:white;padding:10px;">
    © 2025 MyShop
</footer>

</body>
</html>

Child View Example

Index.cshtml

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Welcome to MyShop</h2>
<p>Start shopping today!</p>

Comparison Table

Feature	Master Page	Layout Page
Platform	ASP.NET Web Forms	ASP.NET MVC / ASP.NET Core
File Extension	.master	.cshtml
Content Placeholder	<asp:ContentPlaceHolder>	@RenderBody() / @RenderSection()
Language	Server controls	Razor syntax
Usage	Legacy / Enterprise internal apps	Modern web apps, cloud projects
Performance	Medium (ViewState used)	Better performance

When to Use What?

Scenario	Recommended
Legacy web apps, internal portals	Master Pages (Web Forms)
Modern web portals, cloud apps, APIs	ASP.NET MVC/Core Layout Pages

Conclusion

Both Master Pages and Layout Pages simplify UI design by reusing a common page structure. However:

Use Master Pages if working in Web Forms
Use _Layout.cshtml for MVC and ASP.NET Core projects

For modern development, Layout Pages are the preferred approach due to Razor flexibility & cleaner architecture.