7/31/2019 Master Pages Navigation Minder
1/71
Master Pagesand
Site Navigation
Minder [email protected]
7/31/2019 Master Pages Navigation Minder
2/71
Master page & Navigation - 2 Minder Chen 1994-2006
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
7/31/2019 Master Pages Navigation Minder
3/71
Master page & Navigation - 3 Minder Chen 1994-2006
Master Pages
7/31/2019 Master Pages Navigation Minder
4/71
Master page & Navigation - 4 Minder Chen 1994-2006
Master Page Basics
Masters define common content andplaceholders ()
Content pages reference masters and fillplaceholders with content ()
7/31/2019 Master Pages Navigation Minder
5/71
Master page & Navigation - 5 Minder Chen 1994-2006
Resulting Page
Master Page Architecture
< asp : ContentPlaceHolder
runat = server
ContentName = Main / >
< asp : ContentPlaceHolder
runat = server
ContentName = Footer / >
.
Master file A.master
.
< asp : Content
runat = server
ContentName =Footer
>
< / asp : Content >
< asp : Content
runat = server
ContentName = Main >
< / asp : Content >
Content file B.aspx
7/31/2019 Master Pages Navigation Minder
6/71
Master page & Navigation - 6 Minder Chen 1994-2006
Create a New Master Page
7/31/2019 Master Pages Navigation Minder
7/71Master page & Navigation - 7 Minder Chen 1994-2006
Use Table for Layout Control
7/31/2019 Master Pages Navigation Minder
8/71Master page & Navigation - 8 Minder Chen 1994-2006
Set up the Master Page
7/31/2019 Master Pages Navigation Minder
9/71Master page & Navigation - 9 Minder Chen 1994-2006
Defining a Master Page
ACME Inc.
7/31/2019 Master Pages Navigation Minder
10/71Master page & Navigation - 10 Minder Chen 1994-2006
Master Pages:Creating a master page
1. Create a master page with .master extension
2. Define a master directive:
3. Add content:
Can contain any html or control page content
Define replaceable place-holder regions:Use an control
Add default content within it (optional)
7/31/2019 Master Pages Navigation Minder
11/71Master page & Navigation - 11 Minder Chen 1994-2006
Modified Master Page
Untitled Page
Minder Chen ASP.NET Learning Web Site
7/31/2019 Master Pages Navigation Minder
12/71Master page & Navigation - 12 Minder Chen 1994-2006
Default Content
ContentPlaceHolder controls can definecontent of their own ("default content")
Default content is displayed ONLY if notoverridden by content page
...
This is default content that will appear in the absence of a
matching Content control in a content page
7/31/2019 Master Pages Navigation Minder
13/71Master page & Navigation - 13 Minder Chen 1994-2006
Create a Content Page
C
7/31/2019 Master Pages Navigation Minder
14/71Master page & Navigation - 14 Minder Chen 1994-2006
Add a Content Page based on a Master Page
7/31/2019 Master Pages Navigation Minder
15/71Master page & Navigation - 15 Minder Chen 1994-2006
Create a Content Page: Applying a Master Page
This content fills the content place holder "Main" defined in the master page (site.Master)
U i M t P
7/31/2019 Master Pages Navigation Minder
16/71Master page & Navigation - 16 Minder Chen 1994-2006
Using a Master Page
1. Create an ASP.NET page (.aspx extension)
2. On the page directive: attribute to reference masterSet the title attribute
3. Optionally add content to override the master:a. Only controls or server-side script allowedb. controls replace regions in the master:
The contentplaceholderid identifies masters region controls can contain any page content
A C t t P ith M t P A li d
7/31/2019 Master Pages Navigation Minder
17/71Master page & Navigation - 17 Minder Chen 1994-2006
A Content Page with a Master Page Applied
C d f Ab tUS
7/31/2019 Master Pages Navigation Minder
18/71Master page & Navigation - 18 Minder Chen 1994-2006
Code for AboutUS.aspx
This is a web site developedby Minder Chen to help others to learn ASp.NET 1.X and 2.0.
He has used ASP.NET for more than 3 years by now and has
developed a Web-based Decision Support System usingASP.NET. He can be reached at [email protected]
A l i M t P t Sit
7/31/2019 Master Pages Navigation Minder
19/71Master page & Navigation - 19 Minder Chen 1994-2006
Applying a Master Page to a Site
Th P M t P t
7/31/2019 Master Pages Navigation Minder
20/71Master page & Navigation - 20 Minder Chen 1994-2006
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 contentdefined in the master page
Use FindControl for weak typing
Use public property in master page for strongtyping (preferred)
Sit N i ti
7/31/2019 Master Pages Navigation Minder
21/71Master page & Navigation - 21 Minder Chen 1994-2006
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
Sit N i ti S h
7/31/2019 Master Pages Navigation Minder
22/71
Master page & Navigation - 22 Minder Chen 1994-2006
Site Navigation Schema
Site Navigation API
Site Maps
Web.sitemapOther
Data Stores
ControlsMenu TreeView SiteMapPath
SiteMap-DataSource
SiteMap
SiteMapNodeSiteMapNode SiteMapNode
XmlSiteMapProviderOther Site Map
Providers
Providers
Example of Menu Controls and SiteMapPath
7/31/2019 Master Pages Navigation Minder
23/71
Master page & Navigation - 23 Minder Chen 1994-2006
Example of Menu Controls and SiteMapPath
Navigation
7/31/2019 Master Pages Navigation Minder
24/71
Master page & Navigation - 24 Minder Chen 1994-2006
Navigation
Create a Site Map
7/31/2019 Master Pages Navigation Minder
25/71
Master page & Navigation - 25 Minder Chen 1994-2006
Create a Site Map
Web sitemap
7/31/2019 Master Pages Navigation Minder
26/71
Master page & Navigation - 26 Minder Chen 1994-2006
Web.sitemap
XML document is "very" case sensitive
SiteMapDataSource
7/31/2019 Master Pages Navigation Minder
27/71
Master page & Navigation - 27 Minder Chen 1994-2006
SiteMapDataSource
Data source controlrepresenting site maps
Site map = List of pages andURLs
Nodes can includedescriptive text
Permits TreeViews andMenus to be populated withlinks through data binding
Supports "securitytrimming"
Specified nodes visible onlyto specified roles
Provider-based for flexibledata storage
Bind Menu Control with SiteMapDataSource
7/31/2019 Master Pages Navigation Minder
28/71
Master page & Navigation - 28 Minder Chen 1994-2006
Bind Menu Control with SiteMapDataSource
Menu
7/31/2019 Master Pages Navigation Minder
29/71
Master page & Navigation - 29 Minder Chen 1994-2006
Menu
200+ Properties; here are the top 4:
Orientation = Horizontal
StaticDisplayLevels = 2
StaticSubMenuIndent = 0
DisappearAfter = 300
Menu Control Tag
7/31/2019 Master Pages Navigation Minder
30/71
Master page & Navigation - 30 Minder Chen 1994-2006
Menu Control Tag
SiteMapPath Controls
7/31/2019 Master Pages Navigation Minder
31/71
Master page & Navigation - 31 Minder Chen 1994-2006
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 acquirepath info
Stylizing SiteMapPath
7/31/2019 Master Pages Navigation Minder
32/71
Master page & Navigation - 32 Minder Chen 1994-2006
Stylizing SiteMapPath
Menu or Tree: Choosing the right control
7/31/2019 Master Pages Navigation Minder
33/71
Master page & Navigation - 33 Minder Chen 1994-2006
Menu or Tree:Choosing the right control
Features Menu TreeviewExpansion PopOut Expand in Place
Download on Demand No Yes
Checkboxes No Yes
Templates Yes No
Layout Horizontal &Vertical
Vertical
Mobile & Downlevel Yes Yes
Style Option Static, Dynamic,Level
Level or Parent/Root/Leafby data item
Selection Model Link & Hover Postback, link & disabled
Theme and Skin
7/31/2019 Master Pages Navigation Minder
34/71
Master page & Navigation - 34 Minder Chen 1994-2006
Theme and Skin
Add a Style Sheet in a Theme
7/31/2019 Master Pages Navigation Minder
35/71
Master page & Navigation - 35 Minder Chen 1994-2006
Add a Style Sheet in a Theme
7/31/2019 Master Pages Navigation Minder
36/71
Master page & Navigation - 36 Minder Chen 1994-2006
7/31/2019 Master Pages Navigation Minder
37/71
Master page & Navigation - 37 Minder Chen 1994-2006
Style Builder Build Style Rule
7/31/2019 Master Pages Navigation Minder
38/71
Master page & Navigation - 38 Minder Chen 1994-2006
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;}
7/31/2019 Master Pages Navigation Minder
39/71
Master page & Navigation - 39 Minder Chen 1994-2006
Apply Themes to the Web Site
7/31/2019 Master Pages Navigation Minder
40/71
Master page & Navigation - 40 Minder Chen 1994-2006
Apply Themes to the Web Site
To apply a theme to an individual page
7/31/2019 Master Pages Navigation Minder
41/71
Master page & Navigation - 41 Minder Chen 1994-2006
To apply a theme to an individual page
Themes: Architecture
7/31/2019 Master Pages Navigation Minder
42/71
Master page & Navigation - 42 Minder Chen 1994-2006
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
7/31/2019 Master Pages Navigation Minder
43/71
Master page & Navigation - 43 Minder Chen 1994-2006
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
7/31/2019 Master Pages Navigation Minder
44/71
Master page & Navigation - 44 Minder Chen 1994-2006
Themes: d a ced sce a os
StyleSheetTheme vs. Just Theme
Dynamically Switching Themes
Extreme Changes
Skin
7/31/2019 Master Pages Navigation Minder
45/71
Master page & Navigation - 45 Minder Chen 1994-2006
Skin
SkinFile.skin
7/31/2019 Master Pages Navigation Minder
46/71
Master page & Navigation - 46 Minder Chen 1994-2006
SkinFile.skin
7/31/2019 Master Pages Navigation Minder
47/71
Master page & Navigation - 47 Minder Chen 1994-2006
Sample Code
7/31/2019 Master Pages Navigation Minder
48/71
Master page & Navigation - 48 Minder Chen 1994-2006
Sample CodeYou need to use Theme in order to use Skin
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
End Sub
Contact Information
Email:
UI Tricks and Tips
7/31/2019 Master Pages Navigation Minder
49/71
Master page & Navigation - 49 Minder Chen 1994-2006
U c s a d ps
UITricksTips.aspx
7/31/2019 Master Pages Navigation Minder
50/71
Master page & Navigation - 50 Minder Chen 1994-2006
U c s ps asp
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 SubProtected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
LabelMsg.Text = "Thank you for testing this. Please continue!"
End SubProtected Sub ButtonDefault_Click(ByVal sender As Object, ByVal e As System.EventArgs)
LabelDefault.Text = "You click the default button!"End Sub
function HelloAlert()
{ alert("Hello World");}
Untitled Page
Continued
7/31/2019 Master Pages Navigation Minder
51/71
Master page & Navigation - 51 Minder Chen 1994-2006
Continued
7/31/2019 Master Pages Navigation Minder
52/71
Master page & Navigation - 52 Minder Chen 1994-2006
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
Test
7/31/2019 Master Pages Navigation Minder
53/71
Master page & Navigation - 53 Minder Chen 1994-2006
TreeView Controls
7/31/2019 Master Pages Navigation Minder
54/71
Master page & Navigation - 54 Minder Chen 1994-2006
Render hierarchical data as trees
Expandable and collapsible branches
Nodes are navigable, selectable, or static and caninclude 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
7/31/2019 Master Pages Navigation Minder
55/71
Master page & Navigation - 55 Minder Chen 1994-2006
g
7/31/2019 Master Pages Navigation Minder
56/71
Master page & Navigation - 56 Minder Chen 1994-2006
y p
Name Description
ShowExpandCollapse Specifies whether expand/collapse indicators are shown
ExpandDepth Specifies the TreeView's initial expand depth
LevelStyles Specifies appearance of nodes by level
RootNodeStyle Specifies appearance of root nodes
LeafNodeStyle Specifies appearance of leaf nodes
SelectedNodeStyle Specifies appearance of selected nodes
HoverNodeStyle Specifies appearance of nodes when cursor hovers overhead
NodeStyle Specifies default appearance of nodes
Create a New Site Map
7/31/2019 Master Pages Navigation Minder
57/71
Master page & Navigation - 57 Minder Chen 1994-2006
p
XML Site Map
7/31/2019 Master Pages Navigation Minder
58/71
Master page & Navigation - 58 Minder Chen 1994-2006
p
TreeViews and Site Maps
7/31/2019 Master Pages Navigation Minder
59/71
Master page & Navigation - 59 Minder Chen 1994-2006
p
Changing the File Name
7/31/2019 Master Pages Navigation Minder
60/71
Master page & Navigation - 60 Minder Chen 1994-2006
g g
Attributes
7/31/2019 Master Pages Navigation Minder
61/71
Master page & Navigation - 61 Minder Chen 1994-2006
p
Name Description
description Description of node
roles Role or roles for which this node is visible*
title Title of this node
url URL of this node
* Multiple roles can be specified using comma- or semicolon-delimited lists
Security Trimming
7/31/2019 Master Pages Navigation Minder
62/71
Master page & Navigation - 62 Minder Chen 1994-2006
y g
Enabling Security Trimming
7/31/2019 Master Pages Navigation Minder
63/71
Master page & Navigation - 63 Minder Chen 1994-2006
SiteMapDataSource Properties
7/31/2019 Master Pages Navigation Minder
64/71
Master page & Navigation - 64 Minder Chen 1994-2006
Name Description
SiteMapProvider Name of provider used to obtain site map data
StartingNodeOffset Starting node identified by level (default = 0)
StartingNodeUrl Starting node identified by URL
StartFromCurrentNode Specifies whether starting node should be the root node(false) or the current node (true). Default = false
Provider Provider used to obtain site map data
ShowStartingNode Specifies whether to show the root node
Hiding the Root Site Map Node
7/31/2019 Master Pages Navigation Minder
65/71
Master page & Navigation - 65 Minder Chen 1994-2006
Using SiteMapPath
7/31/2019 Master Pages Navigation Minder
66/71
Master page & Navigation - 66 Minder Chen 1994-2006
Key SiteMapPath Properties
7/31/2019 Master Pages Navigation Minder
67/71
Master page & Navigation - 67 Minder Chen 1994-2006
Name Description
CurrentNodeStyle Style used to render the current node
CurrentNodeTemplate HTML template used to render the current node
NodeStyle
NodeStyleTemplate
PathSeparatorStyle Style used to render node separators
PathSeparatorTemplate
Style used to render non-current nodes
HTML template used to render non-current nodes
HTML template used to render node separators
PathSeparator Text used for node separators (default = ">")
Site Map Providers
7/31/2019 Master Pages Navigation Minder
68/71
Master page & Navigation - 68 Minder Chen 1994-2006
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
7/31/2019 Master Pages Navigation Minder
69/71
Master page & Navigation - 69 Minder Chen 1994-2006
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
7/31/2019 Master Pages Navigation Minder
70/71
Master page & Navigation - 70 Minder Chen 1994-2006
' Write the title of the current node to a Label controlLabel1.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
7/31/2019 Master Pages Navigation Minder
71/71
Fired by SiteMapPath controls
Used to perform on-the-fly customization ofpaths displayed by SiteMapPath controls
Add nodes to site map for pages that don't appearin the site map
Change the properties of the current node
Register handler in Application_Start