Skip to content

Latest commit

 

History

History

04. ASP.NET-Master-Pages

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
Demo
Demo
 
 
Homework
Homework
 
 
imgs
imgs
 
 
README.md
README.md
 
 
index.html
index.html
 
 

README.md

Master Pages

Using ASP.NET Master Pages

Table of Contents

  • Master Pages and Content Pages
  • Nested Master Pages

Master Pagesand Content Pages

Master and Content Pages

  • Assume we have a classical web site like this:

  • Header

The Master Page – Sections

  • The header is shared between all pages:

The Master Page – Sections (2)

  • Navigation
  • The navigation is shared between all pages:

The Master Page – Sections (3)

  • Footer
  • The footer is also shared between all pages:

  • Content

The Content Pages

  • The content is different for all pages:

Why Use Masterand Content Pages?

  • Master pages provide reusable UI templates
  • The structure of the site is repeatedover most of its pages
    • ASP.NET master pages allow to share the common HTML between few pages
  • Common Look & Feel
  • To avoid the repeating (and copying) of HTML code and the logic behind it

ASP.NET Master Pages

  • Master pages in ASP.NET Web Forms start with the @Master directive
    • Mostly the same attributes as the @Page directive
  • Master pages can contain:
    • Markup for the page (<html>, <body>, …)
    • Standard contents (HTML, ASP.NET controls)
    • <asp:ContentPlaceHolder> controls which can be replaced in the content pages

Content Pages

  • Content pages derive the entire content and logic from their master page
  • Use the @Page directive with MasterPageFile attribute pointing to the master page
    • Replace a <asp:ContentPlaceHolder> from the master page by using the <asp:Content> control
    • Set theContentPlaceHolderIDproperty
      • Points to the ContentPlaceHolder from the Master page which content we want to replace

Master and Content Pages – Mechanics

Demo

Master and Content Pages – Advanced

  • We can change the Master page at runtime in the code-behind
Page.MasterPageFile = "~/SiteLayout.master";
  • We can also select the Master page according to the browser type
<%@ Page Language="C#" 
  ie:MasterPageFile="~/IESiteLayout.master"
  mozilla:MasterPageFile="~/FFSiteLayout.master" %>

Nested Master Pages

  • Master pages can be nested, with one master page referencing another as its master
    • Nested master pages allow creating componentized master pages
    • A child master page has the file name extension .master, as any master page
&#60;% @ Master Language="C#" %&#62;    // Parent Master Page
&#60;asp:ContentPlaceHolder ID="MainContent" runat="server"/&#62;
&#60;%@ Master Language="C#" MasterPageFile="~/Parent.master"%&#62;
&#60;asp:Content ID="Menu" ContentPlaceholderID="MainContent"
    runat="server"&#62;
  &#60;asp:ContentPlaceHolder ID="LeftMenu" runat="server" /&#62;
  &#60;asp:ContentPlaceHolder ID="TopMenu" runat="server" /&#62;
&#60;/asp:Content&#62;                  // Child Master Page

Demo

Master Pages

Free Trainings @ Telerik Academy