Managing Look, Feel, and Layout with Visual Studio 2005 and ASP'NET 2'0

1
Managing Look, Feel, and Layout with Visual
Studio 2005 and ASP.NET 2.0
2
Agenda
3
Master Pages
4
Master Page Basics
lt_at_ Master gt ltaspContentPlaceHolder
ID"Main" RunAt"server" /gt
lt_at_ Page MasterPage- File"Site.master"
gt ltaspContent ContentPlaceHolderID "Main"
RunAt"server" /gt lt/aspContentgt

5
Defining a Master Page
lt_at_ Master gt lthtmlgt ltbodygt lt!-- Banner
shown on all pages that use this master --gt
lttable width"100"gt lttrgt lttd
bgcolor"darkblue" align"center"gt
ltspan style"font-size 36pt color white"gtACME
Inc.lt/spangt lt/tdgt lt/trgt
lt/tablegt lt!-- Placeholder for content below
banner --gt ltaspContentPlaceHolder ID"Main"
RunAt"server" /gt lt/bodygt lt/htmlgt
6
Applying a Master Page
lt_at_ Page MasterPageFile"/Site.master"
gt ltaspContent ContentPlaceHolderID"Main"
RunAt"server"gt This content fills the place
holder "Main" defined in the master
page lt/aspContentgt
7
Applying a Master Page to a Site
ltconfigurationgt ltsystem.webgt ltpages
masterPageFile"/Site.master" /gt
lt/system.webgt lt/configurationgt
8
Applying a Master Page Programmatically
void Page_PreInit (Object sender, EventArgs e)
Page.MasterPageFile "/Site.master"
9
Default Content
lt_at_ Master gt ... ltaspContentPlaceHolder
ID"Main" RunAt"server"gt This is default
content that will appear in the absence of a
matching Content control in a content
page ltaspContentPlaceHoldergt
10
The Page.Master Property
11
Accessing a Control in the Master Page (Weak
Typing)
ltaspLabel ID"Title" RunAt"server" /gt
((Label) Master.FindControl ("Title")).Text
"Orders"
12
Accessing a Control in the Master Page (Strong
Typing)
ltaspLabel ID"Title" RunAt"server" /gt . .
. ltscript language"C" runat"server"gt public
string TitleText get return Title.Text
set Title.Text value lt/scriptgt
Master.TitleText "Orders"
13
Nesting Master Pages
lt!-- Orders.Master --gt lt_at_ Master
MasterPageFile"/Site.Master" gt ltaspContent
ContentPlaceHolderID"..." RunAt"server"gt
ltaspContentPlaceHolder ID"..." RunAt"server"gt
... lt/aspContentPlaceHoldergt ltaspContentgt
14
Master Pages
15
Themes and Skins
16
Applying a Theme to a Page
lt_at_ Page Theme"BasicBlue"gt
17
Applying a Theme to a Site
ltconfigurationgt ltsystem.webgt ltpages
theme"BasicBlue" /gt lt/system.webgt lt/configurati
ongt
18
Applying a Theme Programmatically
void Page_PreInit (Object sender, EventArgs e)
Page.Theme "BasicBlue"
19
Folder structure
vroot
App_Themes
Shocking-Pink
SKIN
SKIN
Autumn-Leaves
SKIN
SKIN
20
Defining Skins
lt!-- Default look for DropDownList controls
--gt ltaspDropDownList runat"server"
BackColor"hotpink" ForeColor"white" /gt lt!--
Default look for DataGrid controls
--gt ltaspDataGrid runat"server"
BackColor"CCCCCC" BorderWidth"2pt"
BorderStyle"Solid" BorderColor"CCCCCC"
GridLines"Vertical" HorizontalAlign"Left"gt
ltHeaderStyle ForeColor"white" BackColor"hotpink"
/gt ltItemStyle ForeColor"black"
BackColor"white" /gt ltAlternatingItemStyle
BackColor"pink" ForeColor"black"
/gt lt/aspDataGridgt ...
21
Named Skins
22
Defining Named Skins
lt!-- Default look for DropDownList controls
--gt ltaspDropDownList runat"server"
BackColor"blue" ForeColor"white"
SkinID"Blue" /gt lt!-- Default look for DataGrid
conotrols --gt ltaspDataGrid runat"server"
BackColor"CCCCCC" BorderWidth"2pt"
BorderStyle"Solid" BorderColor"CCCCCC"
GridLines"Vertical" HorizontalAlign"Left"
SkinID"Blue"gt ltHeaderStyle ForeColor"white"
BackColor"blue" /gt ltItemStyle
ForeColor"black" BackColor"white" /gt
ltAlternatingItemStyle BackColor"lightblue"
ForeColor"black" /gt lt/aspDataGridgt ...
23
Using a Named Skin
ltaspDropDownList ID"Countries" SkinID"Blue"
RunAt"server" /gt
24
The EnableTheming Property
ltaspDropDownList ID"Countries"
EnableTheming"false" RunAt"server" /gt
25
Themes and Skins
26
New Controls
Category
Controls
Data controls
GridView and DetailsView
Data source controls
SqlDataSource, ObjectDataSource, XmlDataSource,
etc.
Login controls
Login, CreateUserWizard, PasswordRecovery, etc.
Navigation controls
Menu, TreeView, and SiteMapPath
Web Parts controls
WebPartManager, WebPartZone, etc.
UI controls
FileUpload, BulletedList, MultiView, Wizard, etc.
27
UI Controls
Name
Description
BulletedList
Renders bulleted lists of items
FileUpload
UI for uploading files to Web servers
HiddenField
Renders hidden fields
ImageMap
Renders HTML image maps
MultiView
Defines multiple views displayed one at a time
View
Defines views in MultiView controls
Substitution
Designates non-cached regions of cached pages
Wizard
Guides users through stepwise procedures
28
The ImageMap Control
ltaspImageMap ImageUrl"Shapes.jpg"
OnClick"OnUpdate" RunAt"server"gt
ltaspCircleHotSpot X"50" Y"50" Radius"50"
PostBackValue"Circle" AlternateText"Circle"
HotSpotMode"Postback" RunAt"server" /gt
ltaspRectangleHotSpot Left"0" Top"100"
Right"100" Bottom"200" PostBackValue"Rectan
gle" AlternateText"Rectangle"
HotSpotMode"Postback" RunAt"server" /gt
ltaspPolygonHotSpot Coordinates"50, 200, 0, 300,
100, 300" PostBackValue"Triangle"
AlternateText"Triangle" HotSpotMode"Postback
" RunAt"server" /gt lt/aspImageMapgt . .
. ltscript language"C" runat"server"gt void
UpdateLabel (Object sender, ImageMapEventArgs
e) ... lt/scriptgt
29
The FileUpload Control
ltaspFileUpload ID"UploadControl" RunAt"server"
/gt ltaspButton Text"Upload" OnClick"OnUpload"
RunAt"server" /gt . . . ltscript
language"C" runat"server"gt void OnUpload
(Object sender, EventArgs e) if
(FileUploadControl.HasFile) string name
UploadControl.PostedFile.FileName // Path
name Stream bits UploadControl.PostedFil
e.InputStream // Contents ...
// Use the SaveAs method to persist to a local
file FileInfo file new FileInfo
(UploadControl.PostedFile.FileName)
UploadControl.SaveAs (Server.MapPath
("/Uploads/" file.Name) lt/scriptgt
30
The MultiView Control
ltaspMultiView ID"Main" ActiveViewIndex"0"
RunAt"server"gt ltaspView RunAt"server"gt
... lt/aspViewgt ltaspView RunAt"server"gt
... lt/aspViewgt ltaspView RunAt"server"gt
... lt/aspViewgt lt/aspMultiViewgt . .
. void OnSwitchView (Object sender, EventArgs
e) Main.ActiveViewIndex 1 // Switch
views
31
Declarative View Switching
ltaspMultiView ID"Main" ActiveViewIndex"0"
RunAt"server"gt ltaspView RunAt"server"gt
... ltaspButton CommandName"SwitchViewByIndex
" CommandArgument"1" Text"Switch to view
2" RunAt"server" /gt lt/aspViewgt ltaspView
RunAt"server"gt ... ltaspButton
CommandName"SwitchViewByIndex"
CommandArgument"0" Text"Switch to view 1"
RunAt"server" /gt lt/aspViewgt lt/aspMultiViewgt
32
ASP.NET 2.0 Controls
33
(No Transcript)