3.利用Repeater元件顯示資料集
相關介紹
ASP.NET中資料的顯示多種多樣，其中Repeater是另外一個已有的元件。 DataGrid總是會以”表格”來展示數據，當我們想用更自由的方式來展示數據著一定會用到Repeater控件,
它以Template(樣板)的方式來定義資料輸出格式。
STEP 1. 建立頁面我們可以透過更改原有的頁面來建立用Repeater元件顯示資料。將Location1.htm重新命名為Location1.aspx。刪除頁面中原有的部分，並像上一章一樣建立Dataset,其中篩選Region_IDEnterValue=1。下面讓我們用Repeater控制項來做動態頁面。
j為了利用樣板定義輸出格式，先建立表格。我們可以透過ApplicationàDatabases頁面看
資料庫的結構。
[圖3-1 資料庫結構]
根據資料庫的結構，設計下列的表格。
[圖3-2 模版圖]
k下面需要將資料綁定到表格中。將Application面板中Bindings中的資料項目拖曳到其位置中。
[圖3-3 Binding對話框]
資料綁定後得到如下頁:
[圖3-4資料綁定後的頁面]
是否有點似曾相識的感覺，因為Dreamwaver MX繼承了UltraDev的傳統以高亮顯示資料。 ③ 其中Binding對話方塊中也可以選擇資料表示的形式，點選頁面的資料項目後可在Binding中對應的資料選擇資料表示的形式。
[圖3-5 資料表示的形式]
若要以此表格為樣板顯示所有資料項，則需全選此表格。點選Application面板中的Server Behaviors項目中的”+”，選擇Repeat Region項目
[圖3-6選擇Repeat Region] [圖3-7 選擇重複的方式]
在Repeat Region中確定想重複的方式，按一下OK。現在就可以按”F12”預覽頁面了。
STEP 2 分析程式碼(注意：為了能顯示程式碼，以下所有程式碼都在「<」之後和「>」之前加了空格，不便之處請多原諒！)
< ASP:Repeater runat="server" DataSource='< %# DataSet1.DefaultView % >' >
< ItemTemplate >
< table width="75%" border="0" >
< tr >
< td width="18%" >Location Name< /td >
< td colspan="3" > < %# DataSet1.FieldValue("LOCATION_NAME", Container) % > < /td >
< /tr >
< tr >
< td >City< /td >
< td width="35%" > < %# DataSet1.FieldValue("CITY", Container) % > < /td >
< td width="19%" >Address< /td >
< td width="28%" > < %# DataSet1.FieldValue("ADDRESS", Container) % > < /td >
< /tr >
< tr >
< td >State< /td >
< td > < %# DataSet1.FieldValue("STATE_COUNTRY", Container) % > < /td >
< td >Code< /td >
< td > < %# DataSet1.FieldValue("CODE", Container) % > < /td >
< /tr >
< tr >
< td >Telephone< /td >
< td > < %# DataSet1.FieldValue("TELEPHONE", Container) % > < /td >
< td >Fax< /td >
< td > < %# DataSet1.FieldValue("FAX", Container) % > < /td >
< /tr >
< /table >
< /ItemTemplate >
< /ASP:Repeater >
ASP.net是透過建立一個ItemTemple的模板來重複顯示所有資料的，所以若要設定Repeater的樣式，可以透過設定模板來實現。
我們也可以透過添加其他樣板來達到我們想要的效果。
AlternatingItemTemplate : 實作交叉顯示資料。與原ItemTemplate的模板交叉顯示數據
SepartorTemplate: 分隔符樣板。可用於分隔資料行。
HeaderTemplate: 標題樣板。顯示與所有數據的最上方。
FooterTemplate: 結尾樣板。顯示與所有數據的最下方。
其設計形式同ItemTemplate一樣。只需將你想要做模板的部分用標記符包圍即可。
透過Dreamwaver MX來插入程式碼可以有捷徑。點選Insert面板的ASP.NET標籤，然後點選
標誌，就會彈出標記符添加對話框。選擇ASP.NET Tags中的Templates專案。你就可以從中選擇你想要新增的程式碼。 Dreamwaver MX會在你原來輸入遊標在的位置上加入程式碼。
[圖2-1 新增標記符對話框]
下面是AlternatingItemTemplate，SepartorTemplate，HeaderTemplate，FooterTemplate的程式碼，可將其插入< ASP:Repeater >< /ASP:Repeater >中。
< headertemplate >< font color="#666666" size="4" >All
Location< /font >< /headertemplate >
< AlternatingItemTemplate >
< table width="75%" border="0" bgcolor="#CCCCCC" >
< tr >
< td width="17%" >Location Name< /td >
< td colspan="3" bgcolor="#CCCCCC" >
< %# DataSet1.FieldValue("LOCATION_NAME", Container) % >
< /td >
< /tr >
< tr >
< td >City< /td >
< td width="34%" > < %# DataSet1.FieldValue("CITY", Container) % > < /td >
< td width="24%" >Address< /td >
< td width="25%" > < %# DataSet1.FieldValue("ADDRESS", Container) % > < /td >
< /tr >
< tr >
< td >State< /td >
< td > < %# DataSet1.FieldValue("STATE_COUNTRY", Container) % > < /td >
< td >Code< /td >
< td > < %# DataSet1.FieldValue("CODE", Container) % > < /td >
< /tr >
< tr >
< td >Telephone< /td >
< td > < %# DataSet1.FieldValue("TELEPHONE", Container) % > < /td >
< td >Fax< /td >
< td > < %# DataSet1.FieldValue("FAX", Container) % > < /td >
< /tr >
< /table >
< /AlternatingItemTemplate >
< separatortemplate >< hr width="70%" align="left" >
< /separatortemplate >
< footertemplate >< font color="#666666" size="4" >End< /font >< /footertemplate >
當IIS解析程式碼時就會根據關鍵字將模板放入相對的位置，取得原來所要求的頁面。
以上程式所產生的頁面如下:
[圖2-1 最終頁]
Repeater元件可以建立更自由的頁面，但是其每一行只可以顯示一組資料。想不想建立更自由的頁面，那就讓我們進入下一節用DataList控制項顯示資料。