使用 ObjectDataSource 顯示資料 (VB)

作者：Scott Mitchell

下載 PDF

本教學介紹 ObjectDataSource 控件 使用此控件，您可以綁定從上一教學中建立的 BLL 擷取的資料，而無需編寫一行程式碼！

簡介

應用程式架構和網站頁面佈局完成後，我們準備開始探索如何完成各種常見的資料和報告相關任務。 在前面的教學中，我們了解如何以程式設計方式將資料從 DAL 和 BLL 綁定到 ASP.NET 頁面中的資料 Web 控制項。 這種將資料 Web 控制項的 DataSource 屬性指派給要顯示的資料，然後呼叫控制項的方法的語法是 ASP.NET 1.x 應用程式中使用的模式，並且可以繼續在 2.0 應用程式中使用 DataBind()。 然而，ASP.NET 2.0 的新資料來源控制項提供了一種處理資料的聲明性方式。 使用這些控件，您可以綁定從上一教學課程中建立的 BLL 擷取的資料，而無需編寫一行程式碼！

ASP.NET 2.0 隨附了五個內建資料來源控制項：SqlDataSource、AccessDataSource、ObjectDataSource、XmlDataSource 和 SiteMapDataSource，但如果需要，您可以建立自己的自訂資料來源控制項。 由於我們已經為教學課程應用程式開發了一個體系結構，因此我們將針對 BLL 類別使用 ObjectDataSource。

ASP.NET 2.0 包括五個內建資料來源控件

圖 1：ASP.NET 2.0 包含五個內建資料來源控制項

ObjectDataSource 充當處理其他物件的代理程式。 為了設定 ObjectDataSource，我們指定這個底層物件以及它的方法如何對應到 ObjectDataSource 的 Select、Insert、Update 和 Delete 方法。 一旦指定了該底層物件並將其方法對應到 ObjectDataSource 的方法，我們就可以將 ObjectDataSource 綁定到資料 Web 控制項。 ASP.NET 附帶了許多資料 Web 控制項，包括 GridView、DetailsView、RadioButtonList 和 DropDownList 等。 在頁面生命週期中，資料 Web 控制項可能需要存取其綁定的資料，這將透過呼叫其 ObjectDataSource 的 Select 方法來完成；如果資料 Web 控制項支援插入、更新或刪除，則可以呼叫其 ObjectDataSource 的 Insert、Update 或 Delete 方法。 然後，這些呼叫由 ObjectDataSource 路由到適當的底層物件的方法，如下圖所示。

ObjectDataSource 充當代理

圖 2：ObjectDataSource 充當代理程式 (按一下查看大圖)

雖然 ObjectDataSource 可用於呼叫插入、更新或刪除資料的方法，但我們只專注於返回資料；未來的教學將探討如何使用 ObjectDataSource 和修改資料的資料 Web 控制項。

步驟 1： 新增和設定 ObjectDataSource 控件

首先開啟 BasicReporting 資料夾中的 SimpleDisplay.aspx 頁面，切換到設計檢視，然後將 ObjectDataSource 控制項從工具箱拖曳到頁面的設計圖面上。 ObjectDataSource 在設計圖面上顯示為灰色框，因為它不會產生任何標記；它只是透過呼叫指定物件的方法來存取資料。 ObjectDataSource 傳回的資料可以透過資料 Web 控制項（例如 GridView、DetailsView、FormView 等）顯示。

注意

或者，您可以先將資料 Web 控制項新增至頁面，然後從其智慧標記的下拉清單中選擇<新資料來源>選項。

若要指定 ObjectDataSource 的基礎物件以及該物件的方法如何對應到 ObjectDataSource 的方法，請按一下 ObjectDataSource 智慧標記中的「設定資料來源」連結。

點擊智慧標記中的設定資料來源鏈接

圖 3：點擊智慧標記中的設定資料來源連結 (點擊點選查看大圖)

這將開啟設定資料來源精靈。 首先，我們必須指定 ObjectDataSource 要使用的物件。 如果選取「僅顯示資料組件」複選框，則此畫面上的下拉清單將只列出那些已用 DataObject 屬性修飾的物件。 目前，我們的清單包括類別型化資料集中的 TableAdapter 以及我們在上一教學中建立的 BLL 類別。 如果您忘記將 DataObject 屬性新增至業務邏輯層類別，您將不會在此清單中看到它們。 在這種情況下，取消勾選「僅顯示資料元件」複選框以查看所有物件，其中應包括 BLL 類別 (以及類別型化資料集中的其他類別，例如 DataTable、DataRow 等)。

在第一個畫面中，從下拉清單中選擇 ProductsBLL 類別，然後按一下「下一步」。

指定要與 ObjectDataSource 控制項一起使用的物件

圖 4：指定要與 ObjectDataSource 控制項一起使用的物件 (按一下檢視全尺寸影像)

精靈中的下一個畫面將提示您選擇 ObjectDataSource 應呼叫的方法。 下拉清單列出了傳回從上一畫面選取的物件中的資料的方法。 在這裡我們看到 GetProductByProductID、GetProducts、GetProductsByCategoryID 和 GetProductsBySupplierID。 從下拉清單中選擇方法，然後按一下「完成」 (如果您將 GetProducts 方法新增至了上一教學中所示的方法 DataObjectMethodAttribute 中，則預設會選擇此選項ProductBLL)。

從 SELECT 索引標籤中選擇傳回資料的方法

圖 5：從 SELECT 標籤中選擇傳回資料的方法 (按一下查看全尺寸影像)

手動設定 ObjectDataSource

ObjectDataSource 的設定資料來源精靈提供了一種快速方法來指定它使用的物件並關聯調用該物件的哪些方法。 但是，您可以透過「屬性」視窗或直接在聲明性標記中透過其屬性來設定 ObjectDataSource。 只需將 TypeName 屬性設定為要使用的基礎物件的類別型，以及擷取資料時 SelectMethod 要呼叫的方法即可。

<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
    SelectMethod="GetProducts" TypeName="ProductsBLL">
</asp:ObjectDataSource>

即使您喜歡「設定資料來源」精靈，有時也可能需要手動設定 ObjectDataSource，因為該精靈僅列出開發人員建立的類別。 如果要將 ObjectDataSource 綁定到 .NET Framework 中的類別 (例如 Membership 類別) 以存取使用者帳戶訊息，或將 Directory 類別綁定到檔案系統訊息，則需要手動設定 ObjectDataSource 的屬性。

步驟 2：新增資料 Web 控制項並將其綁定到 ObjectDataSource

將 ObjectDataSource 新增至頁面並進行設定後，我們就可以將資料 Web 控制項新增至頁面以顯示 ObjectDataSource 的 Select 方法傳回的資料。 任何資料 Web 控制項都可以綁定到 ObjectDataSource；讓我們來看看如何在 GridView、DetailsView 和 FormView 中顯示 ObjectDataSource 的資料。

將 GridView 綁定到 ObjectDataSource

將 GridView 控制項從工具箱新增至 SimpleDisplay.aspx 的設計圖面。 從 GridView 的智慧標記中，選擇我們在步驟 1 中新增的 ObjectDataSource 控制項。 這將自動在 GridView 中為 ObjectDataSource Select 方法的資料傳回的每個屬性 (即由 Products DataTable 定義的屬性) 建立一個 BoundField。

GridView 已新增至頁面並綁定至 ObjectDataSource

圖 6：GridView 已新增至頁面並綁定至 ObjectDataSource (按一下檢視全尺寸影像)

然後，您可以透過點擊智慧標記中的「編輯列」選項來自訂、重新排列或刪除 GridView 的 BoundFields。

透過編輯列對話框管理 GridView 的 BoundFields

圖 7：透過「編輯列」對話方塊管理 GridView 的 BoundFields (點擊看大圖)

花點時間修改 GridView 的 BoundFields，刪除 ProductID、SupplierID、CategoryID、QuantityPerUnit、UnitsInStock、UnitsOnOrder 和 BoundFields ReorderLevel。 只需從左下角的清單中選擇 BoundField 並點擊刪除按鈕 (紅色 X) 即可將其刪除。 接下來，選擇這些 BoundField 並點擊向上箭頭，重新排列 BoundField，使 CategoryName 和 SupplierName BoundField 位於 UnitPrice BoundField 之前。 將其餘 BoundFields 的 Price 屬性分別設為 HeaderText、Products、Category 和 Supplier。 接下來，透過將 PriceBoundField 的 DataFormatString 屬性設為 False 並將 HtmlEncode 屬性設為 ，將 BoundField 格式化為貨幣 {0:c}。 最後，透過屬性將 Price 水平對齊到右側並將複選框水平居中。DiscontinuedItemStyle/HorizontalAlign

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1"
    EnableViewState="False">
    <Columns>
        <asp:BoundField DataField="ProductName"
          HeaderText="Product" SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName"
          HeaderText="Category" ReadOnly="True"
          SortExpression="CategoryName" />
        <asp:BoundField DataField="SupplierName"
          HeaderText="Supplier" ReadOnly="True"
          SortExpression="SupplierName" />
        <asp:BoundField DataField="UnitPrice"
          DataFormatString="{0:c}" HeaderText="Price"
            HtmlEncode="False" SortExpression="UnitPrice">
            <ItemStyle HorizontalAlign="Right" />
        </asp:BoundField>
        <asp:CheckBoxField DataField="Discontinued"
          HeaderText="Discontinued" SortExpression="Discontinued">
            <ItemStyle HorizontalAlign="Center" />
        </asp:CheckBoxField>
    </Columns>
</asp:GridView>

GridView 的 BoundFields 已自訂

圖 8：GridView 的 BoundFields 已自訂 (點擊可看大圖)

使用主題以獲得一致的外觀

這些教學課程力求刪除任何控制項樣式設置，而是盡可能使用在外部文件中定義的級聯樣式表。 該文件包含 Styles.css、DataWebControlStyle、HeaderStyle、RowStyle 和 AlternatingRowStyle CSS 類別，這些類別應用於指示這些教學課程中使用的資料 Web 控制項的外觀。 為了實現這一點，我們可以將 GridView 的屬性設為 CssClass、DataWebControlStyle 以及對應的 HeaderStyle、RowStyle 和 AlternatingRowStyle 屬性的屬性 CssClass。

如果我們在 Web 控制項上設定這些 CssClass 屬性，我們需要記住為新增到教學課程中的每個資料 Web 控制項明確設定這些屬性值。 更容易管理的方法是使用主題為 GridView、DetailsView 和 FormView 控制項定義預設的 CSS 相關屬性。 主題是控制項級屬性設定、影像和 CSS 類別的集合，可套用於網站上的頁面以強制執行通用的外觀和感覺。

我們的主題不會包含任何影像或 CSS 檔案 (我們將保留樣式表 Styles.css 不變，在 Web 應用程式的根資料夾中定義)，但將包含兩個外觀。 外觀是定義 Web 控制項預設屬性的檔案。 具體來說，我們將為 GridView 和 DetailsView 控制項提供一個外觀文件，指示預設相關屬性。CssClass

首先將新的外觀檔案新增至您的專案中，透過右鍵點擊解決方案資源管理器中的專案名稱 GridView.skin 並選擇「新增項目」來命名。

新增名為 GridView.skin 的外觀文件

圖 9：新增名為的造型檔案 (GridView.skin點擊看大圖)

造型文件需要放置在主題 App_Themes 資料夾中。 由於我們還沒有這樣的資料夾，Visual Studio 會在新增第一個外觀時為我們建立一個資料夾。 點擊是以建立 App_Theme 資料夾並將新 GridView.skin 檔案放置在其中。

讓 Visual Studio 建立 App_Theme 資料夾

圖 10：讓 Visual Studio 建立App_Theme資料夾 (按一下查看大圖)

這將在名為 GridView 的 App_Themes 資料夾中建立一個帶有 Skin 檔案 GridView.skin 的新主題。

GridView 主題已新增至 App_Theme 資料夾中

圖 11：GridView 主題已新增至 App_Theme 資料夾中

將 GridView 主題重新命名為 DataWebControls (右鍵點擊資料夾中的 GridView App_Theme 資料夾，然後選擇「重新命名」)。 接下來，將以下標記輸入到 GridView.skin 文件中：

<asp:GridView runat="server" CssClass="DataWebControlStyle">
   <AlternatingRowStyle CssClass="AlternatingRowStyle" />
   <RowStyle CssClass="RowStyle" />
   <HeaderStyle CssClass="HeaderStyle" />
</asp:GridView>

這定義了使用 DataWebControls 主題的任何頁面中任何 GridView CssClass 相關屬性的預設屬性。 讓我們為 DetailsView 添加另一個造型，這是我們很快就會使用的資料 Web 控制項。 將新造型新增至名為 DataWebControls 主題 DetailsView.skin 並新增以下標記：

<asp:DetailsView runat="server" CssClass="DataWebControlStyle">
   <AlternatingRowStyle CssClass="AlternatingRowStyle" />
   <RowStyle CssClass="RowStyle" />
   <FieldHeaderStyle CssClass="HeaderStyle" />
</asp:DetailsView>

定義了主題後，最後一步是將主題套用到我們的 ASP.NET 頁面。 主題可以逐頁應用，也可以應用於網站中的所有頁面。 讓我們在網站的所有頁面上使用這個主題。 若要實現此目的，請將以下標記新增至 Web.config 的 <system.web> 部分：

<pages styleSheetTheme="DataWebControls" />

這樣就全部完成了！ 此 styleSheetTheme 設定指示主題中指定的屬性不應覆寫在控制項層級指定的屬性。 若要指定主題設定應優先於控制設置，請使用 theme 屬性代替 styleSheetTheme；不幸的是，主題設定不會出現在 Visual Studio 設計檢視中。 有關主題和造型的更多信息，請參閱 ASP.NET 主題和造型概述和使用主題的伺服器端樣式；有關設定頁面以使用主題的更多信息，請參閱如何：應用 ASP.NET 主題。

GridView 顯示產品的名稱、類別、供應商、價格和停產資訊

圖 12：GridView 顯示產品名稱、類別、供應商、價格和停產資訊 (點擊看大圖)

在詳細資料檢視中一次顯示一筆記錄

GridView 為它所綁定的資料來源控制項所傳回的每筆記錄顯示一行。 然而，有時我們可能希望一次顯示一筆記錄或僅顯示一筆記錄。 DetailsView 控制項提供了此功能，呈現為 HTML，其中每列或綁定到該控制項的屬性具有兩列和一行。<table> 您可以將 DetailsView 視為帶有旋轉 90 度的單一記錄的GridView。

首先在 SimpleDisplay.aspx 中的 GridView 上方新增一個 DetailsView 控制項。 接下來，將其綁定到與 GridView 相同的 ObjectDataSource 控制項。 與 GridView 一樣，BoundField 將會被加入到由 ObjectDataSource 的 Select 方法傳回的物件中的每個屬性的 DetailsView 中。 唯一的區別是 DetailsView 的 BoundFields 是水平佈局而不是垂直佈局。

將 DetailsView 新增至頁面並將其綁定至 ObjectDataSource

圖 13：將 DetailsView 新增至頁面並將其綁定到 ObjectDataSource (按一下查看全尺寸圖片)

與 GridView 一樣，DetailsView 的 BoundFields 可以進行調整，以提供由 ObjectDataSource 傳回的資料的更自訂的顯示。 圖 14 顯示了設定 BoundFields 和 CssClass 屬性以使其外觀與 GridView 範例類似後的 DetailsView。

詳細資料檢視顯示單一記錄

圖 14：DetailsView 顯示單一記錄 (按一下查看全尺寸影像)

請注意，DetailsView 僅顯示其資料來源傳回的第一筆記錄。 為了允許使用者一次瀏覽所有記錄，我們必須為 DetailsView 啟用分頁。 為此，請返回 Visual Studio 並選取 DetailsView 智慧標記中的啟用分頁複選框。

在 DetailsView 控制項中啟用分頁

圖 15：在 DetailsView 控制項中啟用分頁 (按一下查看全尺寸圖片)

啟用分頁後，詳細資料檢視可讓使用者查看任何產品

圖 16：啟用分頁後，詳細資訊檢視可讓使用者查看任何產品 (點擊可查看全尺寸影像)

我們將在以後的教學課程中詳細討論分頁。

一次顯示一筆記錄的更靈活的佈局

DetailsView 在如何顯示從 ObjectDataSource 傳回的每筆記錄方面非常嚴格。 我們可能想要更靈活的資料檢視。 例如，我們可能希望在標題中 <h4> 顯示產品名稱和價格，而類別和供應商資訊顯示在名稱下方，而不是在單獨的行中顯示產品名稱、類別、供應商、價格和停產資訊。的字體顯示。 我們可能不關心在值旁邊顯示屬性名稱 (產品、類別等)。

FormView 控制項提供了這種程度的自訂。 FormView 不使用欄位 (像 GridView 和 DetailsView 那樣)，而是使用範本，它允許混合使用 Web 控制項、靜態 HTML 和資料綁定語法。 如果您熟悉 ASP.NET 1.x 中的 Repeater 控件，則可以將 FormView 視為顯示單一記錄的 Repeater。

將 FormView 控制項新增至 SimpleDisplay.aspx 頁面的設計圖面。 最初，FormView 顯示為灰色區塊，通知我們至少需要提供控制項的 ItemTemplate。

FormView 必須包含 ItemTemplate

圖 17：FormView 必須包含一個 (ItemTemplate按一下查看全尺寸影像)

您可以透過 FormView 的智慧標記將 FormView 直接綁定到資料來源控件，該標記將 ItemTemplate 自動建立 EditItemTemplateInsertItemTemplate 預設值 (如果設定了 ObjectDataSource 控制項的 InsertMethod 和 UpdateMethod 屬性，則也會建立預設值)。 但是，對於本範例，我們將資料綁定到 FormView 並手動指定 ItemTemplate。 首先將 FormView 的 DataSourceID 屬性設定為 ObjectDataSource 控制項的 IDObjectDataSource1。 接下來，建立 ItemTemplate，以便它在 <h4> 元素中顯示產品名稱和價格，並在其下方以較小的字體顯示類別和發貨人名稱。

<asp:FormView ID="FormView1" runat="server"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <ItemTemplate>
        <h4><%# Eval("ProductName") %>
          (<%# Eval("UnitPrice", "{0:c}") %>)</h4>
        Category: <%# Eval("CategoryName") %>;
        Supplier: <%# Eval("SupplierName") %>
    </ItemTemplate>
</asp:FormView>

第一個產品 (Chai) 以自訂格式顯示

圖 18：第一個產品 (Chai) 以自訂格式顯示 (點擊可看大圖)

這是資料綁定語法 <%# Eval(propertyName) %>。 此方法傳回綁定到 FormView 控制項的目前物件的指定屬性值 Eval。 請參閱 Alex Homer 的文章 ASP.NET 2.0 中的簡化和擴充資料綁定語法，以了解有關資料綁定細節的更多資訊。

與DetailsView 一樣，FormView 只會顯示從ObjectDataSource 傳回的第一筆記錄。 您可以在 FormView 中啟用分頁，以允許訪客一次單步瀏覽一個產品。

摘要

使用 ASP.NET 2.0 的 ObjectDataSource 控制項，無需編寫一行程式碼即可存取和顯示業務邏輯層中的資料。 ObjectDataSource 呼叫類別的指定方法並傳回結果。 這些結果可以顯示在綁定到 ObjectDataSource 的資料 Web 控制項中。 在本教學中，我們研究了將 GridView、DetailsView 和 FormView 控制項綁定到 ObjectDataSource。

到目前為止，我們只了解如何使用 ObjectDataSource 呼叫無參數方法，但是如果我們想要呼叫需要輸入參數 (例如 ProductBLL 類別的 GetProductsByCategoryID(categoryID))的方法該怎麼辦？ 為了呼叫需要一個或多個參數的方法，我們必須設定 ObjectDataSource 以指定這些參數的值。 我們將在下一個教學課程中了解如何實現這一點。

快樂程式！

深入閱讀

有關本教學課程中討論的主題的更多信息，請參閱以下資源：

• 建立您自己的資料來源控制項
• ASP.NET 2.0 的 GridView 範例
• ASP.NET 2.0 中的主題
• 使用主題的伺服器端樣式
• 如何：以程式設計應用 ASP.NET 主題

關於作者

斯科特·米切爾，七本 ASP/ASP.NET 書籍和 4GuysFromRolla.com 創始人的作者，自1998年以來一直與Microsoft Web 技術合作。 史考特是一名獨立顧問、培訓師和作家。 他的最新著作是 Sams Teach Yourself ASP.NET 2.0 in 24 Hours。 可以透過 mitchell@4GuysFromRolla.com 聯絡他。

特別感謝

本教學系列得到了許多有用的審閱者的審閱。 本教學的首席審閱者是 Hilton Giesenow。 有興趣查看我即將發表的 MSDN 文章嗎？ 如果是，請在 mitchell@4GuysFromRolla.com給我留言。

上一個下一個