Master Pages and Site Navigation Minder Chen [email protected].

Master Pages and

Site Navigation

Minder [email protected]

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


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>)

<%@ Master %>

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

<%@ Master %>

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

<%@ Page MasterPage- File="Site.master" %>

<asp:Content ContentPlaceHolderID= "Main" RunAt="server" />

</asp:Content>

<%@ Page MasterPage- File="Site.master" %>

<asp:Content ContentPlaceHolderID= "Main" RunAt="server" />

</asp:Content>

Site.master default.aspx http://.../default.aspx


Resulting PageResulting Page

Master Page Architecture

< asp :ContentPlaceHolder

runat = server

ContentName = ”Main” />

< asp :ContentPlaceHolder

runat = server

ContentName = ”Footer” / >

< % @ Master % >

.Master file “A.master”Master file “A.master”

< % @ Page

Master = ”A .master” % >

.

< asp :Content

runat = server

ContentName = ”Footer” >

< / asp :Content >

< asp :Content

runat = server

ContentName = ”Main” >

< / asp :Content >

Content file “B.aspx”Content file “B.aspx”


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 masterSet the title attribute <%@ Page title=“jeff” %>

3. Optionally add content to override the master:a. Only <asp:content> controls or server-side script allowedb. <asp:content> controls replace regions in the master:

The contentplaceholderid identifies master’s 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"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 [email protected]

<br />

</span></strong>

</asp:Content>


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

• ProviderProvider-based for flexibility


Site Navigation Schema

Site Navigation API

Site Maps

Web.sitemapOther

Data Stores

ControlsMenuMenu TreeViewTreeView SiteMapPathSiteMapPathSiteMap-

DataSourceSiteMap-

DataSource

SiteMapSiteMap

SiteMapNodeSiteMapNodeSiteMapNodeSiteMapNode SiteMapNodeSiteMapNode

XmlSiteMapProviderXmlSiteMapProvider Other Site MapProviders

Other Site MapProviders

Providers


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>


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"DataSourceID="SiteMapDataSource1" DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#284E98" Orientation="Horizontal"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 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/Leaf by data item

Selection Model Link & Hover 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 can’t 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" Text="Submit" />

<asp:Button ID="Button2" runat="server" Text="Reset" />

</asp:Content>


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 />


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 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


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

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

<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 Managersand CEOs

Visible to everyone


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 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

<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 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

• 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 controlLabel1.Text = SiteMap.CurrentNode.Title

' Write the path to the current node to a Label controlDim node As SiteMapNode = SiteMap.CurrentNodeDim 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

Date post:	27-Dec-2015
Category:	Documents
Upload:	annice-curtis
View:	222 times
Download:	2 times

Master Pages and Site Navigation Minder Chen [email protected].

Documents