<fieldset id="mggm2"></fieldset>

4.利用DataList組件顯示數據集

相關介紹:

DataList是功能強化的Repeater控件，除了有Repeater原有的功能外，還可以設定單行顯示數據的筆數(RepeatColumn)，被選項樣板(SelectedItemTemple)，編輯項樣板(EditTemplate)。但是DataList會將輸出的數據安排在表格中輸出，而Repeater則更忠于樣板的定義，不會添加任何HTML標記。(注意：為了能顯示代碼，以下所有代碼都在“<”之后和“>”之前加了空格，不便之處請多原諒！)

STEP 1建立頁面

我們要建立的頁面就如下圖所示。當我們點擊Detail的超級鏈接時就會彈出詳細資料，正如第一項中所示。點擊Close時，詳細資料就會關閉，恢復原來的樣子。
Dreamweaver/10208/pic/image002.jpg">

[圖 1-1 頁面演示]

先選擇要顯示的數據。為了顯示歐洲的數據(即Region_ID=3)，我們可以在Dataset設定中選定篩選Region_ID=3的數據。


[圖 1-2數據篩選]

用Datalist控件做一個數據簡要顯示的頁面。我們先建立一個無數據的頁面。然后選擇Application面板中的Server behavior。單擊”+”，選擇DataList。


[圖1-3 DataList選擇頁面]

在彈出來的對話框中，我們可以根據需要對應的地方加入頁面模板。

u Header: 表頭模板

u Item: 數據項模板

u Alternating Item: 交叉顯示模板

u Edit Item: 修改模板((默認是沒有顯示出來的，必須通過事件響應才可以顯示)

u Selected Item: 選中后的顯示的模板(同樣須通過事件響應才可以顯示)

u Separator: 分隔模板

u Footer: 表底模板


[圖 1-4 編輯DataList對話框]
我們可以通過往Contents中添加HTML代碼制作所需的模板，同時也可以通過單擊 按鈕來添加數據項。單擊次按鈕后，就會彈出數據項對話框讓你選擇所需的數據。并在Contents輸入框中加入

< %# DataBinder.Eval(Container.DataItem, "數據項") % >

的代碼用于顯示數據。


[圖1-5 添加數據項]

為了達到預覽的效果，首先在Header中加入代碼:Location Name。用以顯示標題。在Item中加入代碼:

< %# DataSet1.FieldValue("LOCATION_NAME", Container) % >，用Location_name來做每一項的標題。

在Alternating Item中加入代碼

< fontcolor="#0000FF" >< %#DataSet1.FieldValue("LOCATION_NAME",Container)% >< /font >

以不同的字體顏色來顯示數據。

雖然Selected Item并不能馬上顯示，但是我們還應寫下代碼，以備以后調用。如下：

Address:

< %# DataSet1.FieldValue("ADDRESS", Container) % >

< BR >

City:

< %# DataSet1.FieldValue("CITY", Container) % >

< BR >

Telephone:

< %# DataSet1.FieldValue("TELEPHONE", Container) % >

< BR >

單擊OK，接著預覽頁面，下圖就是以上代碼的效果了。我們等一下會去實現顯示出Selected Item項的效果的。


[圖1-6 最初預覽]
DataList區別Repeater的一個不同點就是可以設置單行顯示多筆數據，在DataList編輯窗口中可以進行設置。


[圖 1-7 設置單行顯示多筆數據]

選擇Use Line Breaks項就只是有一個< BR >標記進行分開數據。選擇Use a Table則是以表格的形式輸出，而且可以通過設置Table Columns來確定單行顯示數據的筆數。

STEP2 編寫代碼

Selected Item時需要通過事件來顯示的，所以我們需要建立按鈕以啟動事件。

j添加LinkButton,用以產生事件。將光標移到源代碼窗口的< ItemTemplate >與< /ItemTemplate >中，單擊more tags ，在彈出的對話框中選擇asp:LinkButton控件。


[圖2-1 Tag Chooser對話框]

在編輯LinkButton對話框中，設置LinkButton的屬性。在ID輸入框中輸入名稱:Detail，

在Command Name中輸入”Detail”用于