Building Consistent Web Layouts with ASP.NET Master Pages: A Step-by-Step Guide

Tired of repeating the same header, navigation menu, and footer on every page of your ASP.NET web application? Master Pages are here to rescue you! They provide a template-like structure for your pages, allowing you to define a consistent layout and share common elements effortlessly. In this guide, we’ll create a simple Master Page and content pages to demonstrate this powerful concept.

Creating a Master Page

  1. Add a Master Page:
    • Right-click your project in Solution Explorer, select “Add,” and then “New Item.”
    • Choose “Master Page” and give it a suitable name (e.g., “Site.Master”).
    • Click “Add.”
  2. Design the Layout:
    • This is where you design the common layout using HTML, CSS, and ASP.NET controls.
    • Place a ContentPlaceHolder control where you want content pages to insert their unique content. You can have multiple ContentPlaceHolder controls for different sections (header, main content, sidebar, footer, etc.).

Code snippet

<%@ Master Language=”C#” AutoEventWireup=”true” CodeFile=”Site.master.cs” Inherits=”SiteMaster” %>

 

<!DOCTYPE html>

<html>

<head runat=”server”>

    <title>My Website</title>

    <link rel=”stylesheet” href=”styles.css” />

</head>

<body>

    <form runat=”server”>

        <div id=”header”>

            <h1>Welcome to My Website</h1>

        </div>

        <div id=”menu”>

            </div>

        <div id=”content”>

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

        </div>

        <div id=”footer”>

            <p>&copy; 2024 My Website</p>

        </div>

    </form>

</body>

</html>

 

Creating Content Pages

  1. Add a Content Page:
    • Right-click your project and select “Add,” then “New Item.”
    • Choose “Web Form using Master Page” and name it (e.g., “Default.aspx”).
    • Select your Master Page (e.g., “Site.Master”) in the dialog and click “Add.”
  2. Fill the Content:
    • Your content page will inherit the Master Page’s layout.
    • Use Content controls to populate the placeholders defined in the Master Page:

Code snippet

<%@ Page Title=”” Language=”C#” MasterPageFile=”~/Site.Master” AutoEventWireup=”true” CodeFile=”Default.aspx.cs” Inherits=”_Default” %>

 

<asp:Content ID=”Content1″ ContentPlaceHolderID=”MainContent” Runat=”Server”>

    <h2>Welcome!</h2>

    <p>This is the content for my homepage.</p>

</asp:Content>

 

Key Points

  • Master Page: Defines the overall layout with ContentPlaceHolder controls.
  • Content Pages: Inherit the Master Page and use Content controls to fill placeholders.
  • Code-Behind: You can have code-behind files for both the Master Page and content pages to handle events and logic.
  • Customization: Apply CSS to the Master Page to style elements across all content pages.
  • Nested Master Pages: You can even create a hierarchy of Master Pages for more complex scenarios.

Beyond the Basics

  • Dynamically Changing Master Pages: You can programmatically switch Master Pages based on conditions.
  • Accessing Master Page Elements: You can access and manipulate controls in the Master Page from content pages (with some limitations).