第 11 章 網頁資料庫的資料顯示 11-1 ASP.NET 控制項與 Data Binding 11-2 Repeater 控制項 11-3 DataList 控制項 11-4 DataGrid 控制項

11-1 ASP.NET 控制項與 Data Binding 什麼是 Data Binding 資料連結 ArrayList 物件的資料來源 DataReader 物件的資料來源 DataSet 物件的資料來源

什麼是 Data Binding 資料 連結 - 伺服端 Data Binding 伺服端 Data Binding 擁有高擴充性、可重複使用 和容易維護的特點。 ASP.NET 的 Data Binding 是.NET Framework 的 Data Binding 技術，是指將控制項的屬性連結到 任何可用的「資料」（ Data ）。 在此的資料可以是單純資料、物件屬性，控制 項名稱的物件集合等，.NET Framework 將這些 資料視為類別的屬性來存取。

什麼是 Data Binding 資料 連結 -ASP.NET 控制項 ASP.NET 控制項擁有 DataSource 屬性的控制項才支援 Data Binding ，如下表所示：

ArrayList 物件的資料來 源 第一步驟：建立資料來源，如下所示： Dim names As ArrayList= New ArrayList() names.Add (" 陳會安 ") names.Add (" 江小魚 ") names.Add (" 張無忌 ") names.Add (" 楊過 ") 第二個步驟：指定 DataSource 屬性為資料來源， 如下所示： ListBox1.DataSource = names 最後一個步驟：執行 DataBind 方法，如下所示： ListBox1.DataBind()

DataReader 物件的資料 來源 DataBinding 的資料來源也可以是資料庫 的 DataReader 物件，如下所示： DropDown1.DataSource = _ objCmd.ExecuteReader(CommandBehavior.CloseConnection) DropDown1.DataTextField = "name" DropDown1.DataBind() DataTextField 屬性的 name 欄位就是 ListItem 控制 項的 Text 屬性值，如下所示： Label1.Text = “ 選擇的使用者 : ” & _ DropDown1.SelectedItem.Text

DataSet 物件的資料來源 DataSet 物件則是使用 DataView 物件，如 下所示： objDataAdapter.Fill(objDataSet, "Users") RadioButton1.DataSource = _ objDataSet.Tables("Users").DefaultView RadioButton1.DataTextField = "name" RadioButton1.DataBind()

11-2 Repeater 控制項 Repeater 控制項以表格顯 示資料表 Null 值欄位處理與 ItemIndex 屬性

11-2 Repeater 控制項 - 基本語法 Repeater 控制項是使用清單顯示資料，能夠讓 使用者定義 Template 範本標籤（內含 HTML 標 籤）， Repeater 控制項自動以範本標籤的項目 如同迴路一般重複編排資料來源的資料，其基 本語法如下所示：

11-2 Repeater 控制項 - Template 標籤

Repeater 控制項以表格顯 示資料表 - 建立 Data Binding Repeater 控制項是以清單方式顯示資料，其功 能如同 VB.NET 的 For 迴路，換句話說，只需配 合 HTML 表格標籤，就可以使用 Data Binding 技 術，在 Repeater 控制項以表格顯示資料表的記 錄。 首先需要建立 Repeater 控制項的 Data Binding ， 其資料來源是 Users 資料表的 DataReader 物件， 如下所示： objRepeater.DataSource = objCmd.ExecuteReader() objRepeater.DataBind()

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

Null 值欄位處理與 ItemIndex 屬性 建立 showNull 函數檢查欄位值，如下： Function showNull(value As String ) As String If value = "" Then return "[N/A]" Else return value End If End Function RepaterItem 物件的 ItemIndex 屬性顯示清 單項目的編號，如下所示：

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

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"> ………………

DataList 控制項的選取功 能 - 樣式屬性 樣式屬性是用來設定控制項的外觀，各屬性對 應 Template 範本標籤，常用的樣式屬性，如下：

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

DataList 控制項的選取功 能 -ItemCommand 事件屬性 屬性 OnItemCommand 可以設定此事件的處理程序，如 下所示： 在 DataList 控制項 ItemTemplate 標籤按下 LinkButton 控制 項產生 ItemCommand 事件，如下所示： <asp:LinkButton id="b1" runat="Server" Text= ' ' CommandName="select"/>

DataList 控制項的選取功 能 -SelectedItemTemplate 標籤 DataList 控制項的 SelectedIndex 屬性設定 DataList 控制項選擇的項目。 當再次執行 Data Binding 後，選取項目不是顯示 ItemTemplate 標籤的內容，而是顯示 SelectedItemTemplate 標籤的內容，也就是產品 的詳細資料，如下所示：

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

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

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

DataList 控制項的編輯功 能 - EdittemTemplate 標籤 EdittemTemplate 標籤的內容，如下所示： 書名 : <asp:TextBox id="name" text=' ' runat="Server"/> 書價 : <asp:TextBox id="price" text=' ' runat="Server"/>

11-4 DataGrid 控制項 DataGrid 控制項的基本使用 DataGrid 控制項的 Column 控制項 DataGrid 控制項的排序 DataGrid 控制項的分頁顯示 DataGrid 控制項的編輯功能 在 DataGrid 控制項使用驗證 控制項

DataGrid 控制項的基本 使用 DataGrid 控制項只需建立好 Data Binding ， 不需要設定屬性，就可以使用預設的表 格樣式顯示資料表記錄，如下所示： <asp:DataGrid id="DataGrid1" HeaderStyle-BackColor="#CC99FF" runat="Server"/>

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

DataGrid 控制項的 Column 控制項 -Column 控制項

DataGrid 控制項的排序 DataGrid 控制項的 AllowSorting 屬性能夠啟動控制項的 排序功能， DataGrid 控制項的標籤，如下所示： <asp:DataGrid id="DataGrid1" …………… AutoGenerateColumns="False" OnSortCommand="DataGridSort" AllowSorting="True" runat="Server"> 排序的欄位需要設定 SortExpression 屬性，如下所示： <asp:BoundColumn HeaderText=" 書名 " DataField="ProductName" SortExpression="ProductName"/>

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"/>

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

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