WEB001

An in-depth exploration of ASP.NET 2.0 (Part 1)

(This lab inl!des an optional setion on
ASP.NET 2.0 User Interface
Enhancements: Master Pages, Themes, and
Controls "hih #o! an o$plete if #o! ha%e
eno!&h ti$e or "ant to extend #o!r session)
'reatin& a Web Site
ASP.NET is loaded "ith ne" feat!res desi&ned to $a(e b!ildin& sophistiated Web
sites easier than e%er before. )n this lab* #o!+ll b!ild a Web site "hih is desi&ned to
a,!aint #o! "ith so$e of the ASP.NET 2.0 feat!res and pro%ide a taste of "hat+s
to o$e.
Getting Started
Log in using the Administrator user account. The password is
Pass@word1.
Start Visual Studio 2005 by navigating to Start | All Programs |
Microsoft Visual Studio 2005 | Microsoft Visual Studio.
Select View | Solution Explorer to ensure that the Solution
Explorer window is visible.
ll o! the exercises !or this lab are in the directory
!"MS#a$s"ASP%&E'"Starter"(#anguage of c)oice * V+,-.
2
Exercise 1
Create a Web site
)n this exerise* #o!+ll !se -is!al St!dio to reate a ne" Web site. .o!+ll also add a pair of
folders to it/ one for holdin& i$a&es* and another for holdin& o$ponents.
Tasks eta!led Ste"s
#. 'reate a ne"
Web site
a. Start 0irosoft -is!al St!dio.
$. Selet 1Ne% &e$ S!te2 fro$ -is!al St!dio+s 3ile $en!.
c. )n the Ne% &e$ S!te dialo&* hoose '(!s)al C*+ or '(!s)al ,as!c+ as the pro4et t#pe
and 'Em"t- &e$ S!te+ as the te$plate t#pe. T#pe 'C:.
MS/a$s.ASP.NET.Starter.0lang)age1./a$#+ into the 5oation box and li( 67 to reate
the 5ab1 Web site.
2. Add an )$a&es
folder
a. 8i&ht-li( '/9..95ab1 in the Sol)t!on E2"lorer "indo" and selet 'Ne% 3older.+
If Solution Explorer isnt visible, select Solution Explorer from the View
menu to display it, or press Ctrl!lt"#$
$. Na$e the folder 'Images.+
c. 8i&ht-li( the )$a&es folder in Sol!tion Explorer and selet 'Add E2!st!ng Item.+
d. Na%i&ate to the C:.MS/a$s.ASP.NET./a$3!les.Images folder and selet MSN.g!f to
add a loal op# of 0SN.&if to #o!r Web site+s )$a&es folder.
4. Add an
App:'ode folder
a. 8i&ht-li( '/9..95ab1 in the Sol)t!on E2"lorer "indo" and selet 'Add ASP.NET 3older
51A""6Code.+
! %ote that this folder named !pp&Code allows classes to be auto
compiled and 'enerally consumable within in your !S(#%E) pro*ect
3
Exercise 2
Create a master page
)n this exerise* #o!+ll reate a $aster pa&e to ser%e as a te$plate for the Web site+s pa&es.
Tasks eta!led Ste"s
#. Add a $aster
pa&e
a. )n the Sol)t!on E2"lorer "indo"* r!ght5cl!ck '/9..95ab1and selet 'Add Ne% Item.+
$. )n the Add Ne" )te$ dialo&* selet 'Master Page+ and t#pe 'S!te.master+ into the
Na$e box. Be s!re 1Plae ode in separate file2 is checked and the appropriate lan&!a&e is
seleted in the 5an&!a&e box before li(in& Add.
2. Add a table to
the $aster pa&e
a. 0a(e s!re 1)nternet Explorer ;.02 is seleted in the Target Schema for (al!dat!on
drop-do"n list on the toolbar.
$. 'li( the es!gn b!tton in the lo"er left orner of the desi&ner "indo" to s"ith to
<esi&n %ie".
c. =o to the /a-o)t men) and selet 'Insert Ta$le.+
d. )n the )nsert Table dialo&* set 7o%s and Col)mns to 2. 'he( the &!dth box and enter
#008. Also he( the 'Cell"add!ng+ and 'Cells"ac!ng+ boxes and set both to 0. Then li(
67 to add the table to the $aster pa&e. The table sho!ld appear abo%e the
'ontentPlae>older ontrol.
4. 'reate a
banner
a. <ra& an ASP.NET Image control fro$ the Toolbox and drop it into the )""er left cell
of the table.
If the )oolbox window isnt visible, select )oolbox from the View menu or
press Ctrl!lt+#
$. =o to the Pro"ert!es "indo" and set the )$a&e ontrol+s ImageUrl propert# to
'9:Images:MSN.g!f+.
If the (roperties window isnt visible, select (roperties ,indow from
the View menu or press -.#
c. Also in the Properties "indo"* set the )$a&e ontrol+s ImageAl!gn propert# to M!ddle.
d. Position the !rsor 4!st o)ts!de the left border of the table+s )""er5left cell and li( the
&rab handle to selet the ent!re ta$le ro%.
e. =o to the Properties "indo" and set the ro"+s ,gColor propert# to '*#0;2<,+.
f. Selet the next table ro". Set its ,gColor propert# to =ra- and >e!ght propert# to #.
g. Selet the table+s left col)mn. Set its &!dth propert# to #00.
h. Selet the table+s r!ght col)mn. Set its &!dth propert# to #008. (Note the perent
si&n?)
!. P!t the !rsor in the table+s )""er5r!ght ell and t#pe ',ookstore.+
?. Selet the text #o! 4!st t#ped. @se the 3or$attin& toolbar to han&e the text to @A5"o!nt
$old !tal!c (erdana and set the 3oregro)nd color to &h!te.
If the -ormattin' toolbar isnt visible, select View /0 )oolbars /0
-ormattin' to ma1e it visible#
After"ards* #o! sho!ld see this in the desi&ner/
4

5
Exercise 3
Build the main content page
No" that the $aster pa&e is o$plete* it+s ti$e to b!ild a ontent pa&e. The first one #o!+ll b!ild de$onstrates
ho" ,!i(l#Aand "ith ho" little odeA#o! an reate a data-dri%en Web pa&e "ith ASP.NET 2.0.
Tasks eta!led Ste"s
#. Add a ontent
pa&e
a. 8i&ht-li( '/9..95ab1 in Sol!tion Explorer and selet 'Add Ne% Item.+
$. Selet '&e$ 3orm+ and na$e it efa)lt.as"2. 'he( the 'Place code !n se"arate f!le+
and 'Select master "age+ boxes and $a(e s!re the appropriate lan&!a&e is seleted in the
5an&!a&e box before li(in& Add.
c. )n the ens!in& 1Selet a 0aster Pa&e2 "indo"* selet S!te.masterAthe $aster pa&e #o!
b!ilt in the pre%io!s exeriseAand li( BC.
d. Exa$ine the DPage d!rect!Ee at the top of efa)lt.as"2.
%otice the MasterPageFile attribute#
e. 'li( the es!gn b!tton to s"ith to <esi&n %ie". Notie that desi&ner sho"s the
ontent inherited fro$ the $aster pa&e* b!t shades it to indiate that it+s not defined in the
ontent pa&e itself.
2. Add a
S,l<ataSo!re
ontrol
a. 'li( the S$art Ta& on !pper ri&ht of ontent area and selet 'efa)lt to MasterFs
Content+ option on the $en!. 'ontent on the pa&e an be '!sto$ (defa!lt) or o$e fro$ the
0aster. No" press the S$art Ta& on !pper ri&ht of ontent area and selet 'Create C)stom
Content+
$. <ra& a SGlataSo)rce ontrol (#o!+ll find it in the Toolbox+s <ata setion) onto the
pa&e and drop it !nto the 'ontent ontrol.
c. 'li( 'Conf!g)re ata So)rce+ in the 'SGlataSo)rce Tasks+ $en! (see belo").
d. When the 'onfi&!re <ata So!re dialo& pops !p* li( the Ne% Connect!on b!tton to
reate a ne" database onnetion.
e. )f the 'hoose <ata So!re dialo& appears* selet M!crosoft SH/ SerEer in the <ata
so!re list and li( Cont!n)e.
f. )n the Add 'onnetion dialo&* t#pe 'localhost+ into the 1Ser%er na$e2 box and selet
'Use &!ndo%s A)thent!cat!on.+ Then selet 'P)$s+ !nder 1Selet or enter a database
na$e2 and li( BC.
g. 0a(e s!re the ne" onnetion is selected in the '&hat data connect!on sho)ld -o)r
a""l!cat!on )se to connect to the data$aseI+ box. Then li( Ne2t.
h. 0a(e s!re 1.es* sa%e this onnetion as2 is checked and li( Ne2t to proeed.
!. )n the ens!in& dialo&* selet 't!tles+ in the drop-do"n list labeled 'Name.+ )n the
'ol!$ns box* he( 't!tle,+ '"r!ce,+ and 'notes+ as sho"n belo". Then li( Ne2t to
proeed.
?. 'li( 3!n!sh to finish onfi&!rin& the S,l<ataSo!re.
4. Add a
=rid-ie" ontrol
a. <ra& a =r!d(!e% ontrol onto the pa&e and drop it )nderneath the SGlataSo)rce
ontrol.
$. )n the 1=rid-ie" Tas(s2 $en!* selet SGlataSo)rce# fro$ the 1'hoose <ata So!re2
6
list to $!nd the =rid-ie" to the S,l<ataSo!re.
c. @se the 'A)to 3ormat+ o$$and in 1=rid-ie" Tas(s2 to appl# the '7a!n- a-+
for$at to the =rid-ie".
d. 'li( 'Ed!t Col)mns+ in the 1=rid-ie" Tas(s2 S$art Ta&.
e. )n the Selected f!elds list selet the ol!$n na$ed '"r!ce.+ Set its ata3ormatStr!ng
propert# to 'J0:cK+* its ItemSt-le5>or!LontalAl!gn propert# to 7!ght* and its >tmlEncode
propert# to 3alse. 'li( BC.
f. 'li( 'Add Ne% Col)mn+ in the 1=rid-ie" Tas(s2 S$art Ta&.
g. Selet 'Check,o23!eld+ in the 'hoose a field t#pe list and fill in the re$ainin& fields
of the Add 3ield dialo& as pit!red belo". Then li( BC.
h. 'li( 'Ed!t Col)mns+ in the 1'o$$on =rid-ie" Tas(s2 $en!.
!. Selet the 'add to cart+ ol!$n that #o! 4!st added and li( 'ConEert th!s f!eld !nto a
Tem"late3!eld.+ Then set the ol!$n+s ItemSt-le5>or!LontalAl!gn propert# to Center and
li( 67.
?. 'he( the 'Ena$le Sort!ng+ box in the 1=rid-ie" Tas(s2 $en!.
k. Selet the =r!d(!e% in the desi&ner and !se the Properties "indo" to set its &!dth
propert# to #008.
l. Selet 'Start &!tho)t e$)gg!ng+ fro$ the <eb!& $en! (or press 'trlB3C) to la!nh
<efa!lt.aspx in a bro"ser "indo". -erif# that the o!tp!t loo(s so$ethin& li(e this/
7
m. Sort the =r!d(!e% b# li(in& one of the sortable ol!$n headers. Also %erif# that
li(in& the sa$e header se%eral ti$es in s!ession perfor$s alternat!ng ascend!ng and
descend!ng sorts.
n. 'lose the bro"ser and ret!rn to -is!al St!dio.
8
Exercise 4
Build the chec!out page
)n this exerise* #o!+ll b!ild a he(-o!t pa&e that lists the ite$s seleted in the =rid-ie" on the pre%io!s
pa&e and as(s for a redit ard n!$ber. .o!+ll see first-hand ho" ross-pa&e postba(s "or( and ho" a pa&e
that+s the tar&et of a ross-pa&e postba( an o$$!niate "ith the pa&e that posted to it. .o!+ll also b!ild a
si$ple o$ponent that %alidates redit ard n!$bers and allo" ASP.NET to a!too$pile it.
Tasks eta!led Ste"s
#. Add a
ontent pa&e
a. 8i&ht-li( '/9..95ab1 in Sol!tion Explorer and selet 'Add Ne% Item.+
$. Selet '&e$ 3orm+ and na$e it CheckB)t.as"2. 0a(e s!re the 'Place code !n se"arate
f!le+ and 'Select master "age+ boxes are checked before li(in& Add.
c. Selet S!te.master as the $aster pa&e.
d. Add the follo"in& direti%e belo" the Pa&e <ireti%e.
<%@ PreviousPageType VirtualPath="~/Default.aspx" %>
e. 'li( the <esi&n b!tton to s"ith to es!gn E!e%.
2. Add ontent
to the pa&e
a. Add a pair of text strin&s* a ,)lleted/!st ontrol* a Te2t,o2 ontrol* and a ,)tton ontrol to
the pa&e+s Content control* approxi$atin& the la#o!t sho"n belo".
)he layout pictured here uses 2./point bold Verdana for the text strin's and 23/
point bold Verdana for the 4ulleted"ist control# 5se the -ormattin' toolbar to set the font
on the text strin's, and the (roperties window to set the font on the 4ulleted"ist# )o set the
font si6e to 23/point on the latter, youll need to type 23pt into the Si6e box under -ont#
$. o)$le5cl!ck the pa&e in the desi&ner to add a Page6/oad $ethod.
c. Add the follo"in& code to Pa&e:5oad to bind the ,)lleted/!st to an Arra-/!st
ontainin& the titles of the boo(s seleted on the pre%io!s pa&e. Note the !se of the
PreE!o)sPage propert# to all a ")$l!c method on the pa&e that posted to this one/
'D
if (PreviousPage = !ull "" PreviousPage.#s$rossPagePost%a&'(
)
%ullete*+ist,.Data-our&e = ((.Default(
PreviousPage(./etTitles ((0
%ullete*+ist,.Data%i!* ((0
1
-B
#f 2ot (PreviousPage #s 2othi!g( 3!*3lso .
PreviousPage.#s$rossPagePost%a&' The!
%ullete*+ist,.Data-our&e = .
$Type(PreviousPage4 .Default(./etTitles
%ullete*+ist,.Data%i!*
"
5!* #f
d. <o!ble-li( efa)lt.as"2.cs or efa)lt.as"2.E$ in the Sol!tion Explorer to open it for
editin& and add the follo"in& method to the efa)lt6as"2 lass/
'D
pu6li& 3rray+ist /etTitles ((
)
3rray+ist list = !e7 3rray+ist ((0
forea&h (/ri*Vie78o7 ro7 i! /ri*Vie7,.8o7s(
)
$he&'%ox 6ox =
($he&'%ox( ro7.$ells9:;.$o!trols9,;0
if (6ox.$he&'e*(
list.3** (ro7.$ells9<;.Text(0
1
retur! list0
1
-B
Pu6li& =u!&tio! /etTitles(( 3s 3rray+ist
Di> list 3s 2e7 3rray+ist((
=or 5a&h ro7 3s /ri*Vie78o7 #! /ri*Vie7,.8o7s
Di> 6ox 3s $he&'%ox = .
$Type(ro7.$ells(:(.$o!trols(,(4 $he&'%ox(
#f 6ox.$he&'e* The!
list.3**(ro7.$ells(<(.Text(
5!* #f
2ext
8etur! list
5!* =u!&tio!
e. 8et!rn to desi&n %ie" in efa)lt.as"2.
f. Add a b!tton belo" the =r!d(!e% and set the properties of Te2t to 1'he(o!t EE2 and
Post,ackU7/ to 'he(6!t.aspx/
g. 'li( efa)lt.as"2 in the Sol!tion Explorer "indo" and press 'trlB3C to la!nh it.
h. 'he( a fe" of the boxes in the =rid-ie" and cl!ck the Check B)t b!tton at the botto$
of the pa&e. -erif# that CheckB)t.as"2 appears and a!ratel# lists the ite$s #o! seleted/
!. 'lose the bro"ser and ret!rn to (!s)al St)d!o.
4. Add a
'redit'ard
o$ponent
a. )n the Sol!tion Explorer "indo"* r!ght cl!ck the A""6Code folder and selet 'Add Ne%
Item.+
$. Selet 'Class+ as the tem"late t-"e and t#pe 'Cred!tCard+ into the Na$e box. Bea!se
this so!re ode file is loated in the App:'ode folder* it "ill be a)tocom"!led b# ASP.NET.
c. Add the follo"in& method to the 'redit'ard lass. )t 1%alidates2 a redit ard n!$ber b#
ens!rin& that it+s 1; di&its lon&/
'D
pu6li& stati& 6ool #sVali* (stri!g !u>6er(
)
retur! (!u>6er.+e!gth == ,?( ""
-yste>.Text.8egular5xpressio!s.8egex.#s@at&h(
!u>6er4 "A(BB*),?1("(0
1
-B
Pu6li& -hare* =u!&tio! #sVali*( .
1#
%yVal !u>6er 3s -tri!g( 3s %oolea!
8etur! (!u>6er.+e!gth = ,? 3!*3lso .
-yste>.Text.8egular5xpressio!s. .
8egex.#s@at&h(!u>6er4 "A(B*),?1("((
5!* =u!&tio!
d. =o ba( to the des!gner and open CheckB)t.as"2 in <esi&n %ie". <o!ble-li( the
'Place Brder+ b!tton to "rite a li( handler for it.
e. Add the follo"in& code to the ,)tton#6Cl!ck $ethod
'D
if ($re*it$ar*.#sVali*(Text%ox,.Text((
8espo!se.8e*ire&t("Tha!'Cou.aspx"(0
else
$lie!t-&ript.8egister-tartup-&ript(
s&ript./etType((4"5rror"4 s&ript(0
-B
#f $re*it$ar*.#sVali*(Text%ox,.Text( The!
8espo!se.8e*ire&t("Tha!'Cou.aspx"(
5lse
$lie!t-&ript.8egister-tartup-&ript( .
s&ript./etType((4"5rror"4 s&ript(
5!* #f
f. Add the follo"in& f!eld to the CheckB)t6as"2 lass/
C*
stati& rea*o!ly stri!g s&ript =
"<s&ript la!guage=B"Davas&riptB">B!" E
"alert (B"-orry4 6ut 7e &oul*!Ft vali*ate your" E
" &re*it &ar*B"(0B!" E
"</s&ript>"0
-B
Private -hare* 8ea*G!ly s&ript 3s -tri!g = .
"<s&ript la!guage=""Davas&ript"">" " v6$r+f " .
"alert (""-orry4 6ut 7e &oul*!Ft vali*ate your" " .
" &re*it &ar*""(0" " v6$r+f " "</s&ript>"
g. Selet efa)lt.as"2 in the Sol!tion Explorer "indo" and press CtrlM3; to la!nh it.
Selet a fe" ite$s in the =rid-ie" and li( the Check B)t b!tton. T#pe '#24@;+ into the
redit ard box and li( 'Place Brder.+ The follo"in& error message sho!ld appear in a
pop!p $essa&e box.
h. <is$iss the $essa&e box. Then lose the bro"ser and ret!rn to (!s)al St)d!o.
11
Exercise 5
Build the than!$ou page
All that re$ains no" is to b!ild the ontent pa&e that the Plae 6rder b!tton redirets to follo"in& a s!essf!l
redit ard %alidation. )n this exerise* #o!+ll b!ild that pa&e and then test the finished appliation..
Tasks eta!led Ste"s
#. Add a ontent pa&e a. 8i&ht-li( '/9..95ab1 in Sol!tion Explorer and selet 'Add Ne% Item.+
$. Selet '&e$ 3orm+ and na$e it ThankNo).as"2. 'he( the 1Plae ode in
separate file2 and 1Selet $aster pa&e2 boxes before li(in& Add.
c. Selet S!te.master as the $aster pa&e.
d. 'li( the es!gn b!tton to s"ith to <esi&n %ie".
e. Position the !rsor in the pa&e+s Content control and t#pe 'Thank -o) for )s!ng
MSN ,ookstoreO+
f. Mod!f- the text #o! 4!st t#ped to !se a $old !tal!c #@5"o!nt (erdana font.
2. Test the finished
appliation
a. Selet efa)lt.as"2 in the Sol!tion Explorer "indo" and press CtrlM3; to la!nh
it.
$. 'he( a fe" of the boxes in the =rid-ie" and li( the 'Check B)t+ b!tton.
c. T#pe '#24@;P<A#24@;P<A+ into the redit ard box and li( the 'Place Brder+
b!tton.
d. -erif# that ThankNo).as"2 appears and displa#s the $essa&e sho"n belo"/
e. 'lose the bro"ser and ret!rn to -is!al St!dio.
12
Exercise 6
%se the Web &ite 'dministration (ool
Another of the ne" feat!res in ASP.NET is the Web Site Ad$inistration Tool. )n ASP.NET 1.x* #o! han&e
onfi&!ration settin&s b# hand-$odif#in& '6N3)= files. )n ASP.NET 2.0* $ost onfi&!ration han&es an be
$ade thro!&h the Web Site Ad$inistration Tool. The tool is b!ilt on top of the ne" onfi&!ration AP)* "hih
"e+ll explore in detail in a s!bse,!ent o!rse $od!le.
)n this exerise* #o!+ll !se the Web Site Ad$inistration Tool to $a(e a si$ple onfi&!ration han&e to #o!r
Web site.
Tasks eta!led Ste"s
#. Start the Web
Site Ad$inistration
Tool
a. Selet 'ASP.NET Conf!g)rat!on+ fro$ -is!al St!dio+s &e$s!te $en!. After a brief
pa!se* the follo"in& "eb pa&e appears/
%7)E8
)he ,ebsite/0!S(#%E) Confi'uration command launches the ,eb Site
!dministration )ool based upon the active pro*ect in the Visual Studio I9E#
7utside Visual Studio, you can launch the ,eb Site !dministration )ool by
pointin' your browser to http8::###:webadmin#axd, where ### tar'ets a virtual
directory containin' an !S(#%E) application# ,ebadmin#axd isnt a file; its a
phantom resource mapped to an <))( handler that redirects to the ,eb Site
!dministration )ool on the ,eb server#
2. To&&le the
deb!& settin&
a. 'li( the A""l!cat!on tab at the top of the pa&e* or the 1Appliation 'onfi&!ration2
lin( in the bod# of the pa&e.
$. 'li( 'Conf!g)re de$)gg!ng and trac!ng.+
c. Ba( in -is!al St!dio* do!ble-li(
'/90S5abs9Web9Starter9Flan&!a&eE95ab19%e$.conf!g in Sol!tion Explorer to o"en the file.
8ead the 0com"!lat!on1 ele$ent and $a(e a $ental note of "hat it sa#s.
d. 8et!rn to the &e$ S!te Adm!n!strat!on Tool and li( the 1Enable deb!&&in&2 box.
e. 8et!rn to -is!al St!dio. A message infor$in& #o! that Web.onfi& has been $odified
o!tside the so!re editor and as(s if #o! "ant to reload it. 'li( the 'Nes+ b!tton.
f. )n Web.onfi&* ho" has the Fo$pilationE ele$ent han&edG
g. 'lose the &e$ S!te Adm!n!strat!on tool and -is!al St!dio 200C.
13
An in-depth exploration of ASP.NET 2.0 (Part 1)
ASP.NET 2.0 <ata Aess
Aess to ba(-end databases and other data stores is an i$portant ele$ent of data-
dri%en Web appliations. ASP.NET 2.0 $a(es b!ildin& data-dri%en pa&es easier
than e%er before b# pro%idin& data ontrols s!h as =rid-ie" and <etails-ie" to
render data into >T05* and data so!re ontrols s!h as S,l<ataSo!re and
6b4et<ataSo!re to delarati%el# bind data ontrols to data so!res. Than(s to
these ontrols* data aess hores that re,!ired h!ndreds of lines of ode in
ASP.NET 1.x an often be ao$plished "ith little or no ode in ASP.NET 2.0.
)n this exerise* #o!+ll be&in b!ildin& a Web site na$ed 0#'o$is that ser%es as a
%irt!al atalo& for o$i boo(s. .o!+ll reate a Web site to front the 0#'o$is
database and b!ild a pa&e that per$its !sers to bro"se thro!&h the o$i boo(s in
a =rid-ie". Next* #o!+ll add a pa&e that sho"s o$i boo( details in a
<etails-ie". 3inall#* #o!+ll add an ad$in pa&e that per$its o$i boo(s to be
inserted* !pdated* and deleted. )n addition to learnin& ho" to reate a Web site "ith
-is!al St!dio and !se the )<E to add pa&es* ontrols* and data o$ponents* #o!+ll
&et an in-depth loo( at S,l<ataSo!re and 6b4et<ataSo!re ontrols and &ain
first-hand experiene "ith the editin& apabilities of =rid-ie" and <etails-ie"
ontrols.
6ne the pa&es are !p and r!nnin&* #o!+ll enable ahin& in the data so!re
ontrols to $axi$iHe perfor$ane b# $ini$iHin& database )I6. And to top thin&s
off* #o!+ll !se SJ5 ahe dependenies to ens!re that #o!+re al"a#s ser%in& !p
fresh data to #o!r !sersAe%en if the !nderl#in& data han&es.
14
Exercise /
Verif0 t)e M0omics 1ata$ase
)n this exerise* #o!+ll %erif# a SJ5 Ser%er database na$ed 0#'o$is exists to ser%e as the appliation+s
pri$ar# data store.
Tasks eta!led Ste"s
#. 'onnet to the
database
a. Start -is!al St!dio 200C (or if started* lose #o!r pre%io!s pro4et)
$. )n the Ser%er Explorer "indo" ri&ht li( on ata Connect!ons and selet Add
Connect!on.
If the Server Explorer window is not visible, select the View | Server Explorer menu item#
If the Change Data Source dialo' appears, select =icrosoft S>" Server and clic1 7?# )his will
brin' up the !dd Connection dialo'#
c. )n the Add 'onnetion dialo&* %erif# the <ata so!re is M!crosoft SH/ SerEer QSGlCl!entR.
)f a different pro%ider is seleted* hoose the Change b!tton to han&e the data so!re pro%ider
t#pe.
d. )n the Add 'onnetion dialo& set the 'onnetion Properties as follo"s/
Ser%er Na$e/ loalhost
@se Windo"s A!thentiation
Selet or enter a database na$e/ 0#'o$is
e. Press Test Connect!on
! If unable to connect and test; run the script
C8@=S"abs@!S(#%E)@"ab-iles@9atabase@=yComics#cmd and try a'ain#
f. 6ne #o! ha%e %erified that #o! an onnet to the database* hoose BC to lose the
Add 'onnetion dialo&.
g. )n the Ser%er Explorer expand the M-Com!cs onnetion.
h. Next* expand the Ta$les node and onfir$ there is a Com!cs table.
15
Exercise 2
3se S4l1ataSource to populate a 1rop1own#ist
)n this exerise* #o!+ll reate a ne" ASP.NET Web site "ith -is!al St!dio. Then #o!+ll add
a <rop<o"n5ist ontrol to the pa&e and !se a S,l<ataSo!re to pop!late it "ith the res!lts
of a database ,!er#.
'as5s 1etailed Steps
#. 'reate a ne"
Web site
a. Start 0irosoft -is!al St!dio.
$. Selet 1Ne% &e$ S!te2 fro$ -is!al St!dio+s 3ile $en!.
c. )n the Ne" Web Site dialo&* hoose 1-is!al 'D2 or 1-is!al Basi2 as the lan&!a&e and
1ASP.NET Web Site2 as the te$plate t#pe. Bro"se to or T#pe in
1'/90S5abs9ASP.NET9Starter9Flan&!a&eE95ab22 into the 5oation box and li( 67 to reate
the Web site.
2. Add a
S,l<ataSo!re
a. 'li( the <esi&n b!tton to s"ith to <esi&n %ie".
$. <ra& a S,l<ataSo!re ontrol fro$ the Toolbox onto the pa&e.
c. 'li( 1'onfi&!re <ata So!re2 in the 1S,l<ataSo!re Tas(s2 $en! (see belo").
d. When the 'onfi&!re <ata So!re dialo& pops !p* li( the Ne" 'onnetion b!tton.
e. )n the Add 'onnetion dialo& $a(e s!re the <ata so!re is 0irosoft SJ5 Ser%er
(S,l'lient)* then t#pe 1loalhost2 into the 1Ser%er na$e2 box and selet 1@se Windo"s
A!thentiation.2 Then selet 10#'o$is2 !nder 1Selet or enter a database na$e2 and li( 67.
f. 0a(e s!re the ne" onnetion is seleted in the 1What data onnetion sho!ld #o!r
appliation !se to onnet to the databaseG2 box. Then li( Next.
g. When as(ed if the onnetion strin& sho!ld be sa%ed in the appliation onfi&!ration file*
ans"er #es and onfir$ that 10#'o$is'onnetionStrin&2 is the onnetion strin& na$e. Then
li( Next to proeed.
h. )n the ens!in& dialo&* he( 1Title2 in the 'ol!$ns box. Also he( 18et!rn onl# !ni,!e
ro"s*2 as sho"n belo". Then li( Next to proeed.
16
!. 'li( 3inish to finish onfi&!rin& the S,l<ataSo!re.
?. 5oo( in -is!al St!dio+s Sol!tion Explorer "indo" and obser%e that a Web.onfi& file has
been added to the Web site. <o!ble-li( Web.onfi& to open it. What do #o! see in the
FonnetionStrin&sE setionG
k. 'lose Web.onfi&.
l. 'li( the So!re b!tton to see a So!re %ie" of <efa!lt.aspx. 3ind the
Fasp/S,l<ataSo!reE ta& and loo( at its 'onnetionStrin& attrib!te. What do #o! see on the ri&ht
side of the e,!als si&nG
4. Add a
<rop<o"n5ist
a. S"ith ba( to <esi&n %ie" and dra& a <rop<o"n5ist ontrol onto the pa&e.
$. 'li( 1'hoose <ata So!re2 in the 1<rop<o"n5ist Tas(s2 $en!.
c. Selet S,l<ataSo!re1 fro$ the list of data so!res and li( 67.
d. 'he( the 1Enable A!toPostBa(2 box in the 1<rop<o"n5ist Tas(s2 $en!.
e. Selet 1Start Witho!t <eb!&&in&2 fro$ -is!al St!dio+s <eb!& $en! (or press 'trlB3C) to
r!n <efa!lt.aspx in #o!r bro"ser. -erif# that the pa&e ontains a drop-do"n list ontainin& the
ite$s sho"n belo".

f. 'lose the bro"ser and ret!rn to -is!al St!dio.
17
Exercise 6
3se 7$8ect1ataSource to Populate a 9ridView
)n this exerise* #o!+ll add a =rid-ie" ontrol to the pa&e. 8ather than !se a S,l<ataSo!re to pop!late the
=rid-ie"* #o!+ll reate a data o$ponent that interats "ith the database and bind it to the =rid-ie" !sin& an
6b4et<ataSo!re. )n addition* #o!+ll para$eteriHe the 6b4et<ataSo!re so that it passes the title seleted in
the <rop<o"n5ist to the data o$ponent for !se in a W>E8E la!se.
Tasks eta!led Ste"s
#. Add a data
o$ponent
a. Add a folder na$ed 1App:'ode2 to the Web site b# ri&ht-li(in& '/9..95ab2 in
Sol!tion Explorer and seletin& 'Add ASP.NET 3older 51A""6Code.+
$. 8i&ht-li( the App:'ode folder and selet 1Add Ne" )te$.2
c. )n the ens!in& dialo&* selet 1<ataSet2 as the te$plate t#pe and enter 0#'o$is.xsd
as the file na$e. Then li( the Add b!tton. After a brief pa!se* the TableAdapter
'onfi&!ration WiHard appears.
d. )f 0#'o$is'onnetionStrin& (Web.onfi&) appears in the list of existin&
onnetions* selet it. 6ther"ise* li( the Ne" 'onnetion b!tton and reate a ne"
0#'o$is onnetion* and then selet it !nder 1Selet or enter a database na$e.2 Then
li( Next.
e. 6n the 1'hoose a 'o$$and T#pe2 pa&e* selet 1@se SJ5 state$ents.2 Then li(
Next.
f. 6n the 1=enerate the SJ5 State$ents2 pa&e* t#pe 1SE5E'T 'o$i)<* Title*
N!$ber* .ear* =rade* '='* Boo(-al!e 3860 'o$is W>E8E TitleKLTitle2 into the
box labeled 1What data sho!ld be loaded into the tableG2 <o N6T li( the Next b!tton
4!st #et.
g. 'li( the Ad%aned 6ptions b!tton. )n the ens!in& dialo&* he( the 1=enerate
)nsert* @pdate* and <elete state$ents2 box and %erif# the other t"o boxes are !nhe(ed*
as sho"n belo". Then li( 67 follo"ed b# Next.
h. )n the 1'hoose 0ethods to =enerate2 pa&e !nhe( 3ill a <ataTable. )n the 8et!rn a
<ataTable setion* han&e the $ethod na$e to =et'o$isB#Title as sho"n belo". The
"iHard "ill no" inl!de in the data o$ponent a $ethod ("hih !ses the ,!er# #o!
entered earlier to pop!late a <ataTable) as "ell as $ethods for perfor$in& )NSE8Ts*
@P<ATEs* and <E5ETEs.
18
!. 'li( Next* follo"ed b# 3inish. The TableAdapter 'onfi&!ration WiHard "rites the
onfi&!ration options #o! seleted to 0#'o$is.xsd. 0#'o$is.xsd ontains an M05
she$a desribin& a data o$ponent. At r!n-ti$e* ASP.NET a!too$piles stron&l# t#ped
data o$ponents fro$ MS< files. .o! don+t see the o$ponents sine the#+re not part of
the pro4et per se* b!t #o! do see a dia&ra$ of "hat+s in the MS< file in the -is!al St!dio
desi&ner* as pit!red belo".
?. 'hoose 1Sa%e All2 fro$ -is!al St!dio+s 3ile $en! to sa%e han&es.
2. Add an
6b4et<ataSo!re
a. 8et!rn to <efa!lt.aspx in the desi&ner and dra& an 6b4et<ataSo!re ontrol onto the
pa&e.
$. 'li( 1'onfi&!re <ata So!re2 in the 16b4et<ataSo!re Tas(s2 $en!.
c. )n the 1'hoose #o!r b!siness ob4et2 list selet
0#'o$isTableAdapters.'o$isTableAdapter (the na$e of the data o$ponent that+s
a!too$piled fro$ the MS< file #o! &enerated in the pre%io!s exerise). Then li( Next.
d. 0a(e s!re =et'o$isB#Title is seleted in the 1'hoose a $ethod2 list* as sho"n
belo". 6ne b# one* li( the @P<ATE* )NSE8T* and <E5ETE tabs and selet 1None2
fro$ their 1'hoose a $ethod2 lists. This "ill pre%ent -is!al St!dio fro$ onfi&!rin& the
6b4et<ataSo!re to s!pport )NSE8Ts* @P<ATEs* and <E5ETEs. When #o!+re done*
li( Next.
1"
e. Next #o!+re as(ed to speif# a so!re for the =et'o$isB#Title $ethod+s Title
para$eter. Selet 'ontrol in the 1Para$eter so!re2 drop-do"n and <rop<o"n5ist1 in the
'ontrol)< drop-do"n* as sho"n belo". Then li( 3inish.
f. S"ith to So!re %ie" and exa$ine the Fasp/6b4et<ataSo!reE ele$ent. What do
#o! see there that reates a onnetion bet"een the 6b4et<ataSo!re and the
<rop<o"n5istG
4. Add a =rid-ie" a. S"ith ba( to <esi&n %ie" and dra& a =rid-ie" ontrol onto <efa!lt.aspx. )nsert a
o!ple of line brea(s to reate so$e spae bet"een the =rid-ie" and the <rop<o"n5ist.
$. 'li( the arro" in the !pper-ri&ht orner of the =rid-ie" to displa# the 1=rid-ie"
Tas(s2 $en! and selet 6b4et<ataSo!re1 as the =rid-ie"+s data so!re.
c. @se the 1A!to 3or$at2 o$$and in the 1'o$$on =rid-ie" Tas(s2 $en! to appl#
the 1Slate2 for$at.
2#
d. Selet the =rid-ie" ontrol in the desi&ner. Then &o to the Properties "indo" and
set the =rid-ie"+s Width propert# to 100N.
e. Press 'trlB3C to r!n <efa!lt.aspx. -erif# that the o!tp!t rese$bles that belo"* and
that seletin& a different title in the <rop<o"n5ist han&es the list of o$is in the
=rid-ie".
f. 'lose the bro"ser and ret!rn to -is!al St!dio.
@. Polish the
=rid-ie"+s appearane
a. 6pen <efa!lt.aspx in <esi&n %ie".
$. 'li( the arro" in the !pper-ri&ht orner of the =rid-ie" to displa# the 1=rid-ie"
Tas(s2 $en!* and li( 1Edit 'ol!$ns2 to displa# the 3ields dialo& pit!red belo".
c. Selet 1'o$i)<2 in the 1Seleted 3ields2 box. )n the propert# &rid on the ri&ht* set
'o$i)<+s >eaderText propert# to 1'o$i )<2 and its -isible propert# to false.
d. Selet the 1Title2 field. Set its SortExpression propert# to an e$pt# strin&.
e. Selet the 1N!$ber2 field. Set its )te$St#le->oriHontalAli&n propert# to 1'enter2.
f. Selet the 1.ear2 field. Set its )te$St#le->oriHontalAli&n propert# to 1'enter2 and
its SortExpression propert# to an e$pt# strin&.
g. Selet the 1=rade2 field. Set its )te$St#le->oriHontalAli&n propert# to 1'enter2.
h. Selet the 1'='2 field. Set its >eaderText propert# to 1'ertifiedG2* its 8ead6nl#
21
propert# to tr!e* its )te$St#le->oriHontalAli&n propert# to 1'enter2* and its
SortExpression propert# to an e$pt# strin&.
!. Selet the 1Boo(-al!e2 field. Set its >eaderText propert# to 1-al!e2* its
<ata3or$atStrin& propert# to 1O0/P2* its >t$lEnode propert# to 13alse2* and its
)te$St#le->oriHontalAli&n propert# to 8i&ht.
?. 'li( 67 to o$$it the han&es and dis$iss the 3ields dialo&.
k. )n the desi&ner* displa# the =rid-ie"+s 1=rid-ie" Tas(s2 $en! a&ain if it isn+t
alread# displa#ed. 'he( the $en!+s 1Enable Sortin&2 box.
l. Press 'trlB3C to 5a!nh <efa!lt.aspx in #o!r bro"ser. -erif# that the pa&e rese$bles
the one belo". Also %erif# that #o! an sort b# n!$ber* &rade* and %al!e* and that li(in&
the sa$e sortable ol!$n header se%eral ti$es in a ro" perfor$s alternatin& asendin& and
desendin& sorts.
m. 'lose the bro"ser and ret!rn to -is!al St!dio.
Exercise 10
reate a details page
)n this exerise* #o!+ll add a pa&e na$ed <etails.aspx to the Web site and e$bellish it "ith a <etails-ie"
ontrol. Then #o!+ll onnet the t"o pa&es so that li(in& an ite$ in <efa!lt.aspx displa#s details abo!t that
ite$ in <etails.aspx.G
Tasks eta!led Ste"s
#. Add another pa&e
to the Web site
a. 8i&ht-li( '/9..95ab2 in Sol!tion Explorer and selet 1Add Ne" )te$.2
$. Selet 1Web 3or$2 and na$e it <etails.aspx. Be s!re the 1Plae ode in separate
file2 box is he(ed and that 'D or -is!al Basi is seleted in the 5an&!a&e box before
li(in& the Add b!tton.
2. Add another data
o$ponent
a. <o!ble-li( 0#'o$is.xsd in the Sol!tion Explorer "indo" to open it for editin&.
$. 8i&ht-li( the desi&n s!rfae and selet 1Add-ETableAdapter2 to displa# the
TableAdapter 'onfi&!ration WiHard.
c. Selet 10#'o$is'onnetionStrin& (Web.onfi&)2 in the data onnetions list and
li( Next.
d. 6n the 1'hoose a 'o$$and T#pe2 pa&e* selet 1@se SJ5 state$ents.2 Then li(
Next.
e. 6n the 1=enerate the SJ5 state$ents2 pa&e* t#pe 1SE5E'T Q 3860 'o$is
W>E8E 'o$i)<KL'o$i)<2. Then li( the Ad%aned 6ptions b!tton and %erif# the
1@se opti$isti on!rren#2 and 18efresh the data table2 boxes are !nhe(ed. 'li(
67* follo"ed b# Next.
f. 3ill in the 1'hoose 0ethods to =enerate2 pa&e as sho"n belo". Note that the na$e
t#ped into the 10ethod Na$e2 box is =et'o$i<etails* not =et'o$isB#Title.
g. 'li( Next* follo"ed b# 3inish. 'onfir$ that the ne" data o$ponent loo(s li(e this/
23
h. 8i&ht-li( 1'o$is1TableAdapter2 and !se the 8ena$e o$$and to han&e the
na$e to 1<etailsTableAdapter2/
!. 'hoose 1Sa%e All2 fro$ -is!al St!dio+s 3ile $en! to sa%e han&es.
4. Add an
6b4et<ataSo!re
a. 8et!rn to the desi&ner and open <etails.aspx in <esi&n %ie".
$. <ra& an 6b4et<ataSo!re ontrol fro$ the Toolbox and drop it onto the pa&e.
c. 'li( 1'onfi&!re <ata So!re2 in the 16b4et<ataSo!re Tas(s2 $en!.
d. @nder 1Enter the na$e of #o!r b!siness ob4et*2 selet
0#'o$isTableAdapters.<etailsTableAdapter. Then li( Next.
e. 0a(e s!re =et'o$i<etails in seleted in the 1'hoose a $ethod2 list on the
SE5E'T pa&e. Selet 1None2 in the 1'hoose a 0ethod2 list on the @P<ATE* )NSE8T*
and <E5ETE pa&es. Then li( Next.
f. Next #o!+re as(ed to speif# a so!re for =et'o$i<etails+s 'o$i)< para$eter.
Selet J!er#Strin& in the 1Para$eter so!re2 drop-do"n* t#pe 1'o$i)<2 into the
J!er#Strin&3ield box* and t#pe 102 into the <efa!lt-al!e box as sho"n belo". Then li(
3inish.
24
g. S"ith to So!re %ie" and inspet the Fasp/6b4et<ataSo!reE ele$ent. What does
the FSeletPara$etersE ele$ent inside it doG
@. Add Selet
b!ttons to the =rid-ie"
a. 6pen <efa!lt.aspx in <esi&n %ie".
$. Selet the =rid-ie" ontrol and set its A!to=enerateSeletB!tton propert# to tr!e.
c. Press 'trlB3C to la!nh <efa!lt.aspx in #o!r bro"ser. What+s different abo!t the
=rid-ie"G
d. 'lose the bro"ser and ret!rn to -is!al St!dio.
e. Selet the =rid-ie" ontrol.
f. 'li( the li&htnin&-bolt ion in the Properties "indo" to displa# a list of =rid-ie"
e%ents.
25
g. <o!ble-li( 1Seleted)ndex'han&ed2 to add a Seleted)ndex'han&ed e%ent handler
to <efa!lt.aspx.s or <efa!lt.aspx.%b.
h. Add the follo"in& ode to the bod# of the handler/
'D
8espo!se.8e*ire&t ("Details.aspxH$o>i&#D=" E
/ri*Vie7,.-ele&te*Value(0
-B
8espo!se.8e*ire&t("Details.aspxH$o>i&#D=" " .
/ri*Vie7,.-ele&te*Value.To-tri!g(
!. 8et!rn to <efa!lt.aspx. )n the Properties "indo"* li( the b!tton to the left of the
li&htnin& bolt to displa# properties instead of e%ents.
?. Selet the =rid-ie" ontrol and %erif# its <ata7e#Na$es propert# is set to
1'o$i)<2 so =rid-ie"1.Seleted-al!e "ill ret!rn the %al!e of the 'o$i)< field in the
ro" that+s !rrentl# seleted.
k. Press 'trlB3C to la!nh <efa!lt.aspx in #o!r bro"ser.
l. 'li( one of the =rid-ie"+s Selet b!ttons. What happensG What do #o! see in the
bro"ser+s address barG
m. 'lose the bro"ser and ret!rn to -is!al St!dio.
;. Add a
<etails-ie" ontrol
a. 6pen <etails.aspx in <esi&n %ie".
$. <ra& a <etails-ie" ontrol fro$ the Toolbox and drop it onto the pa&e.
26
c. @se the 1<etails-ie" Tas(s2 $en! to selet 6b4et<ataSo!re1 as the <etails-ie"+s
data so!re.
d. @se the 1A!to 3or$at2 o$$and in the 1<etails-ie" Tas(s2 $en! to appl# the
for$at na$ed 1Slate.2
e. Selet the <etails-ie" ontrol in the desi&ner. Then &o to the Properties "indo" and
set the <etails-ie"+s Width propert# to 100N.
f. Selet <efa!lt.aspx in the Sol!tion Explorer "indo". Then press 'trlB3C to la!nh
it.
g. 'li( one of the =rid-ie"+s Selet b!ttons and %erif# that <etails.aspx appears
sho"in& details abo!t the seleted o$i* as pit!red belo".
h. 'lose the bro"ser and ret!rn to -is!al St!dio.
P. Polish the
<etails-ie"+s
appearane
a. 6pen <etails.aspx in <esi&n %ie".
$. 'li( the arro" in the !pper-ri&ht orner of the <etails-ie" to displa# the
1<etails-ie" Tas(s2 $en!* and li( 1Edit 3ields2 to displa# the 3ields dialo&.
c. Selet 1'o$i)<2 in the 1Seleted 3ields2 box. Set its >eaderText propert# to
1'o$i )<2.
d. Selet 1'='2 in the 1Seleted 3ields2 box. Sets its >eaderText propert# to
1'ertifiedG2 and its 8ead6nl# propert# to tr!e.
e. Selet 1Boo(-al!e2 in the 1Seleted 3ields2 box. Sets its >eaderText propert# to
1-al!e2* its <ata3or$atStrin& propert# to 1O0/P2* and its >t$lEnode propert# to
13alse2.
f. 'li( 67 to o$$it the han&es and dis$iss the 3ields dialo&.
g. Selet <efa!lt.aspx in the Sol!tion Explorer "indo". Then press 'trlB3C to la!nh
it.
h. 'li( one of the =rid-ie"+s Selet b!ttons and %erif# that the res!ltin& <etails-ie"
rese$bles the one belo".
27
!. 'lose the bro"ser and ret!rn to -is!al St!dio.
Exercise 11
reate an admin page
)n this exerise* #o!+ll add a pa&e na$ed Ad$in.aspx to the Web site and pop!late it "ith an editable $aster-
detail %ie" for bro"sin&* insertin&* !pdatin&* and deletin& reords. .o!+ll !se the data o$ponents #o! b!ilt in
pre%io!s exerises to interat "ith the database* and #o!+ll !se the editin& feat!res of the =rid-ie" and
<etails-ie" ontrols and the 2-"a# data-bindin& s!pport in 6b4et<ataSo!re to $a(e short "or( of !pdatin&
the database.
Tasks eta!led Ste"s
#. Add another pa&e
to the Web site
a. 8i&ht-li( '/9..95ab2 in Sol!tion Explorer and selet 1Add Ne" )te$.2
$. Selet 1Web 3or$2 and na$e it Ad$in.aspx. Be s!re the 1Plae ode in separate
file2 box is he(ed and that 'D or -is!al Basi is seleted in the 5an&!a&e box before
li(in& the Add b!tton.
2. 'op# ontrols to
the pa&e
a. 6pen <efa!lt.aspx in So!re %ie" and op# e%er#thin& bet"een the Ffor$
idKRfor$1R r!natKRser%erRE ta& and the FIfor$E ta& to the lipboard.
$. 6pen Ad$in.aspx in So!re %ie" and paste the ontents of the lipboard bet"een the
Ffor$ idKRfor$1R r!natKRser%erRE and FIfor$E ta&s.
c. )f #o! are !sin& 'D lear the
6nSeleted)ndex'han&edKR=rid-ie"1:Seleted)ndex'han&edR portion of the
Fasp/=rid-ie"E ta&.
d. 6pen <etails.aspx in So!re %ie" and op# e%er#thin& bet"een the Ffor$
idKRfor$1R r!natKRser%erRE and FIfor$E ta&s to the lipboard.
e. =o ba( to Ad$in.aspx in So!re %ie" and paste the ontents of the lipboard
i$$ediatel# belo" the ontent #o! pasted in step 2.
f. 'li( the <esi&n b!tton to sho" Ad$in.aspx in <esi&n %ie". )nsert a blan( line
bet"een the =rid-ie" and the <etails-ie" to reate so$e spae bet"een the$. >ere+s
"hat Ad$in.aspx sho!ld loo( li(e in the desi&ner/
g. @se the <etails-ie"+s 1<etails-ie" Tas(s2 $en! to set the <etails-ie"+s data
so!re to 6b4et<ataSo!re2. )f -is!al St!dio as(s if #o!+d li(e the <etails-ie"+s field
and (e#s refreshed* ans"er No.
h. Selet the =rid-ie" ontrol. Then &o to the properties "indo" and set the
=rid-ie"+s A!to=enerate<eleteB!tton propert# to tr!e.
!. Selet the <etails-ie" ontrol. =o to the properties "indo" and set the
<etails-ie"+s A!to=enerateEditB!tton and A!to=enerate)nsertB!tton properties to tr!e.
?. -erif# the <etails-ie"+s <ata7e#Na$es propert# is set to 1'o$i)<2.
k. <ispla# the <etails-ie"+s 1<etails-ie" Tas(s2 $en! and li( 1Edit 3ields.2 )n the
3ields dialo&* set the 1'o$i)<2 field+s -isible propert# to 3alse and the 1'ertifiedG2
field+s 8ead6nl# propert# to 3alse. Press 67.
l. Selet 6b4et<ataSo!re2 and displa# its 16b4et<ataSo!re Tas(s2 $en!. 'li(
1'onfi&!re <ata So!re2 and then li( Next !ntil #o! reah the 1<efine para$eters2
pa&e. 6b4et<ataSo!re2 is !rrentl# onfi&!red to a,!ire the 'o$i)< para$eter that it
2"
!ses in database ,!eries fro$ a ,!er# strin&. 3ill in the dialo& as sho"n belo" to
reonfi&!re 6b4et<ataSo!re2 to a,!ire the para$eter fro$ the =rid-ie". Then li(
the 3inish b!tton. )f -is!al St!dio offers to refresh the <etails-ie" ontrol* ans"er No.
m. Press 'trlB3C to la!nh Ad$in.aspx in #o!r bro"ser. 'onfir$ that li(in& one of
the =rid-ie"+s Selet b!ttons displa#s details abo!t the orrespondin& o$i in a
<etails-ie"* as sho"n belo".
n. 'lose #o!r bro"ser and ret!rn to -is!al St!dio.
4. 'onfi&!re the
6b4et<ataSo!re
ontrols to s!pport 2-
"a# data bindin&
a. 8et!rn to Ad$in.aspx in the desi&ner. Selet the 1'onfi&!re <ata So!re2 o$$and fro$
6b4et<ataSo!re1+s 16b4et<ataSo!re Tas(s2 $en!. 'li( Next !ntil #o! reah the 1<efine
data $ethods2 pa&e.
$. Set 6b4et<ataSo!re1+s SE5E'T and <E5ETE $ethods to =et'o$isB#Title and
<elete* respeti%el#. (The <E5ETE settin& is sho"n belo".) Set its @P<ATE and )NSE8T
3#
$ethods to 1None2 sine this 6b4et<ataSo!re "on+t be !sed to insert or !pdate reords. Then
li( Next* follo"ed b# 3inish. )f -is!al St!dio offers to refresh the =rid-ie"* ans"er No.
c. Selet the 1'onfi&!re <ata So!re2 o$$and fro$ 6b4et<ataSo!re2+s 1'o$$on
6b4et<ataSo!re Tas(s2 $en!. 'li( Next !ntil #o! reah the 1<efine data $ethods2 pa&e.
d. Set the 6b4et<ataSo!re2+s SE5E'T* @P<ATE* and )NSE8T $ethods to
=et'o$i<etails* @pdate* and )nsert* respeti%el#. Set its <E5ETE $ethod to 1None2 sine
this 6b4et<ataSo!re "on+t be !sed to delete reords. Then li( Next* follo"ed b# 3inish. )f
-is!al St!dio offers to refresh the <etails-ie"* ans"er No.
e. Selet 6b4et<ataSo!re1 in the desi&ner and li( the li&htnin&-bolt ion in the
Properties "indo" to displa# a list of 6b4et<ataSo!re e%ents.
f. <o!ble-li( 1<eleted2 in the Properties "indo" to add a handler for
6b4et<ataSo!re1.<eleted e%ents.
g. Add the follo"in& state$ent to the bod# of the handler to ens!re that the drop-do"n list
of titles is !pdated if the last title in a ate&or# is deleted/
C#
DropDo7!+ist,.Data%i!*((0
VB
DropDo7!+ist,.Data%i!*((
h. 8et!rn to Ad$in.aspx and selet 6b4et<ataSo!re2 in the desi&ner.
!. =o to the Properties "indo" ("hih !rrentl# lists 6b4et<ataSo!re e%ents) and do!ble-
li( 1)nserted2 to add a handler for 6b4et<ataSo!re2.)nserted e%ents.
?. Add the follo"in& state$ent to the bod# of the handler to ens!re that the =rid-ie" and
the drop-do"n list are !pdated "hen a o$i is added to the database/
C#
DropDo7!+ist,.Data%i!*((0
/ri*Vie7,.Data%i!*((0
VB
DropDo7!+ist,.Data%i!*((
/ri*Vie7,.Data%i!*((
k. 8et!rn to Ad$in.aspx and selet 6b4et<ataSo!re2 in the desi&ner.
l. =o to the Properties "indo" ("hih !rrentl# lists 6b4et<ataSo!re e%ents) and do!ble-
li( 1@pdated2 to add a handler for 6b4et<ataSo!re2.@pdated e%ents.
31
m. Add the follo"in& state$ent to the bod# of the handler to ens!re that the =rid-ie" is
!pdated "hen a reord is !pdated/
C#
/ri*Vie7,.Data%i!* ((0
VB
/ri*Vie7,.Data%i!*((
@. Test the ad$in
pa&e
a. Press 'trlB3C to la!nh Ad$in.aspx in #o!r bro"ser.
$. Test the pa&e+s reord insertion apabilities b# seletin& one of the 'aptain 'ode
o$is in the =rid-ie" and li(in& the Ne" b!tton in the <etails-ie". 3ill in the fields
as follo"s/
Name Value
Title Captain Code
Number 8
Publisher Microsoft
Year 2004
rade !"0
Certified# $nchec%ed
Value &0
Comment 'ntroducin( Codeirl and her
side%ic%) Code*id
c. 'li( 1)nsert2 at the botto$ of the <etails-ie" to insert the o$i into the database.
-erif# that 'aptain 'ode S no" appears in the =rid-ie".
d. Test the pa&e+s reord !pdatin& apabilities b# seletin& 'aptain 'ode S in the
=rid-ie" and li(in& 1Edit2 in the <etails-ie". 'han&e the &rade in the =rade field fro$
T.0 to U.0. Then li( 1@pdate.2 -erif# that the &rade han&es to U.0 in the =rid-ie".
e. Test the pa&e+s reord deletion apabilities b# li(in& the <elete b!tton next to
'aptain 'ode S in the =rid-ie". -erif# that the reord disappears fro$ %ie".
f. 'lose #o!r bro"ser and ret!rn to -is!al St!dio.
32
Exercise 12
Add cac)ing and cac)e dependencies
<atabase ,!eries are expensi%eAespeiall# if the# ret!rn i$a&es or other lar&e ob4ets. Perfor$ane proble$s
are o$po!nded if ,!eries tar&et re$ote database ser%ers. The sol!tion to the proble$ of perfor$ane-
inhibitin& database ,!eries is ahin&* "hih ASP.NET 2.0 pro%ides rob!st s!pport for. )n this exerise* #o!+ll
enable ahin& in <efa!lt.aspx and <etails.aspx+s data so!re ontrols to $ini$iHe red!ndant database
aesses. Then #o!+ll !se SJ5 ahe dependenies to pre%ent ahin& fro$ a!sin& !sers to see o!tdated data.
Tasks eta!led Ste"s
#. Enable ahin& in
the data so!res
a. 6pen <efa!lt.aspx in <esi&n %ie". Selet S,l<ataSo!re1 and !se the Properties
"indo" to set its Enable'ahin& propert# to Tr!e and its 'ahe<!ration propert# to V00
(that+s V00 seonds* or C $in!tes).
$. Set 6b4et<ataSo!re1+s Enable'ahin& propert# to Tr!e and its 'ahe<!ration
propert# to V00.
c. 6pen <etails.aspx in <esi&n %ie". Set 6b4et<ataSo!re1+s Enable'ahin& propert#
to Tr!e and its 'ahe<!ration propert# to V00.
d. 8!n <efa!lt.aspx and $a(e s!re it "or(s as before. 5ea%e <efa!lt.aspx r!nnin& in
the bro"ser "ith .NET 0an seleted in the <rop<o"n5ist.
e. @se Ser%er Explorer to han&e the &rade assi&ned to .NET 0an 1 fro$ T.0 to 2.0.
(.o! an open a table for editin& in Ser%er Explorer b# drillin& do"n into the 0#'o$is
onnetion to the 'o$is Table* ri&ht li( and selet 1Sho" Table <ata.2)
f. 8efresh <efa!lt.aspx in the bro"ser. What &rade is sho"n for .NET 0an 1G )s it 2.0
or T.0G Wh#G
g. 'lose the bro"ser and ret!rn to -is!al St!dio.
2. 'onfi&!re the
database for SJ5 ahe
dependenies
a. 6pen a -is!al St!dio o$$and pro$pt "indo". .o!+ll find it !nder 1All Pro&ra$s-
E0irosoft -is!al St!dio 200C -E-is!al St!dio Tools-E-is!al St!dio 'o$$and Pro$pt.2
$. T#pe aspnet:re&s,l -S loalhost -E -d 0#'o$is Wed to onfi&!re the 0#'o$is
database to s!pport SJ5 ahe dependenies.
c. T#pe aspnet:re&s,l -S loalhost -E -d 0#'o$is -t 'o$is Wet to onfi&!re the
'o$is table to s!pport SJ5 ahe dependenies.
d. =o to Ser%er Explorer and refresh the list of tables in the 0#'o$is database. A ne"
table has appeared. What is its na$eG
e. @se Ser%er Explorer to %ie" the tri&&ers attahed to the 'o$is table. (.o! an %ie"
a table+s tri&&ers b# drillin& into the table and %ie"in& the ob4ets "ith a li&htnin& bolt
next to the$) There sho!ld be a tri&&er na$ed
'o$is:AspNet:S,l'aheNotifiation:Tri&&er. What does the tri&&er doG
f. 8et!rn to Sol!tion Explorer and open Web.onfi&. Add the follo"in& state$ents to
the Fs#ste$."ebE setion/
<&a&hi!g>
<sIl$a&heDepe!*e!&y e!a6le*="true" pollTi>e="J<<<">
<*ata6ases>
<a** !a>e="@y$o>i&s"
&o!!e&tio!-tri!g2a>e="@y$o>i&s$o!!e&tio!-tri!g" />
</*ata6ases>
</sIl$a&heDepe!*e!&y>
</&a&hi!g>
g. 'lose Web.onfi&* sa%in& #o!r han&es* and ret!rn to the desi&ner.
4. Add SJ5 ahe
dependenies to the
data so!res
a. )n <efa!lt.aspx* set S,l<ataSo!re1Xs S,l'ahe<ependen# propert# to
R0#'o$is/'o$is2.
$. )n <efa!lt.aspx* set 6b4et<ataSo!re1Xs S,l'ahe<ependen# propert# to
R0#'o$is/'o$is2.
33
c. )n <etails.aspx* set 6b4et<ataSo!re1Xs S,l'ahe<ependen# propert# to
R0#'o$is/'o$is2.
d. 8!n the appliation and $a(e s!re <efa!lt.aspx and <etails.aspx "or( as the# did
before. 5ea%e <efa!lt.aspx r!nnin& "ith .NET 0an seleted in the <rop<o"n5ist.
e. @se Ser%er Explorer to han&e .NET 0an 1+s &rade fro$ 2.0 to ;.0.
f. Wait a fe" seonds* and then refresh <efa!lt.aspx in the bro"ser. What &rade is
sho"n for .NET 0an 1G Wh#G
@. 0onitor database
ati%it# on the ba( end
(optional)
a. Start the SJ5 Ser%er Profiler (All Pro&ra$s-E0irosoft SJ5 Ser%er 200C-
EPerfor$ane Tools-E SJ5 Ser%er Profiler).
$. @se Profiler+s 3ile-ENe" Trae o$$and to start a ne" trae. ('li( 'onnet in the
first dialo& and 8!n in the seond one to start the trae r!nnin&.)
c. 5a!nh <efa!lt.aspx in #o!r bro"ser and refresh the pa&e se%eral ti$es* "athin&
the trae "indo" in Profiler as #o! do. )s the database ,!eried ane" eah ti$e the pa&e
refreshesG
An in-depth exploration of ASP.NET 2.0 (Part 1)
B"t!onal /A,
ASP.NET 2.0 @ser )nterfae Enhane$ents/
0aster Pa&es* The$es* and 'ontrols
ASP.NET 2.0 pro%ides a "ide ran&e of ne" feat!res to si$plif# the de%elop$ent of
!ser interfaes* fro$ $aster pa&es* the$es* and s(ins to $ore than C0 ne" ontrols
desi&ned to $a(e short "or( of i$ple$entin& o$$on !ser interfae ele$ents.
)n this lab* #o!+ll &et first-hand experiene !sin& these ne" feat!res b# &i%in& the
0#'o$is appliation a fae-lift. 3irst* #o!+ll add a $aster pa&e to the site. Next*
#o!+ll the$e the site !sin& a !sto$ the$e. 3inall#* #o!+ll !se a 0!lti-ie" ontrol
to offers !sers a hoie of "a#s to %ie" o$i boo( data* and #o!+ll o$bine
<ata5ist ontrols and !sto$ >TTP handlers to i$ple$ent a ne" %ie" of the
o$i database.
35
Exercise 13
Create a master page
)n this exerise* #o!+ll reate a $aster pa&e to ser%e <efa!lt.aspx* <etails.aspx* Ad$in.aspx* and other pa&es
that "ill be added later. Then #o!+ll $odif# the existin& pa&es b# t!rnin& the$ into ontent pa&es..
Tasks eta!led Ste"s
#. 6pen the Web
site
a. Start 0irosoft -is!al St!dio 200C and !se the 13!le51B"en &e$ S!te2 o$$and to open
the '/90S5abs9ASP.NET9Starter9F5an&!a&eE95abV site.
$. 8i&ht-li( '/9..95abV in the Sol)t!on E2"lorer "indo" and selet 'Ne% 3older.+ Na$e the
folder Images.
c. 8i&ht-li( the )$a&es folder in Sol!tion Explorer and !se the 1Add Existin& )te$2
o$$and to add 0#'o$is.&if to the )$a&es folder. .o!+ll find 0#'o$is.&if in
C8@=S"abs@!S(#%E)@"ab-iles@Ima'es.
2. Add a $aster
pa&e to the site
a. 8i&ht-li( '/9..95abV in Sol!tion Explorer and selet 1Add Ne" )te$.2
$. 'hoose 10aster Pa&e2 as the te$plate t#pe and na$e the $aster pa&e Site.$aster. Be
s!re 'D or -is!al Basi is seleted in the 5an&!a&e box and that 1Plae ode in separate file2
is he(ed before li(in& Add.
c. 0a(e s!re )nternet Explorer ;.0 is seleted in the Tar&et She$a for -alidation drop-
do"n list in the toolbar.
d. 'li( the <esi&n b!tton to s"ith to <esi&n %ie".
4. <efine the
la#o!t of the $aster
pa&e
a. Selet 1)nsert Table2 fro$ -is!al St!dio+s 5a#o!t $en!.
$. )n the )nsert Table dialo& li( the Te$plate b!tton and selet 1>eader* footer* and side2
fro$ the drop-do"n list as sho"n belo". Then li( 67 to add a table to the $aster pa&e.
c. =rab the 'ontentPlae>older ontrol b# the title bar and $o%e it into the ri&ht-hand ell
of the table+s seond ro".
d. Plae the !rsor in that ell (not in the 'ontentPlae>older). Then &o to the Properties
"indo" and set the ell+s -Ali&n propert# to 1top2. The 'ontentPlae>older ontrol sho!ld
snap to the top of the ell
e. 8i&ht-li( the table+s top ro" and selet 1)nsert-E8o" Belo"2 fro$ the ontext $en!.
36
f. Selet the ne" ro". Then set its >ei&ht to 1 and B&'olor to =ra#.
g. 8i&ht-li( the table+s botto$ ro" and selet 1)nsert-E8o" Abo%e2 fro$ the ontext
$en!.
h. Selet the ne" ro". Then set its >ei&ht to 1 and B&'olor to =ra#.
!. 8i&ht-li( the ell to the left of the one that ontains the 'ontentPlae>older ontrol
and selet 1)nsert-E'ol!$n to the 8i&ht.2
?. P!t the !rsor in the ne" ell. Then set the ell+s Width to 1 and B&'olor to =ra#.
k. Selet the table+s top ro". Set B&'olor to 1D10C0U02.
l. P!t the !rsor in the left$ost ell in the table+s $iddle ro". Set B&'olor to 1Deee.2
m. Selet the table+s botto$ ro". Set B&'olor to 1Deee2.
n. S"ith to So!re %ie" and $an!all# $odif# the Fbod#E ta& to loo( li(e this/
Fbod# top$ar&inKR0R botto$$ar&inKR0R left$ar&inKR0R ri&ht$ar&inKR0RE
o. 'li( the <esi&n b!tton to %ie" the $aster pa&e in <esi&n %ie". )t
sho!ld loo( so$ethin& li(e this/
@. Add ontent to
the $aster pa&e
a. <ra& a >#per5in( ontrol fro$ the Toolbox and drop it into the top ro" of the table.
$. Set the >#per5in(+s )$a&e@rl propert# to 1YI)$a&esI0#'o$is.&if2 and its
Na%i&ate@rl propert# to 1YI<efa!lt.aspx2.
c. Selet the table+s top ro". Set its >ei&ht propert# to 1 so the hei&ht "ill ad4!st to fit the
i$a&e.
d. P!t the !rsor in the left$ost ell in the table+s $iddle ro". Set the ell+s Width propert#
to 12S.
37
e. Selet the table+s botto$ ro". Set its >ei&ht propert# to 1;.
f. With the !rsor still in the botto$ ro"* set the font to S-point -erdana and t#pe 1)f this
pa&e "or(s* ) b!ilt it. )f it doesn+t "or(* ) don+t (no" "ho b!ilt it.2 The $aster pa&e sho!ld
no" loo( li(e this in the desi&ner/
;. 'on%ert
existin& pa&es into
ontent pa&es
a. <o!ble-li( <efa!lt.aspx in Sol!tion Explorer to open it in the desi&ner.
$. S"ith to So!re %ie" and add a 0asterPa&e3ileKRYISite.$asterR attrib!te to the L
Pa&e direti%e at the top of the pa&e.
c. Also in So!re %ie"* re$o%e the F?<6'T.PEE* Fht$lE* FheadE* Fbod#E* Ffor$E* and
Fdi%E ele$ents fro$ the pa&e. Then add an Fasp/'ontentE ele$ent that enaps!lates all of the
pa&e+s re$ainin& ontent/
Fasp/'ontent )<KR'ontent1R 'ontentPlae>older)<KR'ontentPlae>older1R 8!natKRser%erRE



FIasp/'ontentE
d. Add a TitleK10#'o$is2 attrib!te to <efa!lt.aspx+s L Pa&e direti%e.
e. 8epeat steps a thro!&h d for <etails.aspx so that it* too* beo$es a ontent pa&e.
f. 8epeat steps a thro!&h d for Ad$in.aspx so that it* too* beo$es a ontent pa&e.
g. Selet <efa!lt.aspx in the Sol!tion Explorer "indo". Then press 'trlB3C to la!nh it.
h. -erif# that <efa!lt.aspx "as s!essf!ll# on%erted into a ontent pa&e/
38
!. 'li( one of the =rid-ie"+s Selet b!ttons to displa# <etails.aspx. -erif# that it* too*
"as s!essf!ll# on%erted into a ontent pa&e.
?. 'han&e the @85 in bro"ser+s address bar to point to Ad$in.aspx and %erif# that it* too*
is no" a ontent pa&e.
k. 'lose the bro"ser and ret!rn to -is!al St!dio.
P. 8efine
<efa!lt.aspx
a. 6pen <efa!lt.aspx in the desi&ner and s"ith to <esi&n %ie".
$. Position the !rsor !nderneath the =rid-ie" ontrol and !se the 15a#o!t-E)nsert Table2
o$$and to insert a table. )n the )nsert Table dialo&* selet the >eader te$plate sho"n belo".
'li( BC.
c. <ra& the existin& S,l<ataSo!re and <rop<o"n5ist ontrols into the table+s top ro".
d. <ra& the existin& 6b4et<ataSo!re and =rid-ie" ontrols into the table+s botto$ ro".
e. <elete an# "hitespae bet"een the table+s top ro" and the top of the pa&e so the top of
the table lines !p "ith the top of the pa&e.
f. 8i&ht-li( the top ro" of the table and selet 1)nsert-E8o" Belo".2
3"
g. Set the ne" ro"+s hei&ht to 1 and ba(&ro!nd olor (B&'olor) to =ra#.
h. Set the top ro"+s hei&ht to V2 and ba(&ro!nd olor to 1Deee2.
!. )nsert a spae or t"o to the left of the <rop<o"n5ist to $o%e it a"a# fro$ the left
border of the table ell.
?. Selet the <rop<o"n5ist. Then &o to the Properties "indo" and set the font to 10-point
-erdana.
k. Set the =rid-ie" ontrol+s font to 10-point -erdana also.
l. Press 'trlB3C to la!nh <efa!lt.aspx in #o!r bro"ser and %erif# that it rese$bles the
pa&e pit!red belo"/
m. 'lose the bro"ser and ret!rn to -is!al St!dio.
<. 8efine
<etails.aspx
a. 6pen <etails.aspx in <esi&n %ie".
$. Set the <etails-ie" ontrol+s font to 10-point -erdana.
A. 8efine
Ad$in.aspx
a. 6pen Ad$in.aspx in <esi&n %ie".
$. 8epeat the steps #o! perfor$ed on <efa!lt.aspx in Tas( ; for Ad$in.aspx. As an
alternati%e* #o! an !t-and-paste the >T05 added to <efa!lt.aspx in Tas( ; into
Ad$in.aspx.
c. Set the <etails-ie" ontrol+s font to 10-point -erdana.
4#
Exercise 14
(heme the Web site)s pages
The$in& is an eas#-to-!se $ehanis$ for appl#in& %is!al attrib!tes en $asse to ontrols.
.o! an appl# the$es to indi%id!al pa&es or to an entire site. )n this exerise* #o!+ll appl# a
s!pplied the$e to see the effet it has on the site+s pa&es. Then #o!+ll !sto$iHe the the$e
and !se it to standardiHe 0#'o$is+ loo( and feel.
'as5s 1etailed Steps
S. 8e$o%e
for$attin& fro$ the
=rid-ie".
a. 6pen <efa!lt.aspx in <esi&n %ie". Selet the =rid-ie" ontrol and li( the s$all arro" in
its !pper ri&ht orner to displa# the 1=rid-ie" Tas(s2 $en!.
$. 'li( 1A!to 3or$at2 and !se the 18e$o%e 3or$attin&2 option to re$o%e the for$attin& #o!
applied in 5ab 2.
c. 8!n <efa!lt.aspx in #o!r bro"ser. What does the =rid-ie" loo( li(e no"G
d. 'lose the bro"ser and ret!rn to -is!al St!dio.
#0. The$e the pa&e
1BasiBl!e2
a. Add a folder na$ed 1App:The$es2 to the Web site b# ri&ht-li(in& '/9..95abV in Sol!tion
Explorer and seletin& 'Add ASP.NET 3older 51Theme.
$. Na$e the folder that is a!to$atiall# reated to 1BasiBl!e2.
c. 8i&ht-li( the App:The$es9BasiBl!e folder in Sol!tion Explorer and selet 1Add Existin&
)te$.2
d. Selet '/90S5abs9ASP.NET95ab3iles9The$es9BasiBl!e9BasiBl!e.s(in to reate a loal
op# of that file in #o!r site+s App:The$es9BasiBl!e folder.
e. Add a folder na$ed 1)$a&es2 to the App:The$es 9BasiBl!e folder.
f. 8i&ht-li( the App:The$es9BasiBl!e9)$a&es folder in Sol!tion Explorer and selet 1Add
Existin& )te$.2
g. Selet all the files in '/90S5abs9ASP.NET95ab3iles9The$es9BasiBl!e9)$a&es folder to
reate loal opies of those files in #o!r site+s App:The$es 9BasiBl!e9)$a&es folder
h. 6pen <efa!lt.aspx in So!re %ie" and add a The$eK2BasiBl!e2 attrib!te to the L Pa&e
direti%e.
!. 8!n <efa!lt.aspx in #o!r bro"ser. The pa&e sho!ld loo( li(e this* "ith alternatin& ro"s in the
&rid a different olor/
?. 'lose the bro"ser and ret!rn to -is!al St!dio.
##. <e%elop a
the$e of #o!r o"n
a. 8i&ht-li( the App:The$es folder and selet Add ASP.NET 3older 51Theme. Name the
folder 0#'o$is.
$. 8i&ht-li( the App:The$es90#'o$is folder in Sol!tion Explorer and selet 1Add Existin&
)te$.2
c. Selet BasiBl!e.s(in fro$ #o!r site+s o"n The$es9BasiBl!e folder to reate a loal op# of
41
that file in The$es90#'o$is.
d. 8ena$e the file 10#'o$is.s(in2.
e. <o!ble-li( 0#'o$is.s(in in the Sol!tion Explorer "indo".
f. @se -is!al St!dio+s 1Edit-E3ind and 8eplae-EJ!i( 8eplae2 o$$and to replae all
o!rrenes of 1D0000;;2 "ith 1D10C0U02.
g. No" replae all o!rrenes of 1Deeeeee2 "ith 1li&ht#ello"2.
h. 'lose the J!i( 8eplae "indo" and sa%e the $odified file .
!. Add a folder na$ed 1)$a&es2 to the The$es90#'o$is folder.
?. 8i&ht-li( the The$es90#'o$is9)$a&es folder in Sol!tion Explorer and selet 1Add
Existin& )te$.2
k. Selet all the files in #o!r o"n site+s The$es9BasiBl!e9)$a&es folder to reate loal opies
of those files in The$es90#'o$is9)$a&es.
l. 'han&e the The$e attrib!te in <efa!lt.aspx+s L Pa&e direti%e to The$eK10#'o$is.2
m. 5a!nh <efa!lt.aspx in #o!r bro"ser and note the han&es in the ontrols.
n. 'lose the bro"ser and ret!rn to -is!al St!dio.
#2. The$e all the
site+s pa&es
a. 6pen <efa!lt.aspx in So!re %ie" and re$o%e the The$e attrib!te fro$ the L Pa&e
direti%e.
$. 6pen <etails.aspx in <esi&n %ie".
c. Selet the <etails-ie" ontrol and !se the 1A!to 3or$at2 o$$and in the 1<etails-ie"
Tas(s2 $en! to re$o%e for$attin& fro$ the <etails-ie".
d. 6pen Ad$in.aspx in <esi&n %ie".
e. 8e$o%e for$attin& fro$ Ad$in.aspx+s =rid-ie" and <etails-ie" ontrols.
f. <o!ble-li( Web.onfi& in Sol!tion Explorer to open it for editin&.
g. Add the follo"in& state$ent to the Fs#ste$."ebE setion of Web.onfi&/
<pages the>e="@y$o>i&s" />
h. 'lose "eb.onfi& and sa%e #o!r han&es.
!. 5a!nh <efa!lt.aspx in #o!r bro"ser and %erif# that it+s still the$ed 10#'o$is.2
?. 'li( one of the Selet b!ttons to displa# <etails.aspx. -erif# that <etails.aspx is the$ed to
$ath <efa!lt.aspx.
k. 'han&e the @85 in bro"ser+s address bar to point to Ad$in.aspx and %erif# that Ad$in.aspx
is the$ed as "ell.
l. 'lose the bro"ser and ret!rn to -is!al St!dio.
42
Exercise 15
'dd multiple *ie+s
)n this exerise* #o!+ll add a 0!lti-ie" ontrol to <efa!lt.aspx and pop!late the 0!lti-ie" "ith t"o %ie"s/
one that presents pa&e ontent the "a# it+s presented no"* and another that !ses <ata5ist ontrols to present
pa&e ontent in a o$pletel# different "a#. The <ata5ist "ill !se a !sto$ >TTP handler na$ed
)$a&e=rabber.ashx to retrie%e o%er i$a&es fro$ the database and render the$ to the pa&e. .o!+ll also add
b!ttons for s"ithin& bet"een the %ie"s..
Tasks eta!led Ste"s
#. Add a !sto$
>TTP handler
a. 8i&ht-li( the /9..95abV folder in Sol!tion Explorer and !se the 1Add Existin& )te$2
o$$and to $a(e a loal op# of the file
'/90S5abs9ASP.NET95ab3iles9'o$ponents9)$a&e=rabber.ashx.
$. 6pen )$a&e=rabber.ashx and inspet the ode ontained therein. )t ontains a
d#na$iall# o$piled >TTP handler that reads a o$i boo( )< fro$ a ,!er# strin& and !ses
it to ,!er# the 0#'o$is database for a o$i boo( o%er i$a&e. To i$pro%e perfor$ane* it
ahes o%er i$a&es in the ASP.NET appliation ahe* and it !ses S,l'ahe<ependen#
ob4ets to refresh ahed o%er i$a&es if the i$a&es in the database han&e. )n a $o$ent*
#o!+ll !se )$a&e=rabber.ashx as the tar&et of ASP.NET )$a&e ontrols to retrie%e o$i boo(
o%er i$a&es fro$ the database and displa# the$.
2. Add a
0!lti-ie" ontrol
to <efa!lt.aspx.
a. 6pen <efa!lt.aspx in <esi&n %ie".
$. =rab a 0!lti-ie" ontrol fro$ the Toolbox and drop it onto the pa&e i$$ediatel# belo"
the =rid-ie"1.
c. <ra& a -ie" ontrol fro$ the Toolbox and drop it into the 0!lti-ie". That %ie"
beo$es -ie"1.
d. <ra& the =rid-ie"1 ontrol on the pa&e into -ie"1.
! 9o not dra' a new AridView onto the pa'e# Bou are *ust movin' the AridView to
View2#
e. <ra& another -ie" ontrol fro$ the Toolbox and drop it into the 0!lti-ie". That %ie"
beo$es -ie"2.
f. Set the 0!lti-ie"+s Ati%e-ie")ndex propert# to 0.
43
Continued
Tasks eta!led Ste"s
4. Add a <ata5ist
ontrol to the
0!lti-ie"
a. <ra& a <ata5ist ontrol fro$ the Toolbox and drop it into -ie"2.
$. @se the 1<ata5ist Tas(s2 $en! to assi&n 6b4et<ataSo!re1 as the <ata5ists+s data
so!re. @pon o$pletion* the pa&e appears this "a# in the desi&ner/
c. S"ith to So!re %ie" and add the follo"in& F)te$Te$plateE to the <ata5ist. Note the
!se of )$a&e ontrols "hose )$a&e@rl attrib!tes point to )$a&e=rabber.ashx to render i$a&es
fro$ the database* and the si$plified data-bindin& expressions that $a(e >T05 te$plates
$ore readable/
'D
<#te>Te>plate>
<ta6le &ellpa**i!g="K">
<tr>
<t* 7i*th=",<<">
<aspL#>age #D="$over#>age"
#>ageMrl=F<%N "~/#>age/ra66er.ashxH$o>i&#D=" E 5val
("$o>i&#D"( %>F
8u!at="server" />
</t*>
<t* valig!="top" style="fo!tOfa>ilyL Ver*a!a0 fo!tOsiPeL
,<pt">
<aspL+a6el #D="$o>i&#D" Text=F<%N 5val ("$o>i&#D"( %>F
Visi6le="false" 8u!at="server" />
<aspL+i!'%utto! Text=F<%N 5val ("Title"( E ""!6sp0"
E 5val ("2u>6er"( %>F 8u!at="server" /><6r />
<%N (6ool( 5val ("$/$"( H "$/$ " L "" %>
<%N 5val ("/ra*e"4 ")<Lf,1"( %>
</t*>
</tr>
</ta6le>
44
</#te>Te>plate>
-is!al Basi
<#te>Te>plate>
<ta6le &ellpa**i!g="K">
<tr>
<t* 7i*th=",<<">
<aspL#>age #D="$over#>age"
#>ageMrl=F<%N "~/#>age/ra66er.ashxH$o>i&#D=" "
5val("$o>i&#D"( %>F
8u!at="server" />
</t*>
<t* valig!="top" style="fo!tOfa>ilyL Ver*a!a0 fo!tOsiPeL
,<pt">
<aspL+a6el #D="$o>i&#D" Text=F<%N 5val("$o>i&#D"( %>F
Visi6le="false" 8u!at="server" />
<aspL+i!'%utto! Text=F<%N 5val("Title"( " ""!6sp0" "
5val("2u>6er"( %>F
8u!at="server" /><6r />
<%N##f(5val("$/$"(4 "$/$ "4 ""(%>
<%N5val("/ra*e"4 ")<Lf,1"( %>
</t*>
</tr>
</ta6le>
</#te>Te>plate>
d. S"ith ba( to <esi&n %ie" and set the <ata5ist+s 8epeat'ol!$ns propert# to V to
di%ide the o!tp!t into V ol!$ns.
e. Set the <ata5ist+s 8epeat<iretion propert# to 1>oriHontal2 to or&aniHe ite$s in ro"-
first (rather than ol!$n-first) order.
f. Set the <ata5ist+s 'ellPaddin& propert# to S.
g. Set the <ata5ist+s EnableThe$in& propert# to 3alse.
h. With the <ata5ist seleted in <esi&n %ie"* li( the li&htnin& bolt ion in the Properties
"indo" to displa# a list a <ata5ist e%ents. <o!ble-li( 1)te$'o$$and2 to add an
)te$'o$$and e%ent handler to <efa!lt.aspx.s or <efa!lt.aspx.%b.
!. Add the follo"in& state$ents to the bod# of the handler/
'D
+a6el la6el = (+a6el( e.#te>.=i!*$o!trol ("$o>i&#D"(0
8espo!se.8e*ire&t ("Details.aspxH$o>i&#D=" E la6el.Text(0
-is!al Basi
Di> l6l 3s +a6el = .
$Type(e.#te>.=i!*$o!trol("$o>i&#D"(4 +a6el(
8espo!se.8e*ire&t("Details.aspxH$o>i&#D=" " l6l.Text(
?. Press 'trlB3C to la!nh <efa!lt.aspx. The pa&e loo(s the sa$e as it did before. )n other
"ords* the =rid-ie" is displa#ed* not the <ata5ist. Wh#G
k. 'lose the bro"ser and ret!rn to -is!al St!dio. 'han&e the 0!lti-ie" ontrol+s
Ati%e-ie")ndex propert# to 1.
l. Press 'trlB3C a&ain. -erif# that the res!ltin& pa&e loo(s li(e this/
45
m. 'li( one of the o$i boo( titles and %erif# that <etails.aspx appears sho"in& details
for that o$i.
n. 'lose the bro"ser and ret!rn to -is!al St!dio.
@. Add b!ttons
for s"ithin& %ie"s
a. The next tas( is to add a pair of b!ttons for s"ithin& %ie"s interati%el#. Be&in b#
settin& the 0!lti-ie"+s Ati%e-ie")ndex propert# ba( to 0.
$. Add a B!tton ontrol to <efa!lt.aspx* positionin& it 4!st ri&ht of the <rop<o"n5ist. Add
a fe" spaes to separate the <rop<o"n5ist and the B!tton. Then assi&n the B!tton ontrol the
follo"in& propert# %al!es/
Text = "/ri*Vie7"
5!a6leThe>i!g = false
Qi*th = ,<<
c. Add another B!tton ontrol to the pa&e* positionin& it 4!st ri&ht of the b!tton added in
the pre%io!s step. )nsert a fe" spaes bet"een b!ttons to separate the$. Then assi&n the ne"
B!tton ontrol the follo"in& propert# %al!es/
Text = "Data+ist"
5!a6leThe>i!g = =alse
Qi*th = ,<<
d. <o!ble-li( the 1=rid-ie"2 b!tton to add a li( handler. Add the follo"in& state$ent
to the bod# of the handler/
'D
@ultiVie7,.3&tiveVie7#!*ex = <0
-is!al Basi
@ultiVie7,.3&tiveVie7#!*ex = <
e. =o ba( to <efa!lt.aspx in <esi&n %ie" and do!ble-li( the 1<ata5ist2 b!tton to add a
li( handler. Add the follo"in& state$ent to the bod# of the handler/
'D
@ultiVie7,.3&tiveVie7#!*ex = ,0
-is!al Basi
@ultiVie7,.3&tiveVie7#!*ex = ,
If the buttons were defined inside the =ultiView, you could implement view switchin'
46
declaratively by settin' the buttons Command%ame properties to SwitchView4yIndex
or SwitchView4yI9 and settin' each buttons Command!r'ument property to the
correspondin' view I9 or view index# <owever, since the layout of this pa'e calls for the
buttons to be defined outside the =ultiView, you have to write two lines of codeCone per
buttonCto perform view switchin'.
f. 8!n <efa!lt.aspx in #o!r bro"ser and %erif# that #o! an s"ith %ie"s b# li(in&
b!ttons. >ere+s "hat the pa&e loo(s li(e "hen 1<ata5ist2 %ie" is seleted/
Bou mi'ht have to select a title from the drop/down list after clic1in' the 9ata"ist
button for the first time to 'et the comics to appear# !lso, you may find that the title
selected in the drop/down list 'ets out of sync with the titles shown on the pa'e as you
switch bac1 and forth between views#