microsoft visual c# 2005 (part 2 of 4): asp.net 2.0 user
TRANSCRIPT
![Page 1: Microsoft Visual C# 2005 (Part 2 of 4): ASP.NET 2.0 User](https://reader033.vdocuments.site/reader033/viewer/2022052619/556ac669d8b42acd348b4cd0/html5/thumbnails/1.jpg)
Microsoft Visual C# 2005 (Part 2 of 4): ASP.NET 2.0 User Interface Elements
Fritz OnionCofounder Pluralsight LLChttp://pluralsight.com/fritz/
![Page 2: Microsoft Visual C# 2005 (Part 2 of 4): ASP.NET 2.0 User](https://reader033.vdocuments.site/reader033/viewer/2022052619/556ac669d8b42acd348b4cd0/html5/thumbnails/2.jpg)
Introduction to ASP.NET 2.0
A four-part webcast series for developers new to Microsoft® ASP.NET (two deliveries: Microsoft® Visual C# and Microsoft® Visual Basic .NET)
Lectures with accompanying labs
Date Topic
Mon, Feb. 19, 10 A.M. ASP.NET 2.0 Fundamentals (C#)
Tue, Feb. 20, 10 A.M. User Interface Elements (C#)
Wed, Feb. 21, 10 A.M. DataBinding and AJAX (C#)
Thu, Feb. 22, 10 A.M. Configuration and Deployment (C#)
Mon, Feb. 19, 1 P.M. ASP.NET 2.0 Fundamentals (VB)
Tue, Feb. 20, 1 P.M. User Interface Elements (VB)
Wed, Feb. 21, 1 P.M. DataBinding and AJAX (VB)
Thu, Feb. 22, 1 P.M. Configuration and Deployment (VB)
![Page 3: Microsoft Visual C# 2005 (Part 2 of 4): ASP.NET 2.0 User](https://reader033.vdocuments.site/reader033/viewer/2022052619/556ac669d8b42acd348b4cd0/html5/thumbnails/3.jpg)
Agenda
Master pages
Creating templated sites
Implementation
Uses
Themes and skins
Defined
Components of
Uses
Navigation controls
TreeView
Menu
SiteMapPath
![Page 4: Microsoft Visual C# 2005 (Part 2 of 4): ASP.NET 2.0 User](https://reader033.vdocuments.site/reader033/viewer/2022052619/556ac669d8b42acd348b4cd0/html5/thumbnails/4.jpg)
Master Pages
Application-wide templates now easy to define
Create one 'master' page with place holders for content
<!-- MasterPage.master --><%@ master language="C#" %><html><body><form runat="server"><h1>My common header</h1><asp:contentplaceholder id="MainContentPlaceHolder"
runat="server" />...
<!-- Page1.aspx --><%@ page language="C#" master="~/MasterPage.master" %><asp:content id="Content1"
contentplaceholderid="MainContentPlaceHolder"runat="server">
<asp:button id="Button1" runat="server" text="Button" /></asp:content>
![Page 5: Microsoft Visual C# 2005 (Part 2 of 4): ASP.NET 2.0 User](https://reader033.vdocuments.site/reader033/viewer/2022052619/556ac669d8b42acd348b4cd0/html5/thumbnails/5.jpg)
Master Pages: Designer Support
Master page
portion is visible
but read-only
Content
placeholders
are editable
![Page 6: Microsoft Visual C# 2005 (Part 2 of 4): ASP.NET 2.0 User](https://reader033.vdocuments.site/reader033/viewer/2022052619/556ac669d8b42acd348b4cd0/html5/thumbnails/6.jpg)
Master Page Implementation
The MasterPage base class inherits from UserControl
At run time, the master page is injected as the first control in each content page
Content controls on content pages are then injected into content placeholder elements
Similar to technique used by many templating systems in ASP.NET version 1.1 today
![Page 7: Microsoft Visual C# 2005 (Part 2 of 4): ASP.NET 2.0 User](https://reader033.vdocuments.site/reader033/viewer/2022052619/556ac669d8b42acd348b4cd0/html5/thumbnails/7.jpg)
Accessing the Master Page
Since the master 'page' ends up being just another control on each page, you can interact with it like any other composite control
void Page_Load(object sender, EventArgs e){HtmlForm f = (HtmlForm)Master.FindControl("_theForm");if (f != null){
// use f here...}
}
![Page 8: Microsoft Visual C# 2005 (Part 2 of 4): ASP.NET 2.0 User](https://reader033.vdocuments.site/reader033/viewer/2022052619/556ac669d8b42acd348b4cd0/html5/thumbnails/8.jpg)
Strongly Typed Master Page Access
Can strongly type master page access
Useful when accessing properties in master
Make sure same master page is always set
<%@ Page Language="C#"MasterPageFile="~/MasterPage.master"Title="Page2" %>
<%@ MasterType VirtualPath="~/MasterPage.master" %>
<%
<% %>
%>
![Page 9: Microsoft Visual C# 2005 (Part 2 of 4): ASP.NET 2.0 User](https://reader033.vdocuments.site/reader033/viewer/2022052619/556ac669d8b42acd348b4cd0/html5/thumbnails/9.jpg)
Changing the Master Page
You can set the master page programmatically, but only before the Init event fires:
protected override void OnPreInit(EventArgs e){this.MasterPageFile = "othertemplate.master";
base.OnPreInit(e);}
![Page 10: Microsoft Visual C# 2005 (Part 2 of 4): ASP.NET 2.0 User](https://reader033.vdocuments.site/reader033/viewer/2022052619/556ac669d8b42acd348b4cd0/html5/thumbnails/10.jpg)
Themes
Support for 'skinnable' sites using themes
<%@ Page Language="C#" Theme="SmokeAndGlass" %>
<%@ Page Language="C#" Theme="BasicBlue" %>
![Page 11: Microsoft Visual C# 2005 (Part 2 of 4): ASP.NET 2.0 User](https://reader033.vdocuments.site/reader033/viewer/2022052619/556ac669d8b42acd348b4cd0/html5/thumbnails/11.jpg)
What Is a Theme?
A directory under App_Themes
Contains one or more .skin files
.skin file contains control declarations with default attributes
Contains zero or more .css files
Contains zero or more subdirectories with resources
<!-- FallTheme.skin -->
<asp:button runat="server" borderstyle="Solid"
borderwidth="2px" bordercolor="Gold"
backcolor="DarkRed" />
...
![Page 12: Microsoft Visual C# 2005 (Part 2 of 4): ASP.NET 2.0 User](https://reader033.vdocuments.site/reader033/viewer/2022052619/556ac669d8b42acd348b4cd0/html5/thumbnails/12.jpg)
Changing Themes
You can programmatically change a themeMust be done in PreInit event handler of page
protected override void OnPreInit(EventArgs e)
{
Page.Theme = "autumn";
base.OnPreInit(e);
}
You can enable themes globally in web.config<configuration>
<system.web>
<pages theme="autumn" />
...
You can disable themes locally <asp:TextBox EnableTheming="false" ...
![Page 13: Microsoft Visual C# 2005 (Part 2 of 4): ASP.NET 2.0 User](https://reader033.vdocuments.site/reader033/viewer/2022052619/556ac669d8b42acd348b4cd0/html5/thumbnails/13.jpg)
Theme Application
By default, .skin properties override local properties
Use @Page 'StyleSheetTheme' for the inverse
Exempt controls locally from themes with EnableTheming='false'
Exempt an entire page with @Page 'EnableTheming='false'
![Page 14: Microsoft Visual C# 2005 (Part 2 of 4): ASP.NET 2.0 User](https://reader033.vdocuments.site/reader033/viewer/2022052619/556ac669d8b42acd348b4cd0/html5/thumbnails/14.jpg)
SkinIDs
Can define multiple controls of the same type in .skin
Uniquely identify each control with 'SkinID'
Select which control skin to apply in target control with 'SkinID'
<!-- FallTheme.skin -->
<asp:TextBox runat="server" backcolor="DarkRed" />
<asp:TextBox runat="server" backcolor="DarkRed"
Font-StrikeOut="true" SkinID="strikeOut" />
![Page 15: Microsoft Visual C# 2005 (Part 2 of 4): ASP.NET 2.0 User](https://reader033.vdocuments.site/reader033/viewer/2022052619/556ac669d8b42acd348b4cd0/html5/thumbnails/15.jpg)
Navigation Controls
Three new controls targeted at site navigation
TreeView
Hierarchical rendering with images and text
Menu
Both dynamic and static rendering supported
SiteMapPath
'Breadcrumbs' control
All three controls can use SiteMapProvider
Default data source draws from web.sitemap
Standard XML format for page navigation
![Page 16: Microsoft Visual C# 2005 (Part 2 of 4): ASP.NET 2.0 User](https://reader033.vdocuments.site/reader033/viewer/2022052619/556ac669d8b42acd348b4cd0/html5/thumbnails/16.jpg)
SiteMapProvider
SiteMapDataSource uses the default SiteMapProvider
Defaults to XmlSiteMapProvider implementation which reads XML data from web.sitemap file
<siteMap
xmlns="http://schemas.microsoft.com/..." >
<siteMapNode title="Home" url="~/Default.aspx" description="Go To Home">
<siteMapNode title="Departments" url="~/departments/default.aspx"
description="Go To Departments page"> ...
SiteMapProvider
XmlSiteMapProviderweb.sitemap
![Page 17: Microsoft Visual C# 2005 (Part 2 of 4): ASP.NET 2.0 User](https://reader033.vdocuments.site/reader033/viewer/2022052619/556ac669d8b42acd348b4cd0/html5/thumbnails/17.jpg)
SiteMapPath Control
Provides 'breadcrumbs' implementation
Data retrieved directly from SiteMapProvider (no need to explicitly connect to data source)
<asp:SiteMapPath ID="SiteMapPath1" runat="server" Font-Names="Verdana"
Font-Size="0.8em" PathSeparator=" : ">
<PathSeparatorStyle Font-Bold="True" ForeColor="#990000" />
<CurrentNodeStyle ForeColor="#333333" />
<NodeStyle Font-Bold="True" ForeColor="#990000" />
<RootNodeStyle Font-Bold="True" ForeColor="#FF8000" />
</asp:SiteMapPath>
<siteMap
xmlns="http://schemas.microsoft.com/..." >
<siteMapNode title="Home" url="~/Default.aspx" description="Go To Home">
<siteMapNode title="Departments" url="~/departments/default.aspx"
description="Go To Departments page"> ...
![Page 18: Microsoft Visual C# 2005 (Part 2 of 4): ASP.NET 2.0 User](https://reader033.vdocuments.site/reader033/viewer/2022052619/556ac669d8b42acd348b4cd0/html5/thumbnails/18.jpg)
TreeView Control
Truly hierarchical tree control
Can be bound to any XML data source (more later)
Convenient to bind to SiteMapDataSource to provide tree-navigation for a site
<asp:TreeView ID="TreeView1" runat="server"
DataSourceID="siteMapDataSource"
ImageSet="Simple" NodeIndent="10">
<ParentNodeStyle Font-Bold="False" />
<SelectedNodeStyle Font-Underline="True"... />
<NodeStyle Font-Names="Verdana" ... />
<HoverNodeStyle Font-Underline="True" .../>
</asp:TreeView>
<asp:SiteMapDataSource ID="siteMapDataSource"
runat="server" />
![Page 19: Microsoft Visual C# 2005 (Part 2 of 4): ASP.NET 2.0 User](https://reader033.vdocuments.site/reader033/viewer/2022052619/556ac669d8b42acd348b4cd0/html5/thumbnails/19.jpg)
Menu Control
Dynamic or static menu rendering
Can be driven from any XML data source
Most common to map onto SiteMapDataSource<asp:Menu ID="Menu1" runat="server" BackColor="#FFFBD6"
DataSourceID="siteMapDataSource"
MaximumDynamicDisplayLevels="10" StaticSubMenuIndent="10px" />
<asp:SiteMapDataSource ID="siteMapDataSource" runat="server" />
![Page 20: Microsoft Visual C# 2005 (Part 2 of 4): ASP.NET 2.0 User](https://reader033.vdocuments.site/reader033/viewer/2022052619/556ac669d8b42acd348b4cd0/html5/thumbnails/20.jpg)
Summary
Master pagesStandard implementation of templated pages
Designer/runtime support
Themes and skinsCollection of pluggable UI elements
Unify images, .css, and control declarations
New navigation controlsStandard implementations of Menu, Tree, and SiteMapPath
Flexible, provider driven (or data source driven)
UI is extremely customizable
![Page 21: Microsoft Visual C# 2005 (Part 2 of 4): ASP.NET 2.0 User](https://reader033.vdocuments.site/reader033/viewer/2022052619/556ac669d8b42acd348b4cd0/html5/thumbnails/21.jpg)
Lab Work
Lab 2 builds a site using the UI elements presented in this module
Create a new site with a master page
Define a theme with a style sheet and a skin
Create navigation with a sitemap, menu, and sitemappath
![Page 22: Microsoft Visual C# 2005 (Part 2 of 4): ASP.NET 2.0 User](https://reader033.vdocuments.site/reader033/viewer/2022052619/556ac669d8b42acd348b4cd0/html5/thumbnails/22.jpg)
Questions and Answers
Submit text questions using the “Ask” button.
Don’t forget to fill out the survey.
For upcoming and previously live webcasts: www.microsoft.com/webcasts
Got webcast content ideas? Contact us at: http://go.microsoft.com/fwlink/?LinkId=41781
Today's webcast was presented using Microsoft®
Office Live Meeting. Get a free 14-day trial by
visiting: www.microsoft.com/presentlive
![Page 23: Microsoft Visual C# 2005 (Part 2 of 4): ASP.NET 2.0 User](https://reader033.vdocuments.site/reader033/viewer/2022052619/556ac669d8b42acd348b4cd0/html5/thumbnails/23.jpg)