DreamwaverMX與ASP.NET(四)

asp.net 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的樣板，主要用於資料更新。此書會在後面的部分介紹到。