Master Pages Navigation Minder

Master Pages and Site Navigation
Minder Chen mchen@gmu.edu
Microsoft ASP.NET 2.0 UI Features Master Pages

Manage the skeleton of your site Manage the XHTML
Themes
Manage the CSS. Manage the skin of your site
Menu, Tree View, Breadcrumbs

Tools to get around your site
Themes and Skins

CSS
Additional UI Ticks and Tips
Minder Chen, 1994-2006
Master page & Navigation - 2
Master Pages
Master Page Content Page
Master Page Basics

Masters define common content and placeholders (<asp:ContentPlaceHolder>) Content pages reference masters and fill placeholders with content (<asp:Content>)
Site.master
<%@ Master %>
default.aspx
<%@ Page MasterPageFile="Site.master" %> <asp:Content ContentPlaceHolderID= "Main" RunAt="server" />
http://.../default.aspx
<asp:ContentPlaceHolder ID="Main" RunAt="server" />
</asp:Content>
Master Page Architecture

Master file A.master .
Content file B.aspx.

< % @ Page
Master = A . master %>
< % @ Master
%>
Resulting PageContent < asp :

runat = server ContentName < asp : ContentPlaceHolder runat = server ContentName = Main /> < / asp : Content < asp : Content < asp : ContentPlaceHolder runat = server runat = server ContentName = Footer > > = Main >
ContentName
= Footer
/>
< / asp : Content >
Create a New Master Page
Use Table for Layout Control
Set up the Master Page
Defining a Master Page

<%@ Master Language="VB" %> <html> <body>  <table width="100%"> <tr> <td bgcolor="darkblue" align="center"> <span style="font-size: 36pt; color: white">ACME Inc.</span> </td> </tr> </table>  <asp:ContentPlaceHolder ID="Main" RunAt="server" /> </body> </html>
Master Pages: Creating a master page

1. Create a master page with .master extension 2. Define a master directive:
<%@ master .. %>
3. Add content:
Can contain any html or control page content Define replaceable place-holder regions:
Use an <asp:contentplaceholder> control Add default content within it (optional)
Modified Master Page

<%@ Master Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server"> </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> <table border="0" cellpadding="0" cellspacing="0" style="width: 100%"> <tr> <td colspan="2" style="height: 100px"> <img src="images/asp_net_logo.gif" /> <span style="font-size: 24pt">Minder Chen ASP.NET Learning Web Site</span></td> </tr> <tr> <td style="width: 49px" valign="top"> <asp:Menu ID="Menu1" runat="server"> </asp:Menu> </td> <td>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder>

</td> </tr> </table> </div> </form></body></html>
Default Content
ContentPlaceHolder controls can define content of their own ("default content") Default content is displayed ONLY if not overridden by content page
<%@ Master %> ... <asp:ContentPlaceHolder ID="Main" RunAt="server"> This is default content that will appear in the absence of a matching Content control in a content page <asp:ContentPlaceHolder>
Create a Content Page
Add a Content Page based on a Master Page
Create a Content Page: Applying a Master Page
<%@ Page MasterPageFile="~/MasterPage.master" %>

<asp:Content ContentPlaceHolderID="Main" RunAt="server"> This content fills the content place holder "Main" defined in the master page (site.Master) </asp:Content>
Using a Master Page

1. Create an ASP.NET page (.aspx extension) 2. On the page directive:
<%@ page masterpagefile= %> attribute to reference master Set the title attribute <%@ Page title=jeff %>
3. Optionally add content to override the master:

a. Only <asp:content> controls or server-side script allowed b. <asp:content> controls replace regions in the master:
The contentplaceholderid identifies masters region <asp:content> controls can contain any page content
A Content Page with a Master Page Applied
Code for AboutUS.aspx

<%@ Page Language="VB" MasterPageFile="~/MasterPage.master"
Title="About US" %> <asp:Content ID="Content1"

ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server"> <strong><span style="font-size: 14pt">This is a web site developed by Minder Chen to help others to learn ASp.NET 1.X and 2.0. <br /> He has used ASP.NET for more than 3 years by now and has developed a Web-based Decision Support System using ASP.NET. He can be reached at minderchen@hotmail.com <br /> </span></strong> </asp:Content>
Minder Chen, 1994-2006 Master page & Navigation - 18
Applying a Master Page to a Site
<configuration> <system.web> <pages masterPageFile="~/MasterPage.master" /> </system.web> </configuration>
The Page.Master Property

Retrieves reference to master page
Instance of class derived from System.Web.UI.MasterPage Null if page doesn't have a master
Used to programmatically access content defined in the master page

Use FindControl for weak typing Use public property in master page for strong typing (preferred)
Site Navigation
Navigation UIs are tedious to implement
Especially if they rely on client-side script
New controls simplify site navigation

TreeView and Menu - Navigation User Interface (UI) SiteMapDataSource - XML site maps SiteMapPath - "Bread crumb" controls
Public site map API provides foundation
Provider-based for flexibility
Site Navigation Schema

Controls
SiteMapDataSource
Menu
TreeView
SiteMapPath
Site Navigation API
SiteMap SiteMapNode SiteMapNode
SiteMapNode
Providers
XmlSiteMapProvider
Other Site Map Providers
Site Maps
Web.sitemap Other Data Stores
Example of Menu Controls and SiteMapPath
Navigation
Create a Site Map
<?xml version="1.0" encoding="utf-8" ?> <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" > <siteMapNode url="" title="" description=""> <siteMapNode url="" title="" description="" /> <siteMapNode url="" title="" description="" /> </siteMapNode> </siteMap> Minder Chen, 1994-2006 Master page & Navigation - 25
Web.sitemap
XML document is "very" case sensitive
<?xml version="1.0" encoding="utf-8" ?> <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" > <siteMapNode url="Default.aspx" title="Home" description="Home Page"> <siteMapNode url="Assignments.aspx" title="Assignments" description="Programming assignments"> <siteMapNode url="Assignment1.aspx" title="Assignment 1" description="Programming assignment 1" /> <siteMapNode url="Assignment2.aspx" title="Assignment 2" description="Programming assignment 2" /> </siteMapNode> <siteMapNode url="AboutUs.aspx" title="About Us" description="Authors and purposes"> <siteMapNode url="ContactInfo.aspx" title="Contact information" description="Contact phones and emails" /> <siteMapNode url="ManagementTeam.aspx" title="Management Teams" description="Introduction of management teams" /> </siteMapNode> </siteMapNode> </siteMap>
SiteMapDataSource
Data source control representing site maps
Site map = List of pages and URLs Nodes can include descriptive text
Permits TreeViews and Menus to be populated with links through data binding Supports "security trimming"
Specified nodes visible only to specified roles
Provider-based for flexible data storage

Bind Menu Control with SiteMapDataSource
Menu
200+ Properties; here are the top 4:
Orientation = Horizontal StaticDisplayLevels = 2 StaticSubMenuIndent = 0 DisappearAfter = 300
Menu Control Tag

<asp:Menu ID="Menu1" runat="server" BackColor="#B5C7DE" DataSourceID="SiteMapDataSource1" DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#284E98" Orientation="Horizontal" StaticSubMenuIndent="10px">
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />

<DynamicHoverStyle BackColor="#284E98" ForeColor="White" BorderStyle="Groove" /> <DynamicMenuStyle BackColor="#B5C7DE" />
<StaticSelectedStyle BackColor="#507CD1" />

<DynamicSelectedStyle BackColor="#507CD1" /> <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" /> <StaticHoverStyle BackColor="#284E98" ForeColor="White" />
</asp:Menu>
SiteMapPath Controls
"Bread crumbs" showing path to page
By default, renders current node as static text By default, renders parent nodes as hyperlinks
Highly customizable UI
Nodes can be stylized and templatized Separators can be stylized and templatized
Integrates with site map providers to acquire path info

<asp:SiteMapPath ID="SiteMapPath1" runat="server" Font-Size="14pt"> </asp:SiteMapPath>
Stylizing SiteMapPath
<asp:SiteMapPath Font-Name="Verdana" Font-Size="10pt" RunAt="server"> <CurrentNodeStyle Height="24px" BackColor="Yellow" Font-Bold="true" /> <NodeStyle Height="24px" /> <PathSeparatorTemplate> <ItemTemplate> <asp:Image ImageUrl="~/images/arrow.gif" RunAt="server" /> </ItemTemplate> </PathSeparatorTemplate> </asp:SiteMapPath>
Menu or Tree: Choosing the right control
Features
Expansion Download on Demand Checkboxes
Menu
PopOut No No
Treeview
Expand in Place Yes Yes
Templates
Layout Mobile & Downlevel Style Option Selection Model
Yes
Horizontal & Vertical Yes Static, Dynamic, Level Link & Hover
No
Vertical Yes Level or Parent/Root/Leaf by data item Postback, link & disabled
Theme and Skin
Add a Style Sheet in a Theme
Style Builder Build Style Rule

H1 { font-size: 30px; color: yellow; font-style: italic; font-family: 'Comic Sans MS'; background-color: blue; font-variant: small-caps; }
Apply Themes to the Web Site

<configuration> <system.web> <pages theme="ThemeName" /> </system.web> </configuration>
To apply a theme to an individual page

<%@ Page Theme="ThemeName" %> <%@ Page StyleSheetTheme="ThemeName" %>
Themes: Architecture
Basically:
Inserts a link to your CSS Style Sheet Updates properties on your controls
Two groups of files:

Your site Nothing here changes Theme A Style Sheets, Images, Skins
At runtime these files are associated
Themes: Recommended usage

Do as much as you can inside the Style Sheet Foreground Images cant be controlled by CSS, so use Skins Advanced controls, use Skins
Themes: Advanced scenarios

StyleSheetTheme vs. Just Theme Dynamically Switching Themes Extreme Changes
Skin
SkinFile.skin
<%-- Default skin template. The following skins are provided as examples only. 1. Named control skin. The SkinId should be uniquely defined because duplicate SkinId's per control type are not allowed in the same theme. <asp:GridView runat="server" SkinId="gridviewSkin" BackColor="White" > <AlternatingRowStyle BackColor="Blue" /> </asp:GridView> 2. Default skin. The SkinId is not defined. Only one default control skin per control type is allowed in the same theme. <asp:Image runat="server" ImageUrl="~/images/image1.jpg" /> --%>
<asp:Button runat="server" BackColor="Red" ForeColor="White" Font-Name="Arial" Font-Size="9px" SkinID="Red" /> <asp:Button runat="server" BackColor="Blue" ForeColor="Yellow" Font-Name="Arial" Font-Size="14px" />
Sample Code
You need to use Theme in order to use Skin <%@ Page Language="VB" Theme="Theme1" MasterPageFile="~/MasterPage.master" Title="Untitled Page" %> <script runat="server"> Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) End Sub
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <h1>Contact Information</h1>
Email:
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:Button ID="Button1" SkinID="Red" runat="server" <asp:Button ID="Button2" runat="server" Text="Reset" /> </asp:Content>
Text="Submit" />
UI Tricks and Tips
UITricksTips.aspx
<%@ Page Language="VB"
MaintainScrollPositionOnPostback="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server"> Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) LabelMsg.Text = "" LabelDefault.Text = "" If IsPostBack Then
TextBoxPassword.Focus()
End If End Sub Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) LabelMsg.Text = "Thank you for testing this. Please continue!" End Sub Protected Sub ButtonDefault_Click(ByVal sender As Object, ByVal e As System.EventArgs) LabelDefault.Text = "You click the default button!" End Sub </script> <script>
function HelloAlert() { alert("Hello World"); }

</script>
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title></head><body>
<form id="form1" runat="server" defaultfocus="TextBoxUserName" defaultbutton="buttonDefault">

Continued
<div> <asp:Label ID="LabelUserName" runat="server" Text="<u>U</u>ser Name:" AssociatedControlID="TextboxUserName"></asp:Label> <asp:TextBox ID="TextBoxUserName" AccessKey="u" runat="server" AutoCompleteType="displayName" /> <asp:RequiredFieldValidator ID="RequiredFieldValidatorUserName" runat="server" ErrorMessage="User name for secured login" ControlToValidate="TextboxUserName" ValidationGroup="userlogin" ></asp:RequiredFieldValidator> <br /> <asp:Label ID="LabelPassword" runat="server"
AccessKey="p" AssociatedControlID="TextboxPassword"
Text="<u>P</u>assword:"></asp:Label> <asp:TextBox ID="TextBoxPassword" runat="server" > </asp:TextBox> <br /> <asp:Button ID="buttonSumit" runat="server" Text="Secured Login" ValidationGroup="userlogin" /> <br /> <br /> <br /> <br /> <asp:Label ID="LabelEmail" runat="server" AccessKey="p" AssociatedControlID="TextboxEmail" Text="<u>E</u>mail:"></asp:Label><asp:TextBox ID="TextBoxEmail" runat="server"> </asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Email is required for login with email" ControlToValidate="TextboxEmail" ValidationGroup="email" ></asp:RequiredFieldValidator> <br /> <asp:Button ID="buttonLoginWithEmail" runat="server" Text="Login with Email" ValidationGroup="email" OnClientClick="HelloAlert();" /> <br /> <asp:Image ID="Image1" runat="server" AlternateText="ASP.NET Logo" ImageUrl="~/images/asp_net_logo.gif" DescriptionUrl="~/AboutUs.aspx" /><br /> <br /> Minder Chen, 1994-2006 Master page & Navigation - 51
Continued
<asp:Button ID="ButtonDefault" runat="server" Text="Default Button" OnClick="ButtonDefault_Click" /> <asp:Label ID="LabelDefault" runat="server"></asp:Label><br />
Test<br /> Test<br /> Test<br /> Test<br /> Test<br /> Test<br /> Test<br /> Test<br /> Test<br /> Test<br /> Test<br /> Test<br /> Test<br /> Test<br /> Test<br /> Test<br /> Test<br /> Test<br /> Test<br />
<asp:Button ID="Button1" runat="server" Text="Test Keep Scroll Position"
OnClientClick="return confirm('Are you sure you want to submit?');"

OnClick="Button1_Click" /> <asp:Label ID="LabelMsg" runat="server"></asp:Label></div> </form> </body> </html>
TreeView Controls
Render hierarchical data as trees
Expandable and collapsible branches Nodes are navigable, selectable, or static and can include check boxes
Content defined by TreeNode objects

TreeNodes can be added declaratively, programmatically, or through data binding TreeNodes can also be demand-loaded
Highly customizable UI
Declaring a TreeView
<asp:TreeView RunAt="server> <Nodes> <asp:TreeNode Text="Training" RunAt="server"> <asp:TreeNode Text="Programming .NET" RunAt="server" Navigateurl="Classes.aspx?id=1" /> <asp:TreeNode Text="Programming ASP.NET" RunAt="server" NavigateUrl="Classes.aspx?id=2" /> <asp:TreeNode Text="Programming Web Services" RunAt="server" NavigateUrl="Classes.aspx?id=3" /> </asp:TreeNode> <asp:TreeNode Text="Consulting" RunAt="server" NavigateUrl="Consulting.aspx" /> <asp:TreeNode Text="Debugging" RunAt="server" NavigateUrl="Debugging.aspx" /> </Nodes> </asp:TreeView>
Key TreeView Properties
Name
ExpandDepth ShowExpandCollapse LevelStyles NodeStyle RootNodeStyle
Description
Specifies the TreeView's initial expand depth Specifies whether expand/collapse indicators are shown Specifies appearance of nodes by level Specifies default appearance of nodes Specifies appearance of root nodes
LeafNodeStyle
SelectedNodeStyle HoverNodeStyle Minder Chen, 1994-2006
Specifies appearance of leaf nodes

Specifies appearance of selected nodes Specifies appearance of nodes when cursor hovers overhead Master page & Navigation - 56
Create a New Site Map
XML Site Map

<siteMap> <siteMapNode title="Home" description="" url="default.aspx"> <siteMapNode title="Training" url="Training.aspx" description="Training for .NET developers"> <siteMapNode title="Programming .NET" url="Classes.aspx?id=1" description="All about the .NET Framework" /> <siteMapNode title="Programming ASP.NET" url="Classes.aspx?id=2" description="All about ASP.NET" /> <siteMapNode title="Programming Web Services" url="Classes.aspx?id=3" description="All about Web services" /> </siteMapNode> <siteMapNode title="Consulting" url="Consulting.aspx" description="Consulting for .NET projects" /> <siteMapNode title="Debugging" url="Debugging.aspx" description="Help when you need it the most" /> </siteMapNode> </siteMap>
TreeViews and Site Maps

<asp:SiteMapDataSource ID="SiteMap" RunAt="server" /> <asp:TreeView DataSourceID="SiteMap" RunAt="server" />
Web.sitemap
Changing the File Name
<configuration> <system.web> <siteMap> <providers> <remove name="AspNetXmlSiteMapProvider" /> <add name="AspNetXmlSiteMapProvider" type="System.Web.XmlSiteMapProvider, System.Web, ..." siteMapFile="Acme.sitemap" /> </providers> </siteMap> </system.web> </configuration>
<siteMapNode> Attributes
Name
description roles title url
Description
Description of node Role or roles for which this node is visible* Title of this node URL of this node
* Multiple roles can be specified using comma- or semicolon-delimited lists
Security Trimming
Visible to everyone
<siteMap> <siteMapNode title="Home" description="" url="default.aspx"> <siteMapNode title="Announcements" url="Announcements.aspx" description="Information for all employees" roles="*" /> <siteMapNode title="Salaries" url="Salaries.aspx" description="Salary data" roles="Managers, CEOs" /> <siteMapNode> </siteMap>
Visible only to Managers and CEOs
Enabling Security Trimming
<configuration> <system.web> <siteMap> <providers> <remove name="AspNetXmlSiteMapProvider" /> <add name="AspNetXmlSiteMapProvider" type="System.Web.XmlSiteMapProvider, System.Web, ..." securityTrimmingEnabled="true" siteMapFile="web.sitemap" /> </providers> </siteMap> </system.web> </configuration>
SiteMapDataSource Properties
Name
Provider SiteMapProvider ShowStartingNode StartFromCurrentNode
Description
Provider used to obtain site map data Name of provider used to obtain site map data Specifies whether to show the root node Specifies whether starting node should be the root node (false) or the current node (true). Default = false Starting node identified by level (default = 0) Starting node identified by URL
StartingNodeOffset StartingNodeUrl
Hiding the Root Site Map Node

<asp:SiteMapDataSource ID="SiteMap" ShowStartingNode="false" RunAt="server" /> <asp:TreeView DataSourceID="SiteMap" RunAt="server" />
Web.sitemap
Using SiteMapPath
<asp:SiteMapPath RunAt="server" />
Key SiteMapPath Properties
Name
CurrentNodeStyle CurrentNodeTemplate NodeStyle NodeStyleTemplate PathSeparator
Description
Style used to render the current node HTML template used to render the current node Style used to render non-current nodes HTML template used to render non-current nodes Text used for node separators (default = ">")
PathSeparatorStyle
PathSeparatorTemplate
Style used to render node separators

HTML template used to render node separators
Site Map Providers
Site maps are provider-based

Provider interprets site map data and provides it to SiteMapDataSource controls Provider also tracks current position and provides it to SiteMapPath controls
ASP.NET 2.0 ships with one provider

XmlSiteMapProvider
Use custom providers for other data stores
Site Map API
System.Web.SiteMap represents site maps

RootNode property identifies root node CurrentNode property identifies current node
SiteMapNode represents nodes

Interrogate properties of node Walk up, down, and sideways in the hierarchy
The magic underlying SiteMapPath controls Great for customizing SiteMapPaths
Using the Site Map API
' Write the title of the current node to a Label control Label1.Text = SiteMap.CurrentNode.Title ' Write the path to the current node to a Label control Dim node As SiteMapNode = SiteMap.CurrentNode Dim builder As New StringBuilder (node.Title) While Not (node.ParentNode Is Nothing) node = node.ParentNode builder.Insert (0, " > ") builder.Insert (0, node.Title) End While Label1.Text = builder.ToString ()
SiteMap.ResolveSiteMap
Fired by SiteMapPath controls Used to perform on-the-fly customization of paths displayed by SiteMapPath controls
Add nodes to site map for pages that don't appear in the site map Change the properties of the current node
Register handler in Application_Start

Master Pages Navigation Minder

Transféré par

Informations du document

Description originale:

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Master Pages Navigation Minder

Transféré par

Droits d'auteur :

Formats disponibles

Master Pages and Site Navigation

Minder Chen mchen@gmu.edu

Microsoft ASP.NET 2.0 UI Features Master Pages

Menu, Tree View, Breadcrumbs

Themes and Skins

Additional UI Ticks and Tips

Minder Chen, 1994-2006

Master page & Navigation - 2

Minder Chen, 1994-2006

Master page & Navigation - 3

Master Page Basics

<asp:ContentPlaceHolder ID="Main" RunAt="server" />

Minder Chen, 1994-2006

Master page & Navigation - 4

Master Page Architecture

Content file B.aspx.

Resulting PageContent < asp :

Minder Chen, 1994-2006

Master page & Navigation - 5

Create a New Master Page

Minder Chen, 1994-2006

Master page & Navigation - 6

Use Table for Layout Control

Minder Chen, 1994-2006

Master page & Navigation - 7

Set up the Master Page

Minder Chen, 1994-2006

Master page & Navigation - 8

Defining a Master Page

Minder Chen, 1994-2006

Master page & Navigation - 9

Master Pages: Creating a master page

Minder Chen, 1994-2006

Master page & Navigation - 10

Modified Master Page

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder>

Minder Chen, 1994-2006

Master page & Navigation - 11

Minder Chen, 1994-2006

Master page & Navigation - 12

Create a Content Page

Minder Chen, 1994-2006

Master page & Navigation - 13

Add a Content Page based on a Master Page

Minder Chen, 1994-2006

Master page & Navigation - 14

Create a Content Page: Applying a Master Page

<%@ Page MasterPageFile="~/MasterPage.master" %>

Minder Chen, 1994-2006

Master page & Navigation - 15

Using a Master Page

3. Optionally add content to override the master:

Minder Chen, 1994-2006

Master page & Navigation - 16

A Content Page with a Master Page Applied

Minder Chen, 1994-2006

Master page & Navigation - 17

Code for AboutUS.aspx

Title="About US" %> <asp:Content ID="Content1"

Applying a Master Page to a Site

<configuration> <system.web> <pages masterPageFile="~/MasterPage.master" /> </system.web> </configuration>

Minder Chen, 1994-2006

Master page & Navigation - 19