Displaying Data with the DataList and

Repeater Controls (VB)

By Scott Mitchell|September 13, 2006
Print
Download Sample App or Download PDF
n the precedin! t"torial# we ha$e "#ed the %rid&iew control to di#play data' Startin!
with thi# t"torial, we loo( at b"ildin! common reportin! pattern# with the Data)i#t and
*epeater control#, #tartin! with the ba#ic# o+ di#playin! data with the#e control#'
Introduction
n all o+ the e,ample# thro"!ho"t the pa#t 2- t"torial#, i+ we needed to di#play m"ltiple
record# +rom a data #o"rce we t"rned to the %rid&iew control' .he %rid&iew render# a
row +or each record in the data #o"rce, di#playin! the record # data +ield# in col"mn#'
/hile the %rid&iew ma(e# it a #nap to di#play, pa!e thro"!h, #ort, edit, and delete data,
it# appearance i# a bit bo,y' Moreo$er, the mar("p re#pon#ible +or the %rid&iew #
#tr"ct"re i# +i,ed it incl"de# an 0.M) <table> with a table row 1<tr>2 +or each record
and a table cell 1<td>2 +or each +ield'
.o pro$ide a !reater de!ree o+ c"#tomi3ation in the appearance and rendered mar("p
when di#playin! m"ltiple record#, ASP'45. 2'0 o++er# the Data)i#t and *epeater
control# 1both o+ which were al#o a$ailable in ASP'45. $er#ion 1',2' .he Data)i#t and
*epeater control# render their content "#in! template# rather than Bo"ndField#,
6hec(Bo,Field#, B"ttonField#, and #o on' )i(e the %rid&iew, the Data)i#t render# a# an
0.M) <table>, b"t allow# +or m"ltiple data #o"rce record# to be di#played per table
row' .he *epeater, on the other hand, render# no additional mar("p than what yo"
e,plicitly #peci+y, and i# an ideal candidate when yo" need preci#e control o$er the
mar("p emitted'
7$er the ne,t do3en or #o t"torial#, we ll loo( at b"ildin! common reportin! pattern# with
the Data)i#t and *epeater control#, #tartin! with the ba#ic# o+ di#playin! data with the#e
control# template#' /e ll #ee how to +ormat the#e control#, how to alter the layo"t o+ data
#o"rce record# in the Data)i#t, common ma#ter8detail# #cenario#, way# to edit and delete
data, how to pa!e thro"!h record#, and #o on'
Step 1: Adding the DataList and Repeater utorial !e"
#ages
Be+ore we #tart thi# t"torial, let # +ir#t ta(e a moment to add the ASP'45. pa!e# we ll
need +or thi# t"torial and the ne,t +ew t"torial# dealin! with di#playin! data "#in! the
Data)i#t and *epeater' Start by creatin! a new +older in the pro9ect named
DataListRepeaterBasics' 4e,t, add the +ollowin! +i$e ASP'45. pa!e# to thi# +older,
ha$in! all o+ them con+i!"red to "#e the ma#ter pa!e Site.master:
Default.aspx
Basics.aspx
Formatting.aspx
RepeatColumnAndDirection.aspx
NestedControls.aspx
$igure 1: 6reate a DataListRepeaterBasics Folder and Add the ."torial ASP'45.
Pa!e#
7pen the Default.aspx pa!e and dra! the SectionLevelutorialListing.ascx ;#er
6ontrol +rom the !serControls +older onto the De#i!n #"r+ace' .hi# ;#er 6ontrol, which
we created in the Ma#ter Pa!e# and Site 4a$i!ation t"torial, en"merate# the #ite map and
di#play# the t"torial# +rom the c"rrent #ection in a b"lleted li#t'
$igure %: Add the SectionLevelutorialListing.ascx ;#er 6ontrol to
Default.aspx 16lic( to $iew +"ll<#i3e ima!e2
n order to ha$e the b"lleted li#t di#play the Data)i#t and *epeater t"torial# we ll be
creatin!, we need to add them to the #ite map' 7pen the "eb.sitemap +ile and add the
+ollowin! mar("p a+ter the Addin! 6"#tom B"tton# #ite map node mar("p:
<site#apNode title%&Displa'ing Data (it) t)e DataList and Repeater&
description%&Samples of Reports t)at !se t)e DataList and Repeater
Controls& url%&*+DataListRepeaterBasics+Default.aspx& > <site#apNode
title%&Basic ,xamples& description%&,xamines t)e basics for displa'ing
data using t)e DataList and Repeater controls.&
url%&*+DataListRepeaterBasics+Basics.aspx& +> <site#apNode
title%&Formatting& description%&Learn )o( to format t)e DataList and
t)e "eb controls (it)in t)e DataList and Repeater-s templates.&
url%&*+DataListRepeaterBasics+Formatting.aspx& +> <site#apNode
title%&Ad.usting t)e DataList s La'out& description%&/llustrates )o( to
alter t)e DataList-s la'out0 s)o(ing multiple data source records per
table ro(.& url%&*+DataListRepeaterBasics+RepeatColumnAndDirection.aspx&
+> <site#apNode title%&Nesting a Repeater (it)in a DataList&
description%&Learn )o( to nest a Repeater (it)in t)e template of a
DataList.& url%&*+DataListRepeaterBasics+NestedControls.aspx& +>
<+site#apNode>
$igure &: ;pdate the Site Map to ncl"de the 4ew ASP'45. Pa!e#
Step %: Displaying #roduct In'or(ation with the
DataList
Similar to the Form&iew, the Data)i#t control # rendered o"tp"t depend# "pon template#
rather than Bo"ndField#, 6hec(Bo,Field#, and #o on' ;nli(e the Form&iew, the Data)i#t
i# de#i!ned to di#play a #et o+ record# rather than a #olitary one' )et # be!in thi# t"torial
with a loo( at bindin! prod"ct in+ormation to a Data)i#t' Start by openin! the
Basics.aspx pa!e in the DataListRepeaterBasics +older' 4e,t, dra! a Data)i#t +rom
the .oolbo, onto the De#i!ner' A# Fi!"re = ill"#trate#, be+ore #peci+yin! the Data)i#t #
template#, the De#i!ner di#play# it a# a !ray bo,'
$igure ): Dra! the Data)i#t From the .oolbo, 7nto the De#i!ner 16lic( to $iew +"ll<#i3e
ima!e2
From the Data)i#t # #mart ta!, add a new 7b9ectDataSo"rce and con+i!"re it to "#e the
1roductsBLL cla## # 2et1roducts method' Since we re creatin! a read<only Data)i#t in
thi# t"torial, #et the drop<down li#t to 14one2 in the wi3ard # 4S5*., ;PDA.5, and
D5)5.5 tab#'
$igure *: 7pt to 6reate a 4ew 7b9ectDataSo"rce 16lic( to $iew +"ll<#i3e ima!e2
$igure +: 6on+i!"re the 7b9ectDataSo"rce to ;#e the 1roductsBLL 6la## 16lic( to $iew
+"ll<#i3e ima!e2
$igure ,: *etrie$e n+ormation Abo"t All o+ the Prod"ct# ;#in! the 2et1roducts
Method 16lic( to $iew +"ll<#i3e ima!e2
A+ter con+i!"rin! the 7b9ectDataSo"rce and a##ociatin! it with the Data)i#t thro"!h it#
#mart ta!, &i#"al St"dio will a"tomatically create an /tememplate in the Data)i#t that
di#play# the name and $al"e o+ each data +ield ret"rned by the data #o"rce 1#ee the
mar("p below2' .hi# de+a"lt /tememplate # appearance i# identical to that o+ the
template# a"tomatically created when bindin! a data #o"rce to the Form&iew thro"!h the
De#i!ner'
<asp3DataList /D%&DataList4& runat%&server& Data5e'Field%&1roduct/D&
DataSource/D%&6b.ectDataSource4& ,nable7ie(State%&False&> </tememplate>
1roduct/D3 <asp3Label /D%&1roduct/DLabel& runat%&server& ext%-<89
,val:&1roduct/D&; 8>- +><br +> 1roductName3 <asp3Label
/D%&1roductNameLabel& runat%&server& ext%-<89 ,val:&1roductName&;
8>- +><br +> Supplier/D3 <asp3Label /D%&Supplier/DLabel& runat%&server&
ext%-<89 ,val:&Supplier/D&; 8>- +><br +> Categor'/D3 <asp3Label
/D%&Categor'/DLabel& runat%&server& ext%-<89 ,val:&Categor'/D&;
8>-+><br +> <uantit'1er!nit3 <asp3Label /D%&<uantit'1er!nitLabel&
runat%&server& ext%-<89 ,val:&<uantit'1er!nit&; 8>- +><br +>
!nit1rice3 <asp3Label /D%&!nit1riceLabel& runat%&server& ext%-<89
,val:&!nit1rice&; 8>- +><br +> !nits/nStoc=3 <asp3Label
/D%&!nits/nStoc=Label& runat%&server& ext%-<89 ,val:&!nits/nStoc=&;
8>- +><br +> !nits6n6rder3 <asp3Label /D%&!nits6n6rderLabel&
runat%&server& ext%-<89 ,val:&!nits6n6rder&; 8>- +><br +>
ReorderLevel3 <asp3Label /D%&ReorderLevelLabel& runat%&server& ext%-<
89 ,val:&ReorderLevel&; 8>- +><br +> Discontinued3 <asp3Label
/D%&DiscontinuedLabel& runat%&server& ext%-<89 ,val:&Discontinued&;
8>- +><br +> Categor'Name3 <asp3Label /D%&Categor'NameLabel&
runat%&server& ext%-<89 ,val:&Categor'Name&; 8>- +><br +>
SupplierName3 <asp3Label /D%&SupplierNameLabel& runat%&server& ext%-<
89 ,val:&SupplierName&; 8>- +><br +> <br +> <+/tememplate>
<+asp3DataList> <asp36b.ectDataSource /D%&6b.ectDataSource4&
runat%&server& 6ld7alues1arameterFormatString%&original>?@A&
Select#et)od%&2et1roducts& 'peName%&1roductsBLL&>
<+asp36b.ectDataSource>
-ote: *ecall that when bindin! a data #o"rce to a Form&iew control thro"!h the
Form&iew # #mart ta!, &i#"al St"dio created an /tememplate, /nsert/tememplate,
and ,dit/tememplate' /ith the Data)i#t, howe$er, only an /tememplate i# created'
.hi# i# beca"#e the Data)i#t doe# not ha$e the #ame b"ilt<in editin! and in#ertin! #"pport
o++ered by the Form&iew' .he Data)i#t doe# contain edit< and delete<related e$ent#, and
editin! and deletin! #"pport can be added with a bit o+ code, b"t there # no #imple o"t<o+<
the<bo, #"pport a# with the Form&iew' /e ll #ee how to incl"de editin! and deletin!
#"pport with the Data)i#t in a +"t"re t"torial'
)et # ta(e a moment to impro$e the appearance o+ thi# template' *ather than di#playin!
all o+ the data +ield#, let # only di#play the prod"ct # name, #"pplier, cate!ory, >"antity
per "nit, and "nit price' Moreo$er, let # di#play the name in an <)B> headin! and lay o"t
the remainin! +ield# "#in! a <table> beneath the headin!'
.o ma(e the#e chan!e# yo" can either "#e the template editin! +eat"re# in the De#i!ner
+rom the Data)i#t # #mart ta! clic( on the 5dit .emplate# lin( or yo" can modi+y the
template man"ally thro"!h the pa!e # declarati$e #ynta,' + yo" "#e the 5dit .emplate#
option in the De#i!ner, yo"r re#"ltin! mar("p may not match the +ollowin! mar("p
e,actly, b"t when $iewed thro"!h a brow#er #ho"ld loo( $ery #imilar to the #creen #hot
#hown in Fi!"re -'
<asp3DataList /D%&DataList4& runat%&server& Data5e'Field%&1roduct/D&
DataSource/D%&6b.ectDataSource4& ,nable7ie(State%&False&> </tememplate>
<)B><asp3Label /D%&1roductNameLabel& runat%&server& ext%-<89
,val:&1roductName&; 8>- +><+)B> <table border%&@&> <tr> <td
class%&1roduct1ropert'Label&>Categor'3<+td> <td><asp3Label
/D%&Categor'NameLabel& runat%&server& ext%-<89 ,val:&Categor'Name&;
8>- +><+td> <td class%&1roduct1ropert'Label&>Supplier3<+td>
<td><asp3Label /D%&SupplierNameLabel& runat%&server& ext%-<89
,val:&SupplierName&; 8>- +><+td> <+tr> <tr> <td
class%&1roduct1ropert'Label&><t'+!nit3<+td> <td><asp3Label
/D%&<uantit'1er!nitLabel& runat%&server& ext%-<89
,val:&<uantit'1er!nit&; 8>- +><+td> <td
class%&1roduct1ropert'Label&>1rice3<+td> <td><asp3Label
/D%&!nit1riceLabel& runat%&server& ext%-<89 ,val:&!nit1rice&0 &?@3CA&;
8>- +><+td> <+tr> <+table> <+/tememplate> <+asp3DataList>
-ote: .he e,ample abo$e "#e# )abel /eb control# who#e ext property i# a##i!ned the
$al"e o+ the databindin! #ynta,' Alternati$ely, we co"ld ha$e omitted the )abel#
alto!ether, typin! in 9"#t the databindin! #ynta,' .hat i#, in#tead o+ "#in! <asp3Label
/D%&Categor'NameLabel& runat%&server& ext%-<89 ,val:&Categor'Name&;
8>- +> we co"ld ha$e in#tead "#ed the declarati$e #ynta, <89 ,val:&Categor'Name&;
8>'
)ea$in! in the )abel /eb control#, howe$er, o++er two ad$anta!e#' Fir#t, it pro$ide# an
ea#ier mean# +or +ormattin! the data ba#ed on the data, a# we ll #ee in the ne,t t"torial'
Second, the 5dit .emplate# option in the De#i!ner doe#n t di#play declarati$e
databindin! #ynta, that appear# o"t#ide o+ #ome /eb control' n#tead, the 5dit .emplate#
inter+ace i# de#i!ned to +acilitate wor(in! with #tatic mar("p and /eb control# and
a##"me# that any databindin! will be done thro"!h the 5dit DataBindin!# dialo! bo,,
which i# acce##ible +rom the /eb control# #mart ta!#'
.here+ore, when wor(in! with the Data)i#t, which pro$ide# the option o+ editin! the
template# thro"!h the De#i!ner, pre+er to "#e )abel /eb control# #o that the content i#
acce##ible thro"!h the 5dit .emplate# inter+ace' A# we ll #ee #hortly, the *epeater
re>"ire# that the template # content# be edited +rom the So"rce $iew' 6on#e>"ently, when
cra+tin! the *epeater # template# ll o+ten omit the )abel /eb control# "nle## (now ll
need to +ormat the appearance o+ the data bo"nd te,t ba#ed on pro!rammatic lo!ic'
$igure .: 5ach Prod"ct # 7"tp"t i# *endered ;#in! the Data)i#t # /tememplate 16lic(
to $iew +"ll<#i3e ima!e2
Step &: I(pro/ing the Appearance o' the DataList
)i(e the %rid&iew, the Data)i#t o++er# a n"mber o+ #tyle<related propertie#, #"ch a# Font,
ForeColor, Bac=Color, CssClass, /temSt'le, Alternating/temSt'le,
Selected/temSt'le, and #o on' /hen wor(in! with the %rid&iew and Detail#&iew
control#, we created S(in +ile# in the Data"ebControls .heme that pre<de+ined the
CssClass propertie# +or the#e two control# and the CssClass property +or #e$eral o+ their
#"bpropertie# 1Ro(St'le, CeaderSt'le, and #o on2' )et # do the #ame +or the Data)i#t'
A# di#c"##ed in the Di#playin! Data /ith the 7b9ectDataSo"rce t"torial, a S(in +ile
#peci+ie# the de+a"lt appearance<related propertie# +or a /eb control? a .heme i# a
collection o+ S(in, 6SS, ima!e, and @a$aScript +ile# that de+ine a partic"lar loo( and +eel
+or a web#ite' n the Displaying Data With the ObjectDataSource t"torial, we created a
Data"ebControls .heme 1which i# implemented a# a +older within the App>)emes
+older2 that ha#, c"rrently, two S(in +ile# < 2rid7ie(.s=in and Details7ie(.s=in' )et #
add a third S(in +ile to #peci+y the pre<de+ined #tyle #ettin!# +or the Data)i#t'
.o add a S(in +ile, ri!ht<clic( on the App>)emes+Data"ebControls +older, choo#e Add
a 4ew tem, and #elect the S(in File option +rom the li#t' 4ame the +ile DataList.s=in'
$igure 0: 6reate a 4ew S(in File 4amed DataList.s=in 16lic( to $iew +"ll<#i3e ima!e2
;#e the +ollowin! mar("p +or the DataList.s=in +ile:
<asp3DataList runat%&server& CssClass%&Data"ebControlSt'le&>
<Alternating/temSt'le CssClass%&AlternatingRo(St'le& +> </temSt'le
CssClass%&Ro(St'le& +> <CeaderSt'le CssClass%&CeaderSt'le& +>
<FooterSt'le CssClass%&FooterSt'le& +> <Selected/temSt'le
CssClass%&SelectedRo(St'le& +> <+asp3DataList>
.he#e #ettin!# a##i!n the #ame 6SS cla##e# to the appropriate Data)i#t propertie# a# were
"#ed with the %rid&iew and Detail#&iew control#' .he 6SS cla##e# "#ed here
Data"ebControlSt'le, AlternatingRo(St'le, Ro(St'le, and #o on are de+ined in the
St'les.css +ile and were added in pre$io"# t"torial#'
/ith the addition o+ thi# S(in +ile, the Data)i#t # appearance i# "pdated in the De#i!ner
1yo" may need to re+re#h the De#i!ner $iew to #ee the e++ect# o+ the new S(in +ile? +rom
the &iew men", choo#e *e+re#h2' A# Fi!"re 10 #how#, each alternatin! prod"ct ha# a
li!ht pin( bac(!ro"nd color'
$igure 11: 6reate a 4ew S(in File 4amed DataList.s=in 16lic( to $iew +"ll<#i3e
ima!e2
Step ): 23ploring the DataList s 4ther e(plates
n addition to the /tememplate, the Data)i#t #"pport# #i, other optional template#:
Ceaderemplate i+ pro$ided, add# a header row to the o"tp"t and i# "#ed to
render thi# row
Alternating/tememplate "#ed to render alternatin! item#
Selected/tememplate "#ed to render the #elected item? the #elected item i# the
item who#e inde, corre#pond# to the Data)i#t # Selected/ndex property
,dit/tememplate "#ed to render the item bein! edited
Separatoremplate i+ pro$ided, add# a #eparator between each item and i# "#ed
to render thi# #eparator
Footeremplate < i+ pro$ided, add# a +ooter row to the o"tp"t and i# "#ed to
render thi# row
/hen #peci+yin! the Ceaderemplate or Footeremplate, the Data)i#t add# an
additional header or +ooter row to the rendered o"tp"t' )i(e with the %rid&iew # header
and +ooter row#, the header and +ooter in a Data)i#t are not bo"nd to data' .here+ore, any
databindin! #ynta, in the Ceaderemplate or Footeremplate that attempt# to acce##
bo"nd data will ret"rn a blan( #trin!'
-ote: A# we #aw in the Di#playin! S"mmary n+ormation in the %rid&iew # Footer
t"torial, while the header and +ooter row# don t #"pport databindin! #ynta,, data<#peci+ic
in+ormation can be in9ected directly into the#e row# +rom the %rid&iew # Ro(DataBound
e$ent handler' .hi# techni>"e can be "#ed to both calc"late r"nnin! total# or other
in+ormation +rom the data bo"nd to the control a# well a# a##i!n that in+ormation to the
+ooter' .hi# #ame concept can be applied to the Data)i#t and *epeater control#? the only
di++erence i# that +or the Data)i#t and *epeater create an e$ent handler +or the
/temDataBound e$ent 1in#tead o+ +or the Ro(DataBound e$ent2'
For o"r e,ample, let # ha$e the title Prod"ct n+ormation di#played at the top o+ the
Data)i#t # re#"lt# in an <)D> headin!' .o accompli#h thi#, add a Ceaderemplate with
the appropriate mar("p' From the De#i!ner, thi# can be accompli#hed by clic(in! on the
5dit .emplate# lin( in the Data)i#t # #mart ta!, choo#in! the 0eader .emplate +rom the
drop<down li#t, and typin! in the te,t a+ter pic(in! the 0eadin! 3 option +rom the #tyle
drop<down li#t 1#ee Fi!"re 112'
$igure 11: Add a Ceaderemplate with the .e,t Prod"ct n+ormation 16lic( to $iew
+"ll<#i3e ima!e2
Alternati$ely, thi# can be added declarati$ely by enterin! the +ollowin! mar("p within
the <asp3DataList> ta!#:
<Ceaderemplate> <)D>1roduct /nformation<+)D> <+Ceaderemplate>
.o add a bit o+ #pace between each prod"ct li#tin!, let # add a Separatoremplate that
incl"de# a line between each #ection' .he hori3ontal r"le ta! 1<)r>2, add# #"ch a di$ider'
6reate the Separatoremplate #o that it ha# the +ollowin! mar("p:
<Separatoremplate> <)r +> <+Separatoremplate>
-ote: )i(e the Ceaderemplate and Footeremplates, the Separatoremplate i# not
bo"nd to any record +rom the data #o"rce and there+ore cannot directly acce## the data
#o"rce record# bo"nd to the Data)i#t'
A+ter ma(in! thi# addition, when $iewin! the pa!e thro"!h a brow#er it #ho"ld loo(
#imilar to Fi!"re 12' 4ote the header row and the line between each prod"ct li#tin!'
$igure 1%: .he Data)i#t ncl"de# a 0eader *ow and a 0ori3ontal *"le Between 5ach
Prod"ct )i#tin! 16lic( to $iew +"ll<#i3e ima!e2
Step *: Rendering Speci'ic 5ar6up with the Repeater
Control
+ yo" do a &iew8So"rce +rom yo"r brow#er when $i#itin! the Data)i#t e,ample +rom
Fi!"re 12, yo" ll #ee that the Data)i#t emit# an 0.M) <table> that contain# a table row
1<tr>2 with a #in!le table cell 1<td>2 +or each item bo"nd to the Data)i#t' .hi# o"tp"t, in
+act, i# identical to what wo"ld be emitted +rom a %rid&iew with a #in!le .emplateField'
A# we ll #ee in a +"t"re t"torial, the Data)i#t doe# allow +"rther c"#tomi3ation o+ the
o"tp"t, enablin! "# to di#play m"ltiple data #o"rce record# per table row'
/hat i+ yo" don t want to emit an 0.M) <table>, tho"!hA For total and complete
control o$er the mar("p !enerated by a data /eb control, we m"#t "#e the *epeater
control' )i(e the Data)i#t, the *epeater i# con#tr"cted ba#ed "pon template#' .he
*epeater, howe$er, only o++er# the +ollowin! +i$e template#:
Ceaderemplate i+ pro$ided, add# the #peci+ied mar("p be+ore the item#
/tememplate "#ed to render item#
Alternating/tememplate i+ pro$ided, "#ed to render alternatin! item#
Separatoremplate i+ pro$ided, add# the #peci+ied mar("p between each item
Footeremplate < i+ pro$ided, add# the #peci+ied mar("p a+ter the item#
n ASP'45. 1',, the *epeater control wa# commonly "#ed to di#play a b"lleted li#t
who#e data came +rom #ome data #o"rce' n #"ch a ca#e, the Ceaderemplate and
Footeremplates wo"ld contain the openin! and clo#in! <ul> ta!#, re#pecti$ely, while
the /tememplate wo"ld contain <li> element# with databindin! #ynta,' .hi# approach
can #till be "#ed in ASP'45. 2'0 a# we #aw in two e,ample# in the Ma#ter Pa!e# and Site
4a$i!ation t"torial:
n the Site.master ma#ter pa!e, a *epeater wa# "#ed to di#play a b"lleted li#t o+
the top<le$el #ite map content# 1Ba#ic *eportin!, Filterin! *eport#, 6"#tomi3ed
Formattin!, and #o on2? another, ne#ted *epeater wa# "#ed to di#play the children
#ection# o+ the top<le$el #ection#
n SectionLevelutorialListing.ascx, a *epeater wa# "#ed to di#play a
b"lleted li#t o+ the children #ection# o+ the c"rrent #ite map #ection
-ote: ASP'45. 2'0 introd"ce# the new B"lleted)i#t control, which can be bo"nd to a
data #o"rce control in order to di#play a #imple b"lleted li#t' /ith the B"lleted)i#t control
we do not need to #peci+y any o+ the li#t<related 0.M)? in#tead, we #imply indicate the
data +ield to di#play a# the te,t +or each li#t item'
.he *epeater #er$e# a# a catch all data /eb control' + there i# not an e,i#tin! control that
!enerate# the needed mar("p, the *epeater control can be "#ed' .o ill"#trate "#in! the
*epeater, let # ha$e the li#t o+ cate!orie# di#played abo$e the Prod"ct n+ormation
Data)i#t created in Step 2' n partic"lar, let # ha$e the cate!orie# di#played in a #in!le<
row 0.M) <table> with each cate!ory di#played a# a col"mn in the table'
.o accompli#h thi#, #tart by dra!!in! a *epeater control +rom the .oolbo, onto the
De#i!ner, abo$e the Prod"ct n+ormation Data)i#t' A# with the Data)i#t, the *epeater
initially di#play# a# a !ray bo, "ntil it# template# ha$e been de+ined'
$igure 1&: Add a *epeater to the De#i!ner 16lic( to $iew +"ll<#i3e ima!e2
.here # only one option in the *epeater # #mart ta!: 6hoo#e Data So"rce' 7pt to create a
new 7b9ectDataSo"rce and con+i!"re it to "#e the CategoriesBLL cla## #
2etCategories method'
$igure 1): 6reate a 4ew 7b9ectDataSo"rce 16lic( to $iew +"ll<#i3e ima!e2
$igure 1*: 6on+i!"re the 7b9ectDataSo"rce to ;#e the CategoriesBLL 6la## 16lic( to
$iew +"ll<#i3e ima!e2
$igure 1+: *etrie$e n+ormation Abo"t All o+ the 6ate!orie# ;#in! the 2etCategories
Method 16lic( to $iew +"ll<#i3e ima!e2
;nli(e the Data)i#t, &i#"al St"dio doe# not a"tomatically create an tem.emplate +or the
*epeater a+ter bindin! it to a data #o"rce' F"rthermore, the *epeater # template# cannot
be con+i!"red thro"!h the De#i!ner and m"#t be #peci+ied declarati$ely'
.o di#play the cate!orie# a# a #in!le<row <table> with a col"mn +or each cate!ory, we
need the *epeater to emit mar("p #imilar to the +ollowin!:
<table> <tr> <td>Categor' 4<+td> <td>Categor' E<+td> ... <td>Categor'
N<+td> <+tr> <+table>
Since the <td>Category X<+td> te,t i# the portion that repeat#, thi# will appear in the
*epeater # tem.emplate' .he mar("p that appear# be+ore it < <table><tr> < will be
placed in the Ceaderemplate while the endin! mar("p < <+tr><+table> < will placed
in the Footeremplate' .o enter the#e template #ettin!#, !o to the declarati$e portion o+
the ASP'45. pa!e by clic(in! on the So"rce b"tton in the lower le+t corner and type in
the +ollowin! #ynta,:
<asp3Repeater /D%&Repeater4& runat%&server&
DataSource/D%&6b.ectDataSourceE& ,nable7ie(State%&False&>
<Ceaderemplate> <table> <tr> <+Ceaderemplate> </tememplate> <td><89
,val:&Categor'Name&; 8><+td> <+/tememplate> <Footeremplate> <+tr>
<+table> <+Footeremplate> <+asp3Repeater>
.he *epeater emit# the preci#e mar("p a# #peci+ied by it# template#, nothin! more,
nothin! le##' Fi!"re 1B #how# the *epeater # o"tp"t when $iewed thro"!h a brow#er'
$igure 1,: A Sin!le<*ow 0.M) <table> )i#t# 5ach 6ate!ory in a Separate 6ol"mn
16lic( to $iew +"ll<#i3e ima!e2
Step +: I(pro/ing the Appearance o' the Repeater
Since the *epeater emit# preci#ely the mar("p #peci+ied by it# template#, it #ho"ld come
a# no #"rpri#e that there are no #tyle<related propertie# +or the *epeater' .o alter the
appearance o+ the content !enerated by the *epeater, we m"#t man"ally add the needed
0.M) or 6SS content directly to the *epeater # template#'
For o"r e,ample, let # ha$e the cate!ory col"mn# alternate bac(!ro"nd color#, li(e with
the alternatin! row# in the Data)i#t' .o accompli#h thi#, we need to a##i!n the Ro(St'le
6SS cla## to each *epeater item and the AlternatingRo(St'le 6SS cla## to each
alternatin! *epeater item thro"!h the /tememplate and Alternating/tememplate
template#, li(e #o:
</tememplate> <td class%&Ro(St'le&><89 ,val:&Categor'Name&; 8><+td>
<+/tememplate> <Alternating/tememplate> <td
class%&AlternatingRo(St'le&><89 ,val:&Categor'Name&; 8><+td>
<+Alternating/tememplate>
)et # al#o add a header row to the o"tp"t with the te,t Prod"ct 6ate!orie# ' Since we don
t (now how many col"mn# o"r re#"ltin! <table> will be compri#ed o+, the #imple#t way
to !enerate a header row that i# !"aranteed to #pan all col"mn# i# to "#e two <table>#'
.he +ir#t <table> will contain two row# the header row and a row that will contain the
#econd, #in!le<row <table> that ha# a col"mn +or each cate!ory in the #y#tem' .hat i#,
we want to emit the +ollowin! mar("p:
<table> <tr> <t)>1roduct Categories<+t)> <+tr> <tr> <td> <table> <tr>
<td>Categor' 4<+td> <td>Categor' E<+td> ... <td>Categor' N<+td> <+tr>
<+table> <+td> <+tr> <+table>
.he +ollowin! Ceaderemplate and Footeremplate re#"lt in the de#ired mar("p:
<asp3Repeater /D%&Repeater4& runat%&server&
DataSource/D%&6b.ectDataSourceE& ,nable7ie(State%&False&>
<Ceaderemplate> <table cellpadding%&@& cellspacing%&@&> <tr> <t)
class%&CeaderSt'le&>1roduct Categories<+t)> <+tr> <tr> <td> <table
cellpadding%&B& cellspacing%&@&> <tr> <+Ceaderemplate> </tememplate>
<td class%&Ro(St'le&><89 ,val:&Categor'Name&; 8><+td> <+/tememplate>
<Alternating/tememplate> <td class%&AlternatingRo(St'le&> <89
,val:&Categor'Name&; 8><+td> <+Alternating/tememplate> <Footeremplate>
<+tr> <+table> <+td> <+tr> <+table> <+Footeremplate> <+asp3Repeater>
Fi!"re 1- #how# the *epeater a+ter the#e chan!e# ha$e been made'
$igure 1.: .he 6ate!ory 6ol"mn# Alternate in Bac(!ro"nd 6olor and ncl"de# a 0eader
*ow 16lic( to $iew +"ll<#i3e ima!e2