Master Pages and Site Navigation Minder Chen

Master page & Navigation - 2 © Minder Chen, 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 page & Navigation - 3 © Minder Chen, Master Pages Master Page Content Page

Master page & Navigation - 4 © Minder Chen, Master Page Basics Masters define common content and placeholders ( ) Content pages reference masters and fill placeholders with content ( ) <asp:ContentPlaceHolder ID="Main" RunAt="server" /> <asp:ContentPlaceHolder ID="Main" RunAt="server" /> Page MasterPage- File="Site.master" %> <asp:Content ContentPlaceHolderID= "Main" RunAt="server" /> Page MasterPage- File="Site.master" %> <asp:Content ContentPlaceHolderID= "Main" RunAt="server" /> Site.masterdefault.aspxhttp://.../default.aspx

Master page & Navigation - 5 © Minder Chen, Resulting Page Master Page Architecture <asp:ContentPlaceHolder runat=server ContentName=”Main”/> <asp:ContentPlaceHolder runat=server ContentName=”Footer”/> Master file “A.master” Master=”A.master”%>. <asp:Content runat=server ContentName=”Footer”> </asp:Content> <asp:Content runat=server ContentName=”Main”> </asp:Content> Content file “B.aspx”

Master page & Navigation - 6 © Minder Chen, Create a New Master Page

Master page & Navigation - 7 © Minder Chen, Use Table for Layout Control

Master page & Navigation - 8 © Minder Chen, Set up the Master Page

Master page & Navigation - 9 © Minder Chen, Defining a Master Page ACME Inc.

Master page & Navigation - 10 © Minder Chen, 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)

Master page & Navigation - 11 © Minder Chen, Modified Master Page Untitled Page Minder Chen ASP.NET Learning Web Site

Master page & Navigation - 12 © Minder Chen, Default Content ContentPlaceHolder controls can define content of their own ("default content") Default content is displayed ONLY if not overridden by content page... This is default content that will appear in the absence of a matching Content control in a content page

Master page & Navigation - 13 © Minder Chen, Create a Content Page

Master page & Navigation - 14 © Minder Chen, Add a Content Page based on a Master Page

Master page & Navigation - 15 © Minder Chen, Create a Content Page: Applying a Master Page This content fills the content place holder "Main" defined in the master page (site.Master)

Master page & Navigation - 16 © Minder Chen, Using a Master Page 1. Create an ASP.NET page (.aspx extension) 2. On the page directive: attribute to reference master Set the title attribute 3. Optionally add content to override the master: a. Only controls or server-side script allowed b. controls replace regions in the master: The contentplaceholderid identifies master’s region controls can contain any page content

Master page & Navigation - 17 © Minder Chen, A Content Page with a Master Page Applied

Master page & Navigation - 18 © Minder Chen, Code for AboutUS.aspx Title="About US" <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> This is a web site developed by 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 using ASP.NET. He can be reached at

Master page & Navigation - 19 © Minder Chen, Applying a Master Page to a Site

Master page & Navigation - 20 © Minder Chen, 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)

Master page & Navigation - 21 © Minder Chen, 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

Master page & Navigation - 22 © Minder Chen, Site Navigation Schema Site Navigation API Site Maps Web.sitemap Other Data Stores Controls Menu TreeView SiteMapPath SiteMap- DataSource SiteMap- DataSource SiteMap SiteMapNode XmlSiteMapProvider Other Site Map Providers Other Site Map Providers

Master page & Navigation - 23 © Minder Chen, Example of Menu Controls and SiteMapPath

Master page & Navigation - 24 © Minder Chen, Navigation

Master page & Navigation - 25 © Minder Chen, Create a Site Map

Master page & Navigation - 26 © Minder Chen, Web.sitemap XML document is "very" case sensitive <siteMapNode url="AboutUs.aspx" title="About Us" description="Authors and purposes">

Master page & Navigation - 27 © Minder Chen, 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

Master page & Navigation - 28 © Minder Chen, Bind Menu Control with SiteMapDataSource

Master page & Navigation - 29 © Minder Chen, Menu 200+ Properties; here are the top 4: –Orientation = Horizontal –StaticDisplayLevels = 2 –StaticSubMenuIndent = 0 –DisappearAfter = 300

Master page & Navigation - 30 © Minder Chen, Menu Control Tag DataSourceID="SiteMapDataSource1" Orientation="Horizontal"

Master page & Navigation - 31 © Minder Chen, 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

Master page & Navigation - 32 © Minder Chen, Stylizing SiteMapPath

Master page & Navigation - 33 © Minder Chen, Menu or Tree: Choosing the right control FeaturesMenuTreeview ExpansionPopOutExpand in Place Download on DemandNoYes CheckboxesNoYes TemplatesYesNo LayoutHorizontal & Vertical Vertical Mobile & DownlevelYes Style OptionStatic, Dynamic, Level Level or Parent/Root/Leaf by data item Selection ModelLink & HoverPostback, link & disabled

Master page & Navigation - 34 © Minder Chen, Theme and Skin

Master page & Navigation - 35 © Minder Chen, Add a Style Sheet in a Theme

Master page & Navigation - 36 © Minder Chen,

Master page & Navigation - 37 © Minder Chen,

Master page & Navigation - 38 © Minder Chen, 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; }

Master page & Navigation - 39 © Minder Chen,

Master page & Navigation - 40 © Minder Chen, Apply Themes to the Web Site

Master page & Navigation - 41 © Minder Chen, To apply a theme to an individual page

Master page & Navigation - 42 © Minder Chen, 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

Master page & Navigation - 43 © Minder Chen, 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

Master page & Navigation - 44 © Minder Chen, Themes: Advanced scenarios StyleSheetTheme vs. “Just” Theme Dynamically Switching Themes Extreme Changes

Master page & Navigation - 45 © Minder Chen, Skin

Master page & Navigation - 46 © Minder Chen, 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. 2. Default skin. The SkinId is not defined. Only one default control skin per control type is allowed in the same theme. --%> <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" />

Master page & Navigation - 47 © Minder Chen,

Master page & Navigation - 48 © Minder Chen, Sample Code You need to use Theme in order to use Skin Page Language="VB" Theme="Theme1" MasterPageFile="~/MasterPage.master" Title="Untitled Page" %> Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) End Sub Contact Information

Master page & Navigation - 49 © Minder Chen, UI Tricks and Tips

Master page & Navigation - 50 © Minder Chen, UITricksTips.aspx 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 function HelloAlert() { alert("Hello World"); } Untitled Page <form id="form1" runat="server" defaultfocus="TextBoxUserName" defaultbutton="buttonDefault">

Master page & Navigation - 51 © Minder Chen, Continued… U ser Name:" AssociatedControlID="TextboxUserName"> <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:Label ID="LabelPassword" runat="server" AccessKey="p" AssociatedControlID="TextboxPassword" Text=" P assword:"> <asp:Button ID="buttonSumit" runat="server" Text="Secured Login" ValidationGroup="userlogin" /> <asp:Label ID="Label " runat="server" AccessKey="p" AssociatedControlID="Textbox " Text=" E mail:"> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage=" is required for login with " ControlToValidate="Textbox " ValidationGroup=" " > <asp:Button ID="buttonLoginWith " runat="server" Text="Login with " ValidationGroup=" " OnClientClick="HelloAlert();" /> <asp:Image ID="Image1" runat="server" AlternateText="ASP.NET Logo" ImageUrl="~/images/asp_net_logo.gif" DescriptionUrl="~/AboutUs.aspx" />

Master page & Navigation - 52 © Minder Chen, Continued… <asp:Button ID="ButtonDefault" runat="server" Text="Default Button" OnClick="ButtonDefault_Click" /> Test <asp:Button ID="Button1" runat="server" Text="Test Keep Scroll Position" OnClientClick="return confirm('Are you sure you want to submit?');" OnClick="Button1_Click" />

Master page & Navigation - 53 © Minder Chen,

Master page & Navigation - 54 © Minder Chen, 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

Master page & Navigation - 55 © Minder Chen, Declaring a TreeView <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 Text="Consulting" RunAt="server" NavigateUrl="Consulting.aspx" /> <asp:TreeNode Text="Debugging" RunAt="server" NavigateUrl="Debugging.aspx" />

Master page & Navigation - 56 © Minder Chen, Key TreeView Properties NameDescription ShowExpandCollapseSpecifies whether expand/collapse indicators are shown ExpandDepthSpecifies the TreeView's initial expand depth LevelStylesSpecifies appearance of nodes by level RootNodeStyleSpecifies appearance of root nodes LeafNodeStyleSpecifies appearance of leaf nodes SelectedNodeStyleSpecifies appearance of selected nodes HoverNodeStyleSpecifies appearance of nodes when cursor hovers overhead NodeStyleSpecifies default appearance of nodes

Master page & Navigation - 57 © Minder Chen, Create a New Site Map

Master page & Navigation - 58 © Minder Chen, XML Site Map <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 title="Consulting" url="Consulting.aspx" description="Consulting for.NET projects" /> <siteMapNode title="Debugging" url="Debugging.aspx" description="Help when you need it the most" />

Master page & Navigation - 59 © Minder Chen, TreeViews and Site Maps <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 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 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 title="Consulting" url="Consulting.aspx" description="Consulting for.NET projects" /> <siteMapNode title="Debugging" url="Debugging.aspx" description="Help when you need it the most" /> Web.sitemap

Master page & Navigation - 60 © Minder Chen, Changing the File Name <add name="AspNetXmlSiteMapProvider" type="System.Web.XmlSiteMapProvider, System.Web,..." siteMapFile="Acme.sitemap" />

Master page & Navigation - 61 © Minder Chen, Attributes NameDescription descriptionDescription of node rolesRole or roles for which this node is visible* titleTitle of this node urlURL of this node * Multiple roles can be specified using comma- or semicolon-delimited lists

Master page & Navigation - 62 © Minder Chen, Security Trimming <siteMapNode title="Announcements" url="Announcements.aspx" description="Information for all employees" roles="*" /> <siteMapNode title="Salaries" url="Salaries.aspx" description="Salary data" roles="Managers, CEOs" /> Visible only to Managers and CEOs Visible to everyone

Master page & Navigation - 63 © Minder Chen, Enabling Security Trimming <add name="AspNetXmlSiteMapProvider" type="System.Web.XmlSiteMapProvider, System.Web,..." securityTrimmingEnabled="true" siteMapFile="web.sitemap" />

Master page & Navigation - 64 © Minder Chen, SiteMapDataSource Properties NameDescription SiteMapProviderName of provider used to obtain site map data StartingNodeOffsetStarting node identified by level (default = 0) StartingNodeUrlStarting node identified by URL StartFromCurrentNodeSpecifies whether starting node should be the root node (false) or the current node (true). Default = false ProviderProvider used to obtain site map data ShowStartingNodeSpecifies whether to show the root node

Master page & Navigation - 65 © Minder Chen, Hiding the Root Site Map Node <asp:SiteMapDataSource ID="SiteMap" ShowStartingNode="false" RunAt="server" /> <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 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 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 title="Consulting" url="Consulting.aspx" description="Consulting for.NET projects" /> <siteMapNode title="Debugging" url="Debugging.aspx" description="Help when you need it the most" /> Web.sitemap

Master page & Navigation - 66 © Minder Chen, Using SiteMapPath

Master page & Navigation - 67 © Minder Chen, Key SiteMapPath Properties NameDescription CurrentNodeStyleStyle used to render the current node CurrentNodeTemplateHTML template used to render the current node NodeStyle NodeStyleTemplate PathSeparatorStyleStyle 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 PathSeparatorText used for node separators (default = ">")

Master page & Navigation - 68 © Minder Chen, 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

Master page & Navigation - 69 © Minder Chen, 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

Master page & Navigation - 70 © Minder Chen, 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 ()

Master page & Navigation - 71 © Minder Chen, 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