DreamwaverMX與ASP.NET(三)

asp.net

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控制項來顯示資料吧。