|
|
系列文章導(dǎo)航：
ASP.NET 2.0數(shù)據(jù)教程之一：創(chuàng)建一個(gè)數(shù)據(jù)訪問(wèn)層
ASP.NET 2.0數(shù)據(jù)教程之二：創(chuàng)建一個(gè)業(yè)務(wù)邏輯層
ASP.NET 2.0數(shù)據(jù)教程之三：母板頁(yè)和站點(diǎn)導(dǎo)航
ASP.NET 2.0數(shù)據(jù)教程之四：使用ObjectDataSource展現(xiàn)數(shù)據(jù)
ASP.NET 2.0數(shù)據(jù)教程之五：聲明參數(shù)
ASP.NET 2.0數(shù)據(jù)教程之六：編程設(shè)置ObjectDataSource的參數(shù)值
ASP.NET 2.0數(shù)據(jù)教程之七：使用DropDownList過(guò)濾的主/從報(bào)表
ASP.NET 2.0數(shù)據(jù)教程之八：使用兩個(gè)DropDownList過(guò)濾的主/從報(bào)表
ASP.NET 2.0數(shù)據(jù)教程之九：跨頁(yè)面的主/從報(bào)表
ASP.NET 2.0數(shù)據(jù)教程之十：使用 GridView 和DetailView實(shí)現(xiàn)的主/從報(bào)表
ASP.NET 2.0數(shù)據(jù)教程之十一：基于數(shù)據(jù)的自定義格式化
ASP.NET 2.0數(shù)據(jù)教程之十二：在GridView控件中使用TemplateField
導(dǎo)言
在前面的教程我們看到了如何使用兩個(gè)頁(yè)面(一個(gè)主頁(yè),用于列出供應(yīng)商; 一個(gè)明細(xì)頁(yè),用于顯示選定供應(yīng)商提供的產(chǎn)品)創(chuàng)建主/從報(bào)表 . 這種兩個(gè)頁(yè)面的報(bào)表格式也可以集中在一個(gè)頁(yè)面上. 這篇教程將會(huì)使用一個(gè)GridView, 它的每一行都包含產(chǎn)品的名稱(chēng)和單價(jià)以及一個(gè)選擇按鈕. 單擊一個(gè)產(chǎn)品的選擇按鈕會(huì)在同一頁(yè)的DetailsView控件上顯示該產(chǎn)品的全部詳細(xì)信息.
圖 1: 單擊選擇按鈕顯示產(chǎn)品明細(xì)
系列文章導(dǎo)航：
ASP.NET 2.0數(shù)據(jù)教程之一：創(chuàng)建一個(gè)數(shù)據(jù)訪問(wèn)層
ASP.NET 2.0數(shù)據(jù)教程之二：創(chuàng)建一個(gè)業(yè)務(wù)邏輯層
ASP.NET 2.0數(shù)據(jù)教程之三：母板頁(yè)和站點(diǎn)導(dǎo)航
ASP.NET 2.0數(shù)據(jù)教程之四：使用ObjectDataSource展現(xiàn)數(shù)據(jù)
ASP.NET 2.0數(shù)據(jù)教程之五：聲明參數(shù)
ASP.NET 2.0數(shù)據(jù)教程之六：編程設(shè)置ObjectDataSource的參數(shù)值
ASP.NET 2.0數(shù)據(jù)教程之七：使用DropDownList過(guò)濾的主/從報(bào)表
ASP.NET 2.0數(shù)據(jù)教程之八：使用兩個(gè)DropDownList過(guò)濾的主/從報(bào)表
ASP.NET 2.0數(shù)據(jù)教程之九：跨頁(yè)面的主/從報(bào)表
ASP.NET 2.0數(shù)據(jù)教程之十：使用 GridView 和DetailView實(shí)現(xiàn)的主/從報(bào)表
ASP.NET 2.0數(shù)據(jù)教程之十一：基于數(shù)據(jù)的自定義格式化
ASP.NET 2.0數(shù)據(jù)教程之十二：在GridView控件中使用TemplateField
Step 1: 創(chuàng)建一個(gè)可選擇行的GridView
回想一下前面的跨頁(yè)的主/從報(bào)表, 它的每個(gè)主記錄包含了一個(gè)超鏈接, 當(dāng)點(diǎn)擊該鏈接時(shí)轉(zhuǎn)到詳細(xì)信息頁(yè),并在查詢(xún)字符串中傳遞所單擊行的SupplierID值. 這個(gè)鏈接是通過(guò)在GridView上使用HyperLinkField實(shí)現(xiàn)的. 對(duì)于單頁(yè)的主/從報(bào)表,每個(gè)GridView行需要一個(gè)按鈕, 單擊該按鈕時(shí)顯示詳細(xì)信息. GridView控件可以在每行包含一個(gè)選擇按鈕, 單擊該按鈕時(shí)會(huì)引起一次回發(fā)并把該行做為GridView的SelectedRow值.
先給Filtering 文件夾下的DetailsBySelecting.ASPx頁(yè)添加一個(gè)GridView控件, 設(shè)置ID屬性為ProductsGrid, 然后增加一個(gè)新的ObjectDataSource并命名為AllProductsDataSource, 它調(diào)用ProductsBLL類(lèi)的GetProducts()方法
圖 2: 創(chuàng)建一個(gè)ObjectDataSource 并命名為AllProductsDataSource
圖3: 使用ProductsBLL 類(lèi)
圖4: 配置 ObjectDataSource 調(diào)用 GetProducts() 方法
編輯GridView的字段, 移除ProductName和UnitPrice以外的字段. 也可以根據(jù)需要自定義綁定字段,比如格式化utitPrice字段為貨幣,修改綁定字段的HeaderText屬性. 這些操作可以在設(shè)計(jì)視圖完成, 單擊GridView智能標(biāo)記上的編輯列, 或是手工配置聲明的語(yǔ)法.
圖 5: 移除 ProductName 和 UnitPrice 以外的列.
最后的GridView標(biāo)記如下:
<ASP:GridView ID="ProductsGrid" runat="server" AutoGenerateColumns="False" DataKeyNames="ProductID"
DataSourceID="AllProductsDataSource" EnableViewState="False">
<Columns>
<ASP:BoundField DataField="ProductName" HeaderText="Product" SortExpression="ProductName" />
<ASP:BoundField DataField="UnitPrice" DataFormatString="{0:c}" HeaderText="Unit Price"
HtmlEncode="False" SortExpression="UnitPrice" />
</Columns>
</ASP:GridView>
接下來(lái), 我們需要設(shè)置GridView為可以選擇行, 這會(huì)為每一行增加一個(gè)選擇按鈕. 要實(shí)現(xiàn)該功能, 只要選中GridView智能標(biāo)記上的”啟用選定內(nèi)容”的復(fù)選框就可以了. 
圖6: 讓 GridView 的行可選
系列文章導(dǎo)航：
ASP.NET 2.0數(shù)據(jù)教程之一：創(chuàng)建一個(gè)數(shù)據(jù)訪問(wèn)層
ASP.NET 2.0數(shù)據(jù)教程之二：創(chuàng)建一個(gè)業(yè)務(wù)邏輯層
ASP.NET 2.0數(shù)據(jù)教程之三：母板頁(yè)和站點(diǎn)導(dǎo)航
ASP.NET 2.0數(shù)據(jù)教程之四：使用ObjectDataSource展現(xiàn)數(shù)據(jù)
ASP.NET 2.0數(shù)據(jù)教程之五：聲明參數(shù)
ASP.NET 2.0數(shù)據(jù)教程之六：編程設(shè)置ObjectDataSource的參數(shù)值
ASP.NET 2.0數(shù)據(jù)教程之七：使用DropDownList過(guò)濾的主/從報(bào)表
ASP.NET 2.0數(shù)據(jù)教程之八：使用兩個(gè)DropDownList過(guò)濾的主/從報(bào)表
ASP.NET 2.0數(shù)據(jù)教程之九：跨頁(yè)面的主/從報(bào)表
ASP.NET 2.0數(shù)據(jù)教程之十：使用 GridView 和DetailView實(shí)現(xiàn)的主/從報(bào)表
ASP.NET 2.0數(shù)據(jù)教程之十一：基于數(shù)據(jù)的自定義格式化
ASP.NET 2.0數(shù)據(jù)教程之十二：在GridView控件中使用TemplateField
選中”啟用選定內(nèi)容”項(xiàng)會(huì)給ProductsGrid GridView增加一個(gè)命令字段并設(shè)置ShowSelectButton屬性為T(mén)rue.這樣GridView的每一行都會(huì)有一個(gè)選擇按鈕, 如圖6所示. 默認(rèn)情況下, 選擇按鈕以鏈接的形式呈現(xiàn), 但是你也可以使用按鈕或圖片按鈕來(lái)代替, 修改CommandField的ButtonType屬性即可.
<ASP:GridView ID="ProductsGrid" runat="server" AutoGenerateColumns="False" DataKeyNames="ProductID"
DataSourceID="AllProductsDataSource" EnableViewState="False">
<Columns>
<ASP:CommandField ShowSelectButton="True" />
<ASP:BoundField DataField="ProductName" HeaderText="Product" SortExpression="ProductName" />
<ASP:BoundField DataField="UnitPrice" DataFormatString="{0:c}" HeaderText="Unit Price"
HtmlEncode="False" SortExpression="UnitPrice" />
</Columns>
</ASP:GridView>
單擊GridView的選擇按鈕時(shí)會(huì)引起一次回發(fā), GridView的 SelectedRow屬性也會(huì)更新. 除了SelectedRow屬性, GridView還提供了SelectedIndex, SelectedValue, 和 SelectedDataKey屬性. SelectedIndex屬性返回選中行的索引, SelectedValue和SelectedDataKey屬性返回基于GridView的DataKeyNames屬性的值.
DataKeyNames屬性讓每一行關(guān)聯(lián)一個(gè)或多個(gè)數(shù)據(jù)字段, 經(jīng)常用于唯一標(biāo)識(shí)GridView行. SelectedValue屬性返回選中行的DataKeyNames中的第一個(gè)數(shù)據(jù)字段的值, SelectedDataKey返回選中行的DataKey對(duì)象, 它包含了該行的所有指定數(shù)據(jù)主鍵字段的值.
在設(shè)計(jì)視圖上綁定數(shù)據(jù)源到GridView, DetailsView, FormView時(shí)DataKeyNames屬性被自動(dòng)設(shè)置為數(shù)據(jù)源中唯一標(biāo)識(shí)的數(shù)據(jù)字段. 盡管在前面的教程中這個(gè)屬性都是自動(dòng)設(shè)置的, 示例可以不需要專(zhuān)門(mén)指定的DataKeyNames屬性就可以運(yùn)行. 但對(duì)于本教程中的可選擇行的GridView以及后面我們要研究GridView中的新增,更新,刪除的教程中, DataKeyNames屬性必須合理地設(shè)置.確保GridView的DataKeyNames屬性已經(jīng)設(shè)置為ProductID.
在瀏覽器瀏覽一下我們所完成的工作. GridView列出了所有產(chǎn)品的名稱(chēng)和單價(jià)以及一個(gè)選擇按鈕. 單擊選擇按鈕觸發(fā)一次回發(fā). 在第二步中我們將會(huì)看到如何讓一個(gè)DetailsView響應(yīng)該回發(fā)事件并顯示選中產(chǎn)品的詳細(xì)信息.
圖 7: 每個(gè)產(chǎn)品行都包含一個(gè)選擇鏈接按鈕.
高亮顯示選中行
ProductsGrid GridView 有一個(gè)SelectedRowStyle屬性, 該屬性決定了選中行的外觀. 合理的使用可以更清晰的顯示當(dāng)前選中的行以改善用戶(hù)體驗(yàn). 對(duì)于本教程, 我們使用黃色的背景來(lái)高亮顯示選中行.
與前面的教程一樣, 我們要盡量保持美的外觀.在Styles.css中定義一個(gè)新的CSS類(lèi)并命名為SelectedRowStyle.
.SelectedRowStyle
{
background-color: Yellow;
}
要對(duì)本系列教程中的所有GridView的SelectedRowStyle屬性應(yīng)用這個(gè)CSS類(lèi),編輯DataWebControls 主題下的GridView.skin外觀文件如下:
<ASP:GridView runat="server" CssClass="DataWebControlStyle">
<AlternatingRowStyle CssClass="AlternatingRowStyle" />
<RowStyle CssClass="RowStyle" />
<HeaderStyle CssClass="HeaderStyle" />
<SelectedRowStyle CssClass="SelectedRowStyle" />
</ASP:GridView>
修改后,GridView的選中行用黃色的背景高亮顯示
圖 8:使用 GridView的 SelectedRowStyle 屬性自定義選中行的外觀
系列文章導(dǎo)航：
ASP.NET 2.0數(shù)據(jù)教程之一：創(chuàng)建一個(gè)數(shù)據(jù)訪問(wèn)層
ASP.NET 2.0數(shù)據(jù)教程之二：創(chuàng)建一個(gè)業(yè)務(wù)邏輯層
ASP.NET 2.0數(shù)據(jù)教程之三：母板頁(yè)和站點(diǎn)導(dǎo)航
ASP.NET 2.0數(shù)據(jù)教程之四：使用ObjectDataSource展現(xiàn)數(shù)據(jù)
ASP.NET 2.0數(shù)據(jù)教程之五：聲明參數(shù)
ASP.NET 2.0數(shù)據(jù)教程之六：編程設(shè)置ObjectDataSource的參數(shù)值
ASP.NET 2.0數(shù)據(jù)教程之七：使用DropDownList過(guò)濾的主/從報(bào)表
ASP.NET 2.0數(shù)據(jù)教程之八：使用兩個(gè)DropDownList過(guò)濾的主/從報(bào)表
ASP.NET 2.0數(shù)據(jù)教程之九：跨頁(yè)面的主/從報(bào)表
ASP.NET 2.0數(shù)據(jù)教程之十：使用 GridView 和DetailView實(shí)現(xiàn)的主/從報(bào)表
ASP.NET 2.0數(shù)據(jù)教程之十一：基于數(shù)據(jù)的自定義格式化
ASP.NET 2.0數(shù)據(jù)教程之十二：在GridView控件中使用TemplateField
Step 2: 在DetailsView中顯示選中產(chǎn)品的詳細(xì)信息
完成ProductsGrid GridView后, 剩下就是增加一個(gè)DetailsView, 它顯示選中的產(chǎn)品的詳細(xì)信息. 在GridView的上方添加一個(gè)DetailsView控件并創(chuàng)建一個(gè)新的數(shù)據(jù)源命名為ProductDetailsDataSource. 由于我們想讓這個(gè)DetailsView顯示選中產(chǎn)品的詳細(xì)信息, 配置ProductDetailsDataSource使用ProductsBLL類(lèi)的GetProductByProductID(productID)方法.
圖9: 調(diào)用 ProductsBLL 類(lèi)的GetProductByProductID(productID) 方法
讓productID從GridView控件的SelectedValue屬性獲取參數(shù)值.如同我們前面討論過(guò)的, GridView的SelectedValue屬性返回選中行的第一個(gè)數(shù)據(jù)鍵值. 因此必須把GridView的DataKeyNames屬性設(shè)置為ProductID, 這樣選中行的ProductID就可以通過(guò)SelectedValue屬性返回了.
圖10: 把productID 參數(shù)關(guān)聯(lián)到GridView的 SelectedValue 屬性.
配置好productDetailsDataSource ObjectDataSource并把它綁定到DetailsView后, 這篇教程就算完成了! 第一次訪問(wèn)時(shí)沒(méi)有行被選中, 所以GridView的 SelectedValue屬性返回null. 由于沒(méi)有ProductID值為Null的產(chǎn)品, GetProductByProductID(productID)方法不返回任何記錄, DetailsView也就無(wú)法顯示(如圖11). 單擊GridView的選擇按鈕后會(huì)引起一次回發(fā)并更新DetailsView. GridView的SelectedValue屬性返回選中行的ProductID, GetProductByProductID(productID)方法返回特定產(chǎn)品的信息ProductsDataTable, DetailsView顯示這些詳細(xì)信息(如圖12).
圖11: 第一次訪問(wèn)時(shí)只顯示GridView 
圖12: 選擇一行后顯示產(chǎn)品的詳細(xì)信息
總結(jié)
在本篇和前面的三篇教程中我們看到了顯示主/從報(bào)表的幾種技巧. 在這篇教程中我們研究了使用可選擇行的GridView顯示主記錄以及DetailsView選中主記錄的顯示詳細(xì). 在前面的教程中我們看到了如何在一個(gè)頁(yè)面使用DropDownLists 顯示主記錄而在另一個(gè)頁(yè)面顯示詳細(xì)信息記錄.
對(duì)主/從的研究到本篇就結(jié)束了. 從下一篇開(kāi)始我們將研究自定義格式化的GridView, DetailsView及FormView. 我們將會(huì)看到如何自定義這些數(shù)據(jù)綁定控件, 如何在GridView的頁(yè)腳顯示概括信息, 以及如何使用模板更好控制布局.
祝編程愉快!
NET技術(shù)：ASP.NET 2.0數(shù)據(jù)教程之十：使用 GridView 和DetailView實(shí)現(xiàn)的主/從報(bào)表，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
