asp.net page composition. slide 2 lecture overview work with master pages and content pages
Post on 19-Dec-2015
213 views
TRANSCRIPT
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 The @Master directive marks a page as a
Master Page Master pages can be nested The <asp:contentplaceholder> element
describes placeholders for content pages
Slide 6
The @Master 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<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
Slide 8
Content Pages (Creating) In the @Page directive, set the MasterPageFile to the name of the master page
Create the Content element as the root element Don’t create the usual <html> and <body>
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.</asp:Content>
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 the @Page directive The Theme attribute set the customization
theme The StylesheetTheme sets the stylesheet
theme <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Theme="SkinFile" StylesheetTheme="SkinFile" %>
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)
<asp:button runat="server" BackColor="lightblue" ForeColor="black" />
<asp:TextBox runat="server" BackColor="#FFCC00" ForeColor="Blue"/>