Asp.NET Page Composition

Slide 2 Lecture Overview Work with master pages and content pages

Slide 3 User Controls It’s possible to create user controls These are really just custom ASPNET controls created from other controls They are powerful but complex to implement Master and content pages were introduced in ASP.NET 2.0 and provide the preferred way to theme an application

Slide 4 The Purpose of Master and Content Pages They allow you to theme an application to provide a consistent look and feel Master pages typically contain An application’s menu system Default content Placeholders for content pages Content pages typically contain

Slide 5 Master Pages (Implementing) A master page is a special form ASP.NET Web page The page is typically named Master.master It’s really a special form of user control directive marks a page as a Master Page Master pages can be nested The element describes placeholders for content pages

Slide 6 directive Designate a page as a master page Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs"

Slide 7 The ContentPlaceHolder Container It’s a container placed in the master pages Content pages appear in these placeholders It’s possible to have many placeholders Set the ID property to reference the placeholder from a container Example

Slide 8 Content Pages (Creating) In directive, set the MasterPageFile to the name of the master page Create the Content element as the root element Don’t create the usual and elements These actually exist in the master page

Slide 9 MasterPageFile Attribute (Example) Make this page a content page by setting the MasterPageFile Page Language="C#" AutoEventWireup="true" CodeFile="ManageRoles.aspx.cs" MasterPageFile="~/MasterPage.master" Inherits="ManageRoles" %>

Slide 10 The Content Control The Content control (element) appear as the root element in a content page The ContentPlaceHolderID attribute references the placeholder on the master page The placeholder must exist on the master page

Slide 11 The Content Control (Example) The placeholder on the master page is named ContentPlaceholder1 <asp:Content ID="Content2" ContentPlaceHolderID= "ContentPlaceholder1" runat="Server"> From here, it's just a Web form.

Slide 12 How Master Pages Work Master pages are compiled into their own assembly When the user requests a content page, the master and content page are merged and rendered to the browser

Slide 13 Accessing the Master Page Programmatically A content page can reference a master page’s objects through the Page.Master property This is especially useful for working with master page menus Example to reference the TextBox named txtMasterMessage Page.Master.txtMasterMessage.Text = “Hello”;

Slide 14 Themes (Terminology) A skin is a named set of properties that can be applied to a control A skin can only apply to one type of control Multiple skins can be created though Style sheets refer to CSS A style sheet theme is just a style sheet that can be overridden A customization theme overrides style sheet themes

Slide 15 Creating Cascading Style Sheets.NET provides a good interface to create CSS classes Create a style sheet from a.NET template

Slide 16 Creating Cascading Style Sheets

Slide 17 Themes (Purpose) Like master pages they simplify the process of standardizing the look and feel of controls Many control types have built-in themes (styles)

Slide 18 Themes (Types) There are two types of themes Style sheet themes are applied when the control is first generated Style properties can be overridden Customization themes are applied after generation is complete Customization themes override style sheet themes and customization in the.aspx file

Slide 19 Applying Themes Themes are applied to a page using the following attributes of directive The Theme attribute set the customization theme The StylesheetTheme sets the stylesheet theme

Slide 20 Creating Theme Files Create a skin file You can create several skin files Create control declarations in skin files

Slide 21 Creating a Skin File Project, Add New Item

Slide 22 Creating a Skin File

Slide 23 Configuring a Skin File Skin files contain ASP.net control declarations The same declarations that appear in any.aspx page Do not set the ID attribute Only formatting properties can be set using themes

Slide 24 Skin File (Example)