DreamwaverMX與ASP.NET(四)
作者：Eve Cole
更新時間：2009-05-31 21:06:17
4.利用DataList元件顯示資料集
相關介紹:
DataList是功能強化的Repeater控件，除了有Repeater原有的功能外，還可以設定單行顯示資料的筆數(RepeatColumn)，被選項樣板(SelectedItemTemple)，編輯項目樣板(EditTemplate)。但DataList會將輸出的資料排在表格中輸出，而Repeater則更忠於樣板的定義，不會加入任何HTML標記。 (注意：為了能顯示程式碼，以下所有程式碼都在「<」之後和「>」之前加了空格，不便之處請多原諒！)
STEP 1建立頁面
我們要建立的頁面就如下圖所示。當我們點擊Detail的超級連結時就會彈出詳細資料，如第一項所示。點擊Close時，詳細資料就會關閉，恢復原來的樣子。
[圖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”用於產生事件的命令，在Text對話框中輸入Detail(將會顯示出來)
[圖2-2 LinkButton編輯框]
然後再Layout中選擇所需的顏色，點選OK，即可產生程式碼。
< asp:LinkButton BackColor="#FFFFFF" CommandName="Detail" ForeColor="#000000" ID="Detail" runat="server" Text="Detail" >< /asp:LinkButton >
為了在交叉顯示中也具有這樣的效果，我們需要在< AlternatingItemTemplate >與< /AlternatingItemTemplate >中也插入相同的程式碼。
同時為了關閉彈出來的選擇後樣板，同樣需要產生指令，所以要增加多一個Linkbutton。這樣就需要在< SelectedItemTemplate >< /SelectedItemTemplate >中插入程式碼：
< asp:LinkButton BackColor="#FFFFFF" CommandName="Close" ForeColor="#000000" ID="Close" runat="server" Text="Close" >< /asp:LinkButton >
k有了指令，我們還需要使用程式來解釋這個指令。其實過程並不複雜，只需要加入一小部分程式碼。在< head >< /head >中加入以下程式碼:
< script language="VB" runat="server" >
Sub DataList_ItemCommand(sender as Object,e as DataListCommandEventArgs)
If e.CommandSource.CommandName="Detail" Then
DataList1.SelectedIndex=e.Item.ItemIndex
ElseIf e.CommandSource.CommandName="Close" Then
DataList1.SelectedIndex=-1
End If
DataList1.DataBind()
End sub
< /script >
程式可以取得你點選LinkButton的指令(CommandName)來判斷要執行的程式。當DataList的SelectedIndex屬性設定為e.Item.ItemIndex，就會開啟SelectedItemTemplate頁。如果指令為Close則DataList的SelectedIndex屬性設定為-1(即沒有資料項被選取)，則DataList會以ItemTemplate項目樣板顯示此一項資料。
在< asp:DataList >中也要加入程式碼段
OnItemCommand="DataList_ItemCommand"
以聲明與程序段DataList_ItemCommand的關係。
按下”F12”預覽，頁面就會顯示預想的效果。
[圖2-3 最終預覽版]
附上主要程式段的原始碼:
Sub DataList_ItemCommand(sender as Object,e as DataListCommandEventArgs)
If e.CommandSource.CommandName="Detail" Then
DataList1.SelectedIndex=e.Item.ItemIndex
ElseIf e.CommandSource.CommandName="Close" Then
DataList1.SelectedIndex=-1
End If
DataList1.DataBind()
End sub
< form runat="server" >
< asp:DataList id="DataList1"
runat="server"
RepeatColumns="1"
RepeatDirection="Vertical"
RepeatLayout="Flow"
DataSource="< %# DataSet1.DefaultView % >"
OnItemCommand="DataList_ItemCommand" >
< HeaderTemplate >
Location Name < /HeaderTemplate >
< ItemTemplate >
< %# DataSet1.FieldValue("LOCATION_NAME", Container) % >
< asp:linkbutton BackColor="#FFFFFF" CommandName="Detail" ForeColor="#000000" ID="Detail" runat="server" Text="Detail" >< /asp:linkbutton >
< /ItemTemplate >
< AlternatingItemTemplate >< font color="#0000FF" >
< %# DataSet1.FieldValue("LOCATION_NAME", Container) % >
< /font >
< asp:linkbutton BackColor="#FFFFFF" CommandName="Detail" ForeColor="#000000" ID="Detail" runat="server" Text="Detail" >< /asp:linkbutton >< /AlternatingItemTemplate >
< SelectedItemTemplate >Address:
< %# DataSet1.FieldValue("ADDRESS", Container) % >
< BR >
City:
< %# DataSet1.FieldValue("CITY", Container) % >
< BR >
Telephone:
< %# DataSet1.FieldValue("TELEPHONE", Container) % >
< BR >
< asp:LinkButton BackColor="#FFFFFF" CommandName="Close" ForeColor="#000000" ID="Close" runat="server" Text="Close" >< /asp:LinkButton >
< /SelectedItemTemplate >
< /asp:DataList >
< /form >
DataList還有Edit Item的樣板，主要用於資料更新。此書會在後面的部分介紹到。
