第 11 章 網頁資料庫的資料顯示

• 11-1 ASP.NET 控制項與 Data Binding

• 11-2 Repeater 控制項• 11-3 DataList 控制項• 11-4 DataGrid 控制項

11-1 ASP.NET 控制項與 Data Binding

• 11-1-1 什麼是 Data Binding 資料連結• 11-1-2 ArrayList 物件的資料來源• 11-1-3 DataReader 物件的資料來源• 11-1-4 DataSet 物件的資料來源

11-1-1 什麼是 Data Binding 資料連結 - 伺服端 Data Binding

• 伺服端 Data Binding 擁有高擴充性、可重複使用和容易維護的特點。

• ASP.NET的 Data Binding 是 .NET Framework的 Data Binding 技術，是指將控制項的屬性連結到任何可用的「資料」（ Data ）。

• 在此的資料可以是單純資料、物件屬性，控制項名稱的物件集合等， .NET Framework 將這些資料視為類別的屬性來存取。

11-1-1 什麼是 Data Binding 資料連結 -ASP.NET 控制項

• ASP.NET 控制項擁有 DataSource 屬性的控制項才支援Data Binding ，如下表所示：

ASP.NET控制項 控制項標籤

ListBox<asp:ListBox runat="Server"/>

DropDownList<asp:DropDownList runat="Server"/>

CheckBoxList<asp:CheckBoxList runat="Server"/>

RadioButtonList<asp:RadioButtonList runat="Server"/>

Select<select runat="Server"/>

Repeater<asp:Repeater runat="Server"/>

DataList<asp:DataList runat="Server"/>

DataGrid<asp:DataGrid runat="Server"/>

11-1-2 ArrayList 物件的資料來源

• 第一步驟：建立資料來源，如下所示：Dim names As ArrayList= New ArrayList()names.Add ("陳會安 ")names.Add ("江小魚 ")names.Add ("張無忌 ")names.Add ("楊過 ")

• 第二個步驟：指定 DataSource 屬性為資料來源，如下所示：ListBox1.DataSource = names

• 最後一個步驟：執行 DataBind 方法，如下所示：ListBox1.DataBind()

11-1-3 DataReader 物件的資料來源

• DataBinding 的資料來源也可以是資料庫的 DataReader 物件，如下所示：DropDown1.DataSource = _

objCmd.ExecuteReader(CommandBehavior.CloseConnection)

DropDown1.DataTextField = "name"

DropDown1.DataBind()

• DataTextField 屬性的 name 欄位就是 ListItem控制項的 Text 屬性值，如下所示：Label1.Text = “選擇的使用者 : ” & _

DropDown1.SelectedItem.Text

11-1-4 DataSet 物件的資料來源• DataSet 物件則是使用 DataView 物件，

如下所示：objDataAdapter.Fill(objDataSet, "Users")

RadioButton1.DataSource = _

objDataSet.Tables("Users").DefaultView

RadioButton1.DataTextField = "name"

RadioButton1.DataBind()

11-2 Repeater 控制項• 11-2-1 Repeater 控制項以表格顯

示資料表• 11-2-2 Null 值欄位處理與

ItemIndex 屬性

11-2 Repeater 控制項 - 基本語法

• Repeater 控制項是使用清單顯示資料，能夠讓使用者定義 Template 範本標籤（內含 HTML 標籤）， Repeater 控制項自動以範本標籤的項目如同迴路一般重複編排資料來源的資料，其基本語法如下所示：<asp:Repeater id="objRepeater" runat="Server"> <HeaderTemplate> </HeaderTemplate> <ItemTemplate> </ItemTemplate> <AlternatingItemTemplate> </AlternatingItemTemplate> <FooterTemplate> </FooterTemplate></asp:Repeater>

11-2 Repeater 控制項 -Template 標籤

Template範本標籤 說明

ItemTemplate 定義清單的項目，也就是重複顯示的部分，以資料表來說

就是每一筆記錄，這是 Repeater控制項的必需標籤

AlternatingItemTemplate 如果想每個項目交叉使用不同的樣式，例如：資料表的記

錄輪流使用不同色彩顯示，就可以定義此標籤，在奇數項

目（以 0 開始）使用此範本顯示，偶數是使用ItemTemplate範本

SeparatorTemplate 如果在各項目間需要分隔，可以在此標籤定義，通常是使

用 HTML標籤的<br>或<hr>，如果沒有定義就不顯示

HeaderTemplate 定義清單的標題，以資料表的表格來說，就是開頭標籤<table>和記錄的標題列，如果沒有定義就不顯示

FooterTemplate 定義清單的註腳，以資料表的表格來說，就是結尾標籤</table>，如果沒有定義就不顯示

11-2-1 Repeater 控制項以表格顯示資料表 - 建立 Data Binding• Repeater 控制項是以清單方式顯示資料，其功能

如同 VB.NET的 For 迴路，換句話說，只需配合HTML 表格標籤，就可以使用 Data Binding 技術，在 Repeater 控制項以表格顯示資料表的記錄。

• 首先需要建立 Repeater 控制項的 Data Binding ，其資料來源是 Users 資料表的 DataReader 物件，如下所示：objRepeater.DataSource = objCmd.ExecuteReader()

objRepeater.DataBind()

11-2-1 Repeater 控制項以表格顯示資料表 -Template 範本標

籤Template範本標籤 表格標籤

ItemTemplate<tr> <td><%# Container.DataItem("ProductNo")%></td> <td><%# Container.DataItem("ProductName")%></td> <td><%# Container.DataItem("ProductPrice")%></td></tr>

AlternatingItemTemplate<tr bgcolor="lightyellow"> <td><%# Container.DataItem("ProductNo")%></td> <td><%# Container.DataItem("ProductName")%></td> <td><%# Container.DataItem("ProductPrice")%></td></tr>

HeaderTemplate<table border=1 cellspacing=0 cellpadding=5> <tr bgcolor="FFCC99"> <td>書號</td><td>書名</td><td>書價</td>

</tr>

FooterTemplate</table>

11-2-2 Null 值欄位處理與ItemIndex 屬性

• 建立 showNull 函數檢查欄位值，如下：Function showNull(value As String ) As String If value = "" Then return "[N/A]" Else return value End IfEnd Function

• RepaterItem 物件的 ItemIndex 屬性顯示清單項目的編號，如下所示：<%# Container.ItemIndex + 1 %>

11-3 DataList 控制項• 11-3-1 DataList 控制項的選取功能• 11-3-2 DataList 控制項的編輯功能

11-3-1 DataList 控制項的選取功能 - 標籤語法

• DataList 控制項的 SelectedItemTemplate 範本標籤提供選取功能，例如： DataList 控制項 Data Binding 的資料來源是 DataReader 物件，如下：<asp:DataList id="DataList1" runat="Server" HeaderStyle-BackColor="#CC99FF" SelectedItemStyle-BackColor="#6666FF" SelectedItemStyle-ForeColor="#FFFFFF" Gridlines = "both" RepeatLayout = "table" RepeatColumns = "3" RepeatDirection = "vertical" DataKeyField = "ProductNo" OnItemCommand="DataList_ItemCommand"> ………………</asp:DataList>

11-3-1 DataList 控制項的選取功能 - 樣式屬性

• 樣式屬性是用來設定控制項的外觀，各屬性對應 Template 範本標籤，常用的樣式屬性，如下：屬性 說明

HeadStyle 設定控制項 HeadTemplate標籤的樣式

AlternatingItemStyle 設定控制項 AlternativeItemTemplate標籤的樣式

EditItemStyle 設定控制項 EditItemTemplate標籤的樣式

FooterStyle 設定控制項 FooterTemplate標籤的樣式

ItemStyle 設定控制項 ItemTemplate標籤的樣式

SelectedItemStyle 設定控制項 SelectedItemTemplate標籤的樣式

SeparatorStyle 設定控制項 SeparatorTemplate標籤的樣式

11-3-1 DataList 控制項的選取功能 -Repeat 屬性

• DataList 控制項預設以表格方式顯示， Repeat屬性可以設定表格欄數、方向和版面配置，如下：

屬性 說明

RepeatColumns 設定 DataList控制項的表格是分成幾欄顯示

RepeatDirection 設定 DataList控制項顯示的方向是 Vertical（垂直）或 Horizontal

（水平）

RepeatLayout 設定 DataList 控制項的顯示方式版面配置為 Table（表格）或Flow（水流，即一直線）

11-3-1 DataList 控制項的選取功能 -ItemCommand 事件屬性

• 屬性 OnItemCommand 可以設定此事件的處理程序，如下所示：

• 在DataList 控制項 ItemTemplate 標籤按下 LinkButton 控制項產生 ItemCommand 事件，如下所示：<ItemTemplate> <asp:LinkButton id="b1" runat="Server" Text= '<%# Container.DataItem("ProductNo") %>' CommandName="select"/></ItemTemplate>

屬性 說明

OnItemCommand 設定 ItemCommand事件的處理程式序名稱

11-3-1 DataList 控制項的選取功能 -SelectedItemTemplate 標

籤• DataList 控制項的 SelectedIndex 屬性設定 DataList

控制項選擇的項目。• 當再次執行 Data Binding 後，選取項目不是顯示

ItemTemplate 標籤的內容，而是顯示SelectedItemTemplate 標籤的內容，也就是產品的詳細資料，如下所示：<SelecteditemTemplate>

<%# Container.DataItem("ProductNo")%><br>

<%# Container.DataItem("ProductName")%><br>

<%# Container.DataItem("ProductPrice")%><br>

</SelectedItemTemplate>

11-3-1 DataList 控制項的選取功能 - 其它屬性

屬性 說明

DataKeyField 設定資料來源使用的主索引欄位，我們可以使用此欄位值

取得資料來源的其它欄位

GuidLine 如果 RepeatLayout 屬性是 Table，此屬性可以設定框線的顯

示方式，屬性值 None 是沒有框線、Horizontal 只顯示水平

框線、Vertical顯示垂直框線和 Both顯示水平和垂直框線

HorizontalAlign 設定控制項內資料的水平對齊方式，可以是 Left、Center和

Right

11-3-2 DataList 控制項的編輯功能 - 標籤語法

• EditItemTemplate 標籤，可以在 DataList 控制項建立編輯功能， DataList 控制項標籤，如下所示：<asp:DataList id="DataList1" …………………… RepeatColumns="4" RepeatDirection="horizontal" DataKeyField="ProductNo" OnEditCommand="editBook" OnDeleteCommand="deleteBook" OnUpdateCommand="updateBook" OnCancelCommand="cancelEdit" runat="Server">……………………</asp:DataList>

11-3-2 DataList 控制項的編輯功能 - 事件屬性

事件屬性 處理程序名稱 CommandName屬性值

OnEditCommand editBook edit

OnDeleteCommand deleteBook delete

OnUpdateCommand updataBook update

OnCancelCommand cancelEdit cancel

11-3-2 DataList 控制項的編輯功能 - EdittemTemplate 標籤

• EdittemTemplate 標籤的內容，如下所示：<EditItemTemplate> <%# Container.DataItem("ProductNo")%><br> <b>書名 : </b><asp:TextBox id="name" text='<%# Container.DataItem("ProductName") %>' runat="Server"/><br> <b>書價 : </b><asp:TextBox id="price" text='<%# Container.DataItem("ProductPrice") %>'

runat="Server"/><br> <asp:Button Text="更新 " CommandName="update"

runat="Server"/> <asp:Button Text="刪除 " CommandName="delete" runat="Server"/> <asp:Button Text="取消 " CommandName="cancel"

runat="Server"/></EditItemTemplate>

11-4 DataGrid 控制項• 11-4-1 DataGrid 控制項的基本使用• 11-4-2 DataGrid 控制項的 Column 控

制項• 11-4-3 DataGrid 控制項的排序• 11-4-4 DataGrid 控制項的分頁顯示• 11-4-5 DataGrid 控制項的編輯功能• 11-4-6 在 DataGrid 控制項使用驗證

控制項

11-4-1 DataGrid 控制項的基本使用

• DataGrid 控制項只需建立好 Data Binding ，不需要設定屬性，就可以使用預設的表格樣式顯示資料表記錄，如下所示：<asp:DataGrid

id="DataGrid1"

HeaderStyle-BackColor="#CC99FF"

runat="Server"/>

11-4-2 DataGrid 控制項的Column 控制項 - 語法

• DataGrid 控制項和 DataList 控制項預設都是以表格顯示資料，使用 Column 控制項建立表格欄位的顯示，如下所示：<asp:DataGrid id="DataGrid1" AutoGenerateColumns="False" OnItemCommand="booksCommand" runat="Server"> <Columns> <asp:ButtonColumn /> ………………… <asp:BoundColumn /> ………………… </Columns></asp:DataGrid>

11-4-2 DataGrid 控制項的Column 控制項 -Column 控制項

Column控制項 說明

BoundColumn 顯示資料來源的欄位資料，將欄位視為文字內容顯示，

這是 DataGrid控制項預設使用的 Column控制項

ButtonColumn 顯示 Button 控制項的按鈕，使用者可以新增整欄的按鈕

控制項，例如：刪除、顯示和隱藏記錄等按鈕

EditCommandColumn 顯示編輯功能欄位，內含編輯功能的 Button 控制項，按

一下就可以編輯記錄的欄位

HyperLinkColumn 顯示超連結功能的欄位

TemplateColumn 使用 Template範本標籤自行定義欄位

11-4-3 DataGrid 控制項的排序• DataGrid 控制項的 AllowSorting 屬性能夠啟動控制項的排序

功能， DataGrid 控制項的標籤，如下所示：<asp:DataGrid id="DataGrid1"

……………

AutoGenerateColumns="False"

OnSortCommand="DataGridSort"

AllowSorting="True"

runat="Server">• 排序的欄位需要設定 SortExpression 屬性，如下所示：

<asp:BoundColumn HeaderText=" 書名 " DataField="ProductName"

SortExpression="ProductName"/>

11-4-4 DataGrid 控制項的分頁顯示

• DataGrid 控制項建立好資料表的 Data Binding 後，我們需要設定分頁屬性 AllowPaging ，如下所示：<asp:DataGrid id="DataGrid1" Width="550px"

………………

PageSize="3"

PagerStyle-Mode="NumericPages"

PagerStyle-HorizontalAlign="Right"

OnPageIndexChanged="DataGridPage"

AllowPaging="True"

runat="Server"/>

11-4-5 DataGrid 控制項的編輯功能

• DatGrid 控制項標籤需要將 AutoGenerateColumns 屬性設為 False ，以便使用 EditCommandColumn 控制項，如下所示：<asp:DataGrid id="DataGrid1" ……………… AutoGenerateColumns="False" DataKeyField="ProductNo" OnEditCommand="editBook" OnCancelCommand="cancelEdit" OnUpdateCommand="updateBook" OnDeleteCommand="deleteBook" runat="Server">

11-4-6 在 DataGrid 控制項使用驗證控制項

• DataGrid 控制項的編輯功能十分好用，不過並沒有辦法使用驗證控制項進行資料輸入的驗證，此時可以使用 TemplateColumn 控制項自行定義 TextBox 控制項的資料輸入欄位，如下所示：<asp:TemplateColumn HeaderText=" 書名 ">

<ItemTemplate> </ItemTemplate>

<EditItemTemplate> </EditItemTemplate>

</asp:TemplateColumn>