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
- 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.”
- 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>© 2024 My Website</p>
</div>
</form>
</body>
</html>
Creating Content Pages
- 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.”
- 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).