第10章 網頁資料庫顯示與維護控制項 10-1 資料來源控制項 10-2 Repeater控制項 10-3 DataList控制項

Presentation on theme: "第10章 網頁資料庫顯示與維護控制項 10-1 資料來源控制項 10-2 Repeater控制項 10-3 DataList控制項"— Presentation transcript:

1 第10章 網頁資料庫顯示與維護控制項 10-1 資料來源控制項 10-2 Repeater控制項 10-3 DataList控制項
10-4 GridView控制項 10-5 DetailsView控制項 10-6 FormView控制項 10-7 建立主要與詳細表單

2 10-1 資料來源控制項 資料來源控制項的基礎 建立資料來源控制項

3 資料來源控制項的基礎-說明 在ASP.NET 1.0/1.1版存取資料庫需要使用ADO.NET物件，以程式碼連結、開啟、操作和顯示資料表的記錄資料。 ASP.NET 2.0版提供全新的資料來源控制項，可以將程式碼封裝成伺服端控制項，只需在控制項宣告資料來源，就可以存取資料表的記錄資料。

4 資料來源控制項的基礎-種類 SqlDataSource控制項：存取關聯式資料庫的資料來源。可以是SQL Server，Access和Oracle等，如果使用SQL Server，控制項自動使用SqlClient類別來最隹化資料庫存取。 AccessDataSource控制項：存取微軟Access資料庫，屬於SqlDataSource控制項的特別版本。 ObjectDataSource控制項：存取商業物件的資料來源，可以在多層架構中，存取中間層的資料來源。 XmlDataSource控制項：存取XML文件的資料來源。 SiteMapDataSource控制項：建立網站地圖的唯讀資料來源，詳細說明請參閱第12章。

5 10-1-2 建立資料來源控制項-AccessDataSource控制項
AccessDataSource控制項宣告的資料來源，可以存取Access資料庫檔案，如下所示： <asp:AccessDataSource Id="Users" Runat="server" DataFile="~/Users.mdb" SelectCommand="SELECT * FROM Users"/>

6 10-1-2 建立資料來源控制項-SqlDataSource控制項
SqlDataSource控制項可以存取關聯式資料庫，我們需要提供ProvideName和ConnectionString來建立資料庫連結，如下所示： <asp:SqlDataSource Id="Users" Runat="server" ProviderName="System.Data.OleDb" SelectCommand="SELECT * FROM Users"/>

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

8 10-2 Repeater控制項-標籤 Repeater控制項使用清單方式來顯示資料，能夠讓使用者定義Template範本標籤，自動以範本標籤的項目，如同迴路般重複編排資料來源的資料，其基本語法如下所示： <asp:Repeater Id="repeater" Runat="server"> <HeaderTemplate> </HeaderTemplate> <ItemTemplate> </ItemTemplate> <AlternatingItemTemplate> </AlternatingItemTemplate> <FooterTemplate> </FooterTemplate> </asp:Repeater>

9 10-2 Repeater控制項-範本標籤

10 10-2-1 Repeater控制項以表格顯示資料表-新增資料來源控制項
Repeater控制項的功能如同Visual Basic的For/Next迴路，換句話說，配合HTML表格標籤和資料來源控制項，就可以使用表格來顯示資料表的記錄資料。 首先新增資料來源控制項為Products資料庫，如下所示： <asp:AccessDataSource Id="Products“ Runat="server" DataFile="~/Products.mdb" SelectCommand="SELECT * FROM Products"/>

11 10-2-1 Repeater控制項以表格顯示資料表-Template範本標籤內容
在Template範本標籤內容的HTML表格標籤，如下表所示：

12 10-2-2 Null值欄位處理與ItemIndex屬性-1
記錄欄位值如果是空值Null，顯示的儲存格資料是空字串。為了讓儲存格擁有值，例如：N/A或"沒有值"等字串。我們可以建立showNull()函數來檢查欄位值，如下所示： Function showNull(value As String ) As String If value = "" Then Return "[N/A]" Else Return value End If End Function Repeater控制項的運算式只需要改成函數，如下所示： <%# showNull(Eval("ProductName").ToString())%>

13 10-2-2 Null值欄位處理與ItemIndex屬性-2
程式範例的Repeater控制項是使用清單項目來顯示記錄資料，可以使用RepeaterItem物件的ItemIndex屬性顯示清單項目編號，如下所示： <%# Container.ItemIndex + 1 %> 上述程式碼因為ItemIndex值是從0開始，所以加1顯示。

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

15 10-3 DataList控制項 DataList控制項預設使用表格方式來顯示資料，其使用方式和Repeater控制項相似，也是使用範本標籤。 不過，DataList控制項新增SelectedItemTemplate和EditItemTemplate範本標籤，可以支援選取和編輯功能。

16 10-3-1 DataList控制項的選取功能-標籤
<asp:DataList Id="datalist" Runat="server" DataSourceID="Products" HeaderStyle-BackColor="#CC99FF" SelectedItemStyle-BackColor="#6666FF" SelectedItemStyle-ForeColor="#FFFFFF" Gridlines = "both" RepeatLayout = "table" RepeatColumns = "3" RepeatDirection = "vertical" DataKeyField = "ProductNo" OnItemCommand="DataList_ItemCommand"> ……… </asp:DataList>

17 10-3-1 DataList控制項的選取功能-樣式屬性
樣式屬性可以設定控制項外觀，屬性對應Template範本標籤。常用的樣式屬性，如下表所示：

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

19 10-3-1 DataList控制項的選取功能-ItemCommand屬性與SelectedItemTemplate標籤1
當在DataList控制項的ItemTemplate標籤按下LinkButton控制項，就可以產生ItemCommand事件。在LinkButton控制項是使用CommandName屬性設定傳遞的命令名稱，如下所示： <ItemTemplate> <asp:LinkButton Id="link" Runat="server“ Text='<%# Eval("ProductNo") %>‘ CommandName="select"/> <br> </ItemTemplate>

20 10-3-1 DataList控制項的選取功能-ItemCommand屬性與SelectedItemTemplate標籤2
當產生ItemCommand事件後，就執行OnItemCommand屬性指定的處理程序，其程式碼如下所示： Sub DataList_ItemCommand(Sender As object, _ E As DataListCommandEventArgs) datalist.SelectedIndex = E.Item.ItemIndex label.Text="DataKeyField: "& _ datalist.DataKeys.Item( E.Item.ItemIndex) & _ "(" & E.Item.ItemIndex & ")" datalist.DataBind() End Sub

21 10-3-1 DataList控制項的選取功能-DataKeys與SelectedIndex屬性1
DataList控制項的DataKeys屬性可以取得DataKeyCollection集合物件，配合Item屬性取得指定索引編號（參數）的記錄（也就是指定項目），取得值是記錄中的DataKeyField屬性（在後面會說明此DataList控制項屬性）的欄位值。

22 10-3-1 DataList控制項的選取功能-DataKeys與SelectedIndex屬性2
DataList控制項的SelectedIndex屬性可以設定DataList控制項的選擇項目，當再次執行資料來源控制項的DataBind()方法重建資料繫結後，因為DataList控制項已經指定SelectedIndex屬性，所以選取項目不是顯示ItemTemplate標籤內容，而是顯示SelectedItemTemplate標籤的產品詳細資料，如下所示： <SelecteditemTemplate> <%# Eval("ProductNo")%><br> <%# Eval("ProductName")%><br> <%# Eval("ProductPrice")%><br> </SelectedItemTemplate>

23 10-3-1 DataList控制項的選取功能-其他屬性

24 10-3-2 DataList控制項的編輯功能-標籤
DataList控制項提供EditItemTemplate標籤的編輯功能。DataList控制項標籤，如下所示： <asp:DataList Id="datalist" Runat="server" DataSourceID="Products" ……… DataKeyField="ProductNo" OnEditCommand="editBook" OnDeleteCommand="deleteBook" OnUpdateCommand="updateBook" OnCancelCommand="cancelEdit"> …………………… </asp:DataList>

25 10-3-2 DataList控制項的編輯功能-事件屬性
EditCommand、DeleteCommand、UpdateCommand和CancelCommand事件的屬性，如下表所示：

26 10-3-2 DataList控制項的編輯功能-產生事件
在ItemTemplate的LinkButton控制項需要指定CommandName屬性為edit來顯示DataList控制項的編輯功能，如下所示： <ItemTemplate> <asp:LinkButton Text='<%# Eval("ProductNo")%>‘ CommandName="edit" Runat="server"/> </ItemTemplate> 當使用者按下超連結控制項，就可以產生EditCommand事件。

27 10-3-2 DataList控制項的編輯功能-事件處理程序
事件處理程序為editBook()，如下所示： Sub editBook(Sender As object, _ E As DataListCommandEventArgs) datalist.EditItemIndex = E.Item.ItemIndex datalist.DataBind() End Sub 程序傳入DataListCommandEventArgs物件E的參數，可以使用Item屬性取得按下項目的索引編號，也就是ItemIndex屬性的值。

28 10-3-2 DataList控制項的編輯功能-EditItemTemplate標籤
<%# Eval("ProductNo")%><br> <b>書名: </b><asp:TextBox Id="name“ Runat="server" Text='<%# Eval("ProductName") %>'/><br> <b>書價: </b><asp:TextBox Id="price“ Text='<%# Eval("ProductPrice") %>'/><br> <asp:Button Text="更新“ CommandName="update" Runat="server"/> <asp:Button Text="刪除" CommandName="delete" Runat="server"/> <asp:Button Text="取消“ CommandName="cancel" Runat="server"/> </EditItemTemplate>

29 10-3-2 DataList控制項的編輯功能-編輯功能的事件處理程序1
編輯功能可以使用資料來源控制項的屬性指定SQL指令，在指定SQL指令後，可以分別呼叫Insert()、Update()和Delete()方法來新增、更新和刪除記錄資料。如下表所示：

30 10-3-2 DataList控制項的編輯功能-編輯功能的事件處理程序2
取得更新資料name和price的TextBox控制項後。接著可以建立SQL指令，如下所示： strSQL="UPDATE Products SET " strSQL=strSQL &"ProductName='"&name.Text &"'," strSQL=strSQL & "ProductPrice=" & price.Text strSQL=strSQL & " WHERE ProductNo='" & no & "'" Products.UpdateCommand = strSQL Products.Update() 上述程式碼建立SQL指令後，使用UpdateCommand屬性指定更新的SQL指令，最後呼叫Update()方法來更新記錄資料。

31 10-4 GridView控制項 10-4-1 GridView控制項的基礎 10-4-2 GridView控制項的Field欄位控制項

32 10-4 GridView控制項 GridView是ASP.NET 2.0版新增的控制項，它是DataGrid控制項的新版本，可以使用表格方式來顯示、分頁、排序和建立複雜資料表的顯示和編輯功能。

33 GridView控制項的基礎 在GridView控制項指定使用的資料來源控制項，就可以使用預設表格樣式來顯示資料表記錄，如下所示： <asp:AccessDataSource Id="Products" Runat="server" DataFile="~/Products.mdb" SelectCommand="SELECT * FROM Products"/> <asp:GridView Id="grid" DataSourceID="Products" HeaderStyle-BackColor="#CC99FF" Runat="server"/>

34 10-4-2 GridView控制項的Field欄位控制項-說明
我們可以將AutoGenerateColumns屬性設為False，然後在<Columns>標籤區段新增Field欄位控制項，如下所示： <asp:GridView Id="grid" AutoGenerateColumns="False" OnRowCommand="booksCommand" Runat="server"> <Columns> <asp:ButtonField /> <asp:BoundField /> ………………… </Columns> </asp:GridView>

35 10-4-2 GridView控制項的Field欄位控制項-欄位控制項
在GridView控制項的<Columns>標籤區段，可以定義Field欄位控制項，如下表所示：

36 10-4-3 GridView控制項的排序-開啟排序功能
在GridView控制項的AllowSorting屬性，可以啟動控制項的自動排序功能，如下所示： <asp:GridView Id="grid" Runat="server" ……… AutoGenerateColumns="False" OnSorting="GridViewSorting" OnSorted="GridViewSorted" AllowSorting="True"> </asp:GridView> 上述AllowSorting屬性為True，GridView控制項自動在標題列顯示排序超連結。

37 10-4-3 GridView控制項的排序-設定排序欄位
在支援排序的欄位設定SortExpression屬性，如下所示： <asp:BoundField HeaderText="書名" DataField="ProductName" SortExpression="ProductName"/> 上述SortExpression屬性設定排序欄位和運算式，屬性值可以配合OnSorting和OnSorted屬性的事件處理程序來顯示排序的資訊。

38 10-4-4 GridView控制項的分頁顯示-開啟分頁功能
<asp:GridView Id="grid" Width="550px" Runat="server" ……… AllowPaging="True" PageSize="3" PagerSettings-Position="TopAndBottom" PagerSettings-Mode="NextPreviousFirstLast" PagerSettings-FirstPageText="第一頁" ………. PagerSettings-LastPageText="最後一頁" PagerStyle-HorizontalAlign="Center" PagerStyle-BackColor="#E0E0E0" OnDataBound="GridViewDataBound“ OnPageIndexChanged="GridViewIndexChanged"/>

39 10-4-4 GridView控制項的分頁顯示-PagerSettings分頁設定屬性

40 10-4-4 GridView控制項的分頁顯示-分頁事件與事件處理程序

41 10-4-5 GridView控制項的編輯功能-基本編輯功能1
在GridView控制項將AutoGenerate???Button屬性設為True，就可以啟用編輯功能，如下所示： <asp:GridView Id="grid" Width="550px" AutoGenerateEditButton="True" AutoGenerateDeleteButton="True" DataKeyNames="ProductNo" DataSourceID="Products" BorderColor="black" ………/> 上述GridView控制項使用DataKeyNames屬性指定主鍵是ProductNo ，並且自動產生編輯和刪除按鈕 。

42 10-4-5 GridView控制項的編輯功能-基本編輯功能2
在資來源控制項新增UpdateCommand和DeleteCommand屬性的SQL指令，如下所示： <asp:AccessDataSource Id="Products" Runat="server" DataFile="~/Products.mdb" SelectCommand="SELECT ProductNo, ProductName, ProductPrice FROM Products" UpdateCommand="Update Products SET WHERE DeleteCommand="DELETE From Products WHERE

43 10-4-5 GridView控制項的編輯功能-TemplateField控制項(說明)
GridView控制項的TemplateField控制項不同於BoundField和HyperLinkField控制項，只能顯示資料來源的欄位。TemplateField可以自行使用範本來設計顯示欄位。 換句話說，我們可以使用它來自行定義資料輸入欄位，以編輯功能來說，主要是使用ItemTemplate和EditItemTemplate範本標籤。

44 10-4-5 GridView控制項的編輯功能-TemplateField控制項(編輯欄位的控制項)
<asp:TemplateField HeaderText="書名"> <ItemTemplate> <asp:Label Text='<%# Eval("ProductName")%>' Runat="server"/> </ItemTemplate> <EditItemTemplate> <asp:TextBox Id="name" Width="200px“ Text='<%# Bind("ProductName")%>‘ </EditItemTemplate> </asp:TemplateField>

45 10-4-5 GridView控制項的編輯功能-TemplateField控制項(啟用編輯功能)
在GridView控制項標籤需要將AutoGenerateColumns和AutoGenerate???Button屬性都設為False，以便使用TemplateField控制項，如下所示： <asp:GridView Id="grid" Width="550px" AutoGenerateColumns="False" AutoGenerateEditButton="False" AutoGenerateDeleteButton="False" ……… EditRowStyle-BackColor="Yellow" AllowPaging="True" PageSize="3" Runat="server">

46 10-4-5 GridView控制項的編輯功能-TemplateField控制項(建立編輯按鈕)
<asp:TemplateField HeaderText="編輯"> <ItemTemplate> <asp:Button Text="編輯" CommandName="Edit" Runat="server"/> </ItemTemplate> <EditItemTemplate> <asp:Button Text="更新" CommandName="Update" <asp:Button Text="取消" CommandName="Cancel" </EditItemTemplate> </asp:TemplateField>

47 10-4-5 GridView控制項的編輯功能-編輯事件與事件處理

48 10-5 DetailsView控制項 10-5-1 DetailsView控制項的基礎
DetailsView控制項Field控制項 DetailsView控制項的編輯功能

49 10-5 DetailsView控制項 DetailsView控制項是以單筆方式顯示資料來源的資料，一樣支援分頁和編輯功能，可以新增、刪除和更新記錄資料。

50 10-5-1 DetailsView控制項的基礎-標籤
<asp:AccessDataSource Id="Products" Runat="server" DataFile="~/Products.mdb" SelectCommand="SELECT ProductNo, ProductName, ProductPrice, InStock FROM Products"/> <asp:DetailsView Id="detail" Runat="server" DataSourceID="Products" HeaderText="圖書資訊" HeaderStyle-BackColor="#CC99FF" AllowPaging="True" PagerSettings-Position="Bottom" RowStyle-VerticalAlign="Top"/>

51 10-5-1 DetailsView控制項的基礎-圖例

52 10-5-2 DetailsView控制項Field控制項
<asp:DetailsView Id="detail" Runat="server" DataSourceID="Products" Width="350px" AutoGenerateRows="False" ………. RowStyle-VerticalAlign="Top"> <Fields> <asp:BoundField ………/> <asp:CheckBoxField …….../> <asp:ImageField ………/> </Fields> </asp:DetailsView>

53 10-5-3 DetailsView控制項的編輯功能-基本編輯功能1
DetailsView控制項的編輯功能可以自動建立，只需在資料來源控制項建立所需的SQL指令，如下所示： <asp:AccessDataSource Id="Products" Runat="server" DataFile="~/Products.mdb" SelectCommand="SELECT ProductNo, ProductName, ProductPrice, InStock FROM Products" UpdateCommand="UPDATE Products SET WHERE

54 10-5-3 DetailsView控制項的編輯功能-基本編輯功能2
DeleteCommand="DELETE From Products WHERE InsertCommand="INSERT INTO Products (ProductNo, ProductName, ProductPrice, Instock)

55 10-5-3 DetailsView控制項的編輯功能-基本編輯功能3
現在我們只需在DetailsView控制項開啟編輯功能，就可以使用上述SQL指令來編輯資料表的記錄資料，如下所示： <asp:DetailsView Id="detail" Runat="server" DataSourceID="Products" Width="300pt" ……… AutoGenerateEditButton="True" AutoGenerateDeleteButton="True" AutoGenerateInsertButton="True" DataKeyNames="ProductNo"/>

56 10-5-3 DetailsView控制項的編輯功能-CommandField控制項
CommandField控制項可以在DetailsView控制項建立所需樣式的編輯列，只需將AutoGenerate???Button屬性設為False，就可以在<Fields>標籤的欄位區段新增CommandField控制項，如下所示： <asp:CommandField ButtonType="Button" HeaderText="編輯" HeaderStyle-BackColor="#E0E0E0" HeaderStyle-Font-Bold="True" ItemStyle-BackColor="#E0E0E0" ShowHeader="True" ShowInsertButton="True" ShowEditButton="True" ShowDeleteButton="True"/>

57 10-5-3 DetailsView控制項的編輯功能-TemplateFiled控制項
<asp:TemplateField HeaderText="編輯"> <ItemTemplate> <asp:Button Text="新增" CommandName="New" Runat="server"/> ……… </ItemTemplate> <EditItemTemplate>…</EditItemTemplate> <InsertItemTemplate> <asp:Button Text="新增“ CommandName="Insert" Runat="server"/> <asp:Button Text="取消" CommandName="Cancel" Runat="server"/> </InsertItemTemplate> </asp:TemplateField>

58 10-5-3 DetailsView控制項的編輯功能-編輯事件與事件處理

59 10-6 FormView控制項-標籤 FormView控制項類似DetailsView控制項，也可以用來處理單筆記錄資料，只是改為使用DataList控制項的Template範本標籤來編排欄位，如下所示： <asp:FormView Id="form" Runat="server" DataSourceID="Products" AllowPaging="True" ……… HeaderStyle-HorizontalAlign="Center"> <HeaderTemplate> </HeaderTemplate> <ItemTemplate> </ItemTemplate> <FooterTemplate> </FooterTemplate> </asp:FormView>

60 10-6 FormView控制項-圖例

61 10-7 建立主要與詳細表單-說明 GridView和DetailsView控制項可以結合起來，建立主要與詳細表單（Master/Detail）。 在主要表單的GridView控制項顯示記錄清單，包含選取超連結欄，按一下，就可以在DetailsView顯示單筆記錄的詳細資料。

62 10-7 建立主要與詳細表單-圖例

63 10-7 建立主要與詳細表單- 主要表單的GridView控制項
<asp:AccessDataSource Id="MasterSource" Runat="server" DataFile="~/Products.mdb" SelectCommand="SELECT * FROM Products"/> <asp:GridView Id="master" Runat="server" DataSourceID="MasterSource" BorderColor="black" HeaderStyle-BackColor="#CC99FF" AutoGenerateColumns="False" AutoGenerateSelectButton="True" DataKeyNames="ProductNo" SelectedIndex="0"> <Columns> <asp:BoundField HeaderText="書號" DataField="ProductNo"/> </Columns> </asp:GridView>

64 10-7 建立主要與詳細表單- 詳細表單的DetailsView控制項
<asp:AccessDataSource Id="DetailSource" Runat="server" DataFile="~/Products.mdb" SelectCommand="SELECT * FROM Products WHERE <SelectParameters> <asp:ControlParameter Name="ProductNo" ControlID="master" PropertyName="SelectedValue"/> </SelectParameters> </asp:AccessDataSource> <asp:DetailsView Id="detail" Runat="server" DataSourceID="DetailSource" Width="350px" ………> ……… </asp:DetailsView>