CSCI 6962: Server-side Design and Programming

Master Pages

ASP and CSS

Implemented as a theme• Create App_Themes

directory• Create subdirectory with

stylesheet name• Copy stylesheet into

subdirectory• Copy other resources

(images, etc.) into subdirectory

ASP and CSS

• Setting style for all pages: Add to web.config

<pages styleSheetTheme=“name of theme”/>

• Setting style for individual page: Add to <page tag

<%@ Page Language=“VB” StyleSheetTheme=“name of theme”/>

ASP Master Pages

• Framework that allows other pages to be displayed inside of them as content

Master page Content

Creating Master Pages

• Option in “New Item” List

Master Page Contents

• Defines content common to all pages– Logo, navbar, etc.

• Can include dynamic content– Example: Current date

Placeholder for Contents

• Must contain a ContentPlaceHolder object– Where content from other pages will be inserted– Two automatically added when Master Page created– Can always add more

Linking Content Pages

• Can link existing content page to master page using Master Page property of page

• Check “Select Master Page” when adding new page– Can do later, but must strip out any html, body, form, and div tags

Creating Content Pages

• New page appears inside master page in editor– Appears at location of ContentPlaceHolder– Master page content cannot be edited

Creating Content Pages

• Page contents appear inside <asp:Content tag

Creating Content Pages

• When run in browser, content page rendered inside master page

Multiple Content Areas

• Can insert multiple ContentPlaceHolder on master page• Specify what goes in each area in content page

Nested Master Pages

• Can nest one master page inside another– Outer = general content to all pages– Inner = specific content to some pages– As with content page, prompted for outer master page

Nested Master Pages

• In editor, drawn inside outer master page in its ContentPlaceHolder

• Must have own ContentPlaceHolder to insert content from its client pages

Nested Master Pages

• Specify inner master page as master page• Content rendered inside inner master page• Inner master page rendered inside outer master page

Accessing Master Page Controls

• Client page can manipulate master page elements– More difficult, since not same object

• Basic steps:– Make master page control public to client page

• Create public method in code behind to manipulate control

– Set VirtualPath directive in client to refer to master page<%@ MasterType VirtualPath=“~/masterpage.master” %>

Accessing Master Page Controls

• Example: – User enters name in content page– Greeting with name appears in master page