ASP.NET 2.0數(shù)據(jù)教程:綁定到ObjectDataSource
在ObjectDataSource添加到頁面并完成配置之后，我們就可以添加一個(gè)Data Web服務(wù)器控件到頁面來展現(xiàn)通過ObjectDataSource的Select方法返回的數(shù)據(jù)。所有的Data Web服務(wù)器控件都可以綁定到ObjectDataSource；下面我們看看如何將ObjectDataSource的數(shù)據(jù)展現(xiàn)到GridView、DetailsView、和 FormView 。
綁定一個(gè)GridView到ObjectDataSource
從工具箱添加一個(gè)GridView控件到頁面SimpleDisplay.aspx的設(shè)計(jì)界面。從GridView的智能標(biāo)記，選擇我們在***步中添加的ObjectDataSource控件作為數(shù)據(jù)源。這將根據(jù)ObjectDataSource的Select方法所返回?cái)?shù)據(jù)的每一個(gè)屬性（即類型化數(shù)據(jù)集Products所定義的屬性）自動(dòng)地在GridView控件里產(chǎn)生一個(gè)綁定列（BoundField）。
圖6: 添加一個(gè)GridView控件到頁面并綁定到ObjectDataSource
圖7: 通過編輯列對話框管理GridView控件的綁定列
花一些時(shí)間修改GridView控件的綁定列，移除ProductID, SupplierID, CategoryID, QuantityPerUnit, UnitsInStock, UnitsOnOrder, 和 ReorderLevel這幾列。操作很簡單，從左下方的列表中選中這些列然后點(diǎn)擊刪除按鈕（紅色交叉）就可以移除它們。然后，重新排列一下，選中CategoryName 和 SupplierName兩個(gè)綁定列并點(diǎn)擊向上箭頭按鈕，使它們排放在UnitPrice列之前。分別設(shè)置Products、Category、Supplier和 Price這幾個(gè)剩下的綁定列的HeaderText屬性。然后，格式化Price列為貨幣–設(shè)置該綁定列的HtmlEncode屬性為False并且設(shè)置DataFormatString屬性為{0:c} 。***，通過ItemStyle/HorizontalAlign屬性設(shè)置綁定列Price的水平靠右對齊以及CheckBox列Discontinued水平居中顯示。
- < 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>
圖 8: GridView控件的綁定列定制完成
使用主題（Themes）保持顯示風(fēng)格的一致
這里會盡可能地移除控件層面的樣式設(shè)置，取而代之的是使用在一個(gè)外部文件里定義的級聯(lián)樣式表。文件Styles.css包含了DataWebControlStyle、HeaderStyle、RowStyle和 AlternatingRowStyle 這幾種CSS樣式可以用來指示Data Web服務(wù)器控件的外觀。為了實(shí)現(xiàn)這一點(diǎn)，我們可以設(shè)置GridView控件的CssClass屬性為DataWebControlStyle，HeaderStyle、RowStyle和 AlternatingRowStyle的CssClass屬性也類似地設(shè)置。
如果我們設(shè)置了這些CssClass屬性到Web控件，那么我們不得不記得明確地把每一個(gè)屬性的值和每一個(gè)Data Web服務(wù)器控件記錄到我們的手冊中。一種更為方便管理的方法是使用一個(gè)Theme定義CSS樣式跟GridView、 DetailsView和FormView控件的屬性之間的關(guān)聯(lián)關(guān)系。Theme是一個(gè)控件層面的屬性設(shè)置、圖片和CSS樣式的集合，它可以應(yīng)用到整個(gè)站點(diǎn)的所有頁面強(qiáng)制約束外貌和感觀。
我們的Theme將不會包含圖片和CSS文件（我們會把stylesheet Styles.css文件照舊留在web應(yīng)用程序的根目錄下），但是它會包含兩個(gè)外觀（Skin）。外觀是一個(gè)包含Web控件的默認(rèn)屬性設(shè)置的文件。特別地，我們將創(chuàng)建一個(gè)Skin文件為GridView和 DetailsView定義外觀，標(biāo)示默認(rèn)的CssClass關(guān)聯(lián)的屬性。
在解決方案資源管理器里選中當(dāng)前項(xiàng)目，從右鍵菜單中選擇“添加新項(xiàng)”，添加一個(gè)外觀文件到你的項(xiàng)目并命名為GridView.skin 。
圖9: 添加一個(gè)外觀文件并命名為GridView.skin
Skin files need to be placed in a Theme, which are located in the App_Themes folder. Since we don’t yet have such a folder, Visual Studio will kindly offer to create one for us when adding our first Skin. Click Yes to create the App_Theme folder and place the new GridView.skin file there.
外觀文件需要被放置到一個(gè)主題里，而主題文件則存放在App_Themes文件夾里。因?yàn)槲覀兡壳斑€沒有這個(gè)文件夾，當(dāng)我們添加***個(gè)外觀文件時(shí)，Visual Studio會友善地提議為我們創(chuàng)建一個(gè)。點(diǎn)擊“是”，自動(dòng)創(chuàng)建App_Theme文件夾并把剛剛添加的GridView.skin文件放置在那里。
圖 10: 讓Visual Studio自動(dòng)創(chuàng)建App_Theme文件夾
這將在App_Themes文件夾中自動(dòng)創(chuàng)建一個(gè)主題，主題名稱為GridView并包含了外觀文件GridView.skin 。
圖 11: 主題GridView已被添加到 App_Theme 文件夾
把主題GridView重命名為DataWebControls（從GridView文件夾右鍵菜單中選擇重命名）。然后，進(jìn)入下面所見的GridView.skin文件的標(biāo)記：
- < asp:GridView runat="server" CssClass="DataWebControlStyle">
- < AlternatingRowStyle CssClass="AlternatingRowStyle" />
- < RowStyle CssClass="RowStyle" />
- < HeaderStyle CssClass="HeaderStyle" />
- < /asp:GridView>
使用了主題DataWebControls后，這將定義任何一個(gè)頁面中任何一個(gè)GridView控件與CssClass相關(guān)屬性的默認(rèn)值。讓我們添加一個(gè)另一個(gè)針對DetailsView控件的外觀，這個(gè)控件我們不久就會用到。在主題DataWebControls添加一個(gè)命名為DetailsView.skin的外觀，并加入如下的標(biāo)記：
- < asp:DetailsView runat="server" CssClass="DataWebControlStyle">
- < AlternatingRowStyle CssClass="AlternatingRowStyle" />
- < RowStyle CssClass="RowStyle" />
- < FieldHeaderStyle CssClass="HeaderStyle" />
- < /asp:DetailsView>
關(guān)于我們的主題設(shè)置，***一部就是將主題應(yīng)用到我們的asp.net頁面。一個(gè)主題可以一頁一頁地應(yīng)用到頁面，也可以應(yīng)用到一個(gè)站點(diǎn)下的所有頁面。讓我們把主題應(yīng)用到站點(diǎn)下的所有頁面。為了實(shí)現(xiàn)這一點(diǎn)，在Web.config的< system.web>片斷里加入下面的標(biāo)記：
- < pages styleSheetTheme="DataWebControls" />
這就順利完成了！在主題樣式表里預(yù)設(shè)的屬性將不會覆蓋直接在控件層面設(shè)定的屬性。如果希望主題里的設(shè)置高于控件的設(shè)置，則需要在主題樣式表里使用主題特征；然而不幸地，主題特征的設(shè)置并不出現(xiàn)在Visual Studio 的邏輯視圖。查閱 asp.net Themes and Skins Overview 和 Server-Side Styles Using Themes 獲取更多的關(guān)于主題和外觀的信息； 查看 How To: Apply asp.net Themes 獲得更多的關(guān)于如何配置頁面去使用一個(gè)主題的信息。
圖 12: The GridView顯示 Product’s Name, Category, Supplier, Price, and Discontinued Information
在 DetailsView控件里每次顯示一條數(shù)據(jù)
在GridView控件里，從綁定的數(shù)據(jù)源控件返回的數(shù)據(jù)每條記錄會被顯示為一行。然而有時(shí)候，我們僅僅需要顯示一條單獨(dú)的記錄，或者每次只顯示一條記錄。DetailsView控件提供了這個(gè)功能，它表現(xiàn)為一個(gè)兩列的HTML的< table>，每一行顯示一個(gè)字段或者一個(gè)屬性。你可以想象DetailsView是只有一條數(shù)據(jù)的GridView翻轉(zhuǎn)90度。
首先，在頁面SimpleDisplay.aspx里GridView控件的上方添加一個(gè)DetailsView控件。然后，把它綁定到GridView的同一個(gè)ObjectDataSourc控件。正如GridView控件那樣，它會根據(jù)ObjectDataSource的Select方法所返回的數(shù)據(jù)，每一個(gè)屬性生成一個(gè)綁定列。唯一不同的是，DetailsView的綁定列是水平排列的。
圖 13: 添加一個(gè)DetailsView 控件到頁面并綁定到ObjectDataSource
類似GridView，DetailsView的綁定列也可以調(diào)整提供一些用戶化的展現(xiàn)。圖14展示了DetailsView控件在設(shè)置好綁定列和CssClass屬性后使它的外觀類似于GridView的例子。
圖 14: DetailsView 控件顯示一條記錄
注意DetailsView控件只顯示它的數(shù)據(jù)源里的***條記錄。為了讓用戶可以瀏覽所有記錄，我們必須允許DetailsView分頁。為了實(shí)現(xiàn)這個(gè)，回到Visual Studio，在DetailsView的智能標(biāo)記中勾選上“啟用分頁”。
圖 15: 允許DetailsView 控件分頁
圖 16: 啟用分頁后，DetailsView控件允許用戶查看任何一個(gè)Products
以后的教程中中我們將詳細(xì)討論關(guān)于分頁。
一種更靈活的排版用作每次顯示一條記錄
使用DetailView展現(xiàn)ObjectDataSource返回的每一條數(shù)據(jù)顯得有些呆板。我們可能會需要更靈活的數(shù)據(jù)展現(xiàn)方式。例如，在每一個(gè)單獨(dú)的行里，在顯示product’s name, category, supplier, price, 和 discontinued information這些信息的基礎(chǔ)上，我們可能需要product name 和 price兩列顯示< h4>的列頭，而category 和 supplier則以較小的字體顯示在name和price下方。另外，我們也許不太在意屬性名（Product, Category,等等）顯示在屬性值后面。
FormView控件提供了這個(gè)層面的用戶化定制。在使用字段的基礎(chǔ)上(像GridView 和 DetailsView那樣)，F(xiàn)ormView控件使用模版，這可以讓我們混合使用Web服務(wù)器控件，靜態(tài)的HTML和綁定語法（databinding syntax）。如果你熟悉asp.net 1.x中的Repeater控件，你可以認(rèn)為FormView是只顯示一條記錄的Repeater 。
在頁面SimpleDisplay.aspx的設(shè)計(jì)界面添加一個(gè)FormView控件。一開始FromView控件顯示為一個(gè)灰色的方塊，并告知我們需要編輯模版內(nèi)容，需要使用ItemTemplate 。
圖 17: FormView必須包含一個(gè)ItemTemplate
你可以通過FormView的智能標(biāo)記直接給它綁定一個(gè)數(shù)據(jù)源控件，這將自動(dòng)創(chuàng)建一個(gè)默認(rèn)的ItemTemplate（如果ObjectDataSource設(shè)置了InsertMethod 和 UpdateMethod，那么同時(shí)也會自動(dòng)創(chuàng)建EditItemTemplate 和 InsertItemTemplate）。不過，這里的示例我們將手工綁定FormView并設(shè)置其ItemTemplate 。首先，設(shè)置FormView的DataSourceID屬性為ObjectDataSource的ID： ObjectDataSource1，然后，創(chuàng)建ItemTemplate，在一個(gè)< h4>里顯示product’s name 和 price，category 和 supplier則以較小的字體顯示在下方。
- < 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>
< %# Eval(propertyName) %>是綁定語法。方法Eval返回綁定到FormView的對象的指定屬性的值。查閱Alex Homer的文章Simplified and Extended Data Binding Syntax in asp.net 2.0獲取更多的關(guān)于數(shù)據(jù)綁定的細(xì)節(jié)。
跟DetailsView一樣，F(xiàn)ormView置顯示ObjectDataSource返回的***條記錄。你可以啟用FormView的分頁功能，從而讓訪問者可以依次查看每個(gè)產(chǎn)品。
【編輯推薦】
