1 / 31

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

第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 物件的資料來源.

yves
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

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

  5. 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()

  6. 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

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

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

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

  10. 11-2 Repeater控制項-Template標籤

  11. 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()

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

  13. 11-2-2 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屬性顯示清單項目的編號，如下所示： <%# Container.ItemIndex + 1 %>

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

  15. 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>

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

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

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

  19. 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>

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

  21. 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>

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

  23. 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>

  24. 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控制項使用驗證控制項

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

  26. 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>

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

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

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

  30. 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">

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

More Related