ASP.NET2.0利用Gridview實現主從關係

原文發表在http://dev.yesky.com/msdn/493/2079993_1.shtml上
 

   在本文，將繼續介紹asp.net 2.0中的其他技巧。首先我們來看下如何使用gridview來實現一個master-detail主從關係的應用，以實現一對多的關係，因為這是十分普遍的web應用。在asp.net 1.1中，可能要編寫比較多的代碼以實現這樣的應用，但在asp.net 2.0中，已經可以很方便地實現這樣的主從關係的應用了。下面分步來介紹：
　　我們以sql server 2000中的northwind資料庫為例子進行介紹。該資料庫中存在很多一對多關聯性的例子。這裡，我們以products表和order detail表予以介紹。其中，我們實現這樣的一個應用，通過dropdownlist下拉框，當使用者每次選擇一種商品時，可以馬上通過gridview顯示在所有的訂單中，有哪些訂單中曾經訂購了該商品，兩表構成典型的一對多關聯性。

           首先，我們要先將商品從product表中取出來，並綁定到dropdownlist中去。我們拖拉一個sqldatasource控制項到表單中去，命名為productListingDataSource,然後設定將product表的productid,productname欄位取出，並按照productname進行排序，然後再拖拉一個dropdownlist控制項到表單中，點選該控制項的smart tag智能標記，在彈出的菜單中，選擇data source為剛才加入的sqldatasource的名稱（就是productListingDataSource），並選擇productname作為在下拉框中要顯示的文本，同時，要將prodcutid設定為下拉框的選定值。如所示：

        
接下來,我們再拖拉一個sqldatasource控制項到表單中去，命名為orderDetailsForProduct,在這個控制項中，我們將其綁定到order detail表中,由於不需要返回所有的欄位,所以我們只需要返回orderid,unitprice和quantity三個欄位就可以了,並且我們需要與dropdownlist構成關聯,所以我們要設定適當的sql語句．在asp.net 2.0中，這個也可以通過菜單的操作予以實現。

　　我們在設定sqldatasource屬性的時候，當遇到如所示的步驟時，點選"where"按鈕．

   在點"where"按鈕後，在彈出的菜單中(如所示)，設定column為productid, 設定作業符operator為＂＝＂，設定source下拉框的值為control,表示要與來自控制項的值進行綁定，選擇後，再在右邊的parameter properties屬性視窗中的conrol id設定為剛才我們添加dropdownlist控制項名的名稱，最後，記得按＂add"按鈕，這樣，就設定好sql語句了．
    
最後，增加一個gridview控制項，將其於剛才添加的名為orderDetailsForProduct的資料來源控制項綁定．這樣就大功告成了．運行後，結果如所示：

 

可以看到，當選擇dropdownlist中的不同商品時，gridview會顯示涉及該商品的不同訂單的詳細資料．程式的代碼如下：
＜form id="form1" runat="server"＞
　＜div＞
　＜h2＞You are Viewing Order Detail Information for Orders
that Have Included Shipments of the Selected Product＜/h2＞
　＜asp:SqlDataSource ID="productListingDataSource"
　　　　Runat="server" ConnectionString=
　　　　　"＜%$ ConnectionStrings:NWConnectionString %＞"
　　　　　SelectCommand="SELECT [ProductID],
　　　　　[ProductName] FROM [Products]"＞
　＜/asp:SqlDataSource＞
　＜asp:DropDownList ID="productSelector" Runat="server"
　　　DataSourceID="productListingDataSource"
　　　DataTextField="ProductName" DataValueField="ProductID"
　　　AutoPostBack="True"＞
　＜/asp:DropDownList＞ 
　＜asp:SqlDataSource ID="orderDetailsForProduct" Runat="server"
　　　SelectCommand="SELECT [OrderID], [ProductID], [UnitPrice],
　　　[Quantity] FROM [Order Details] WHERE ([ProductID] =
　　　@ProductID)"
　　　ConnectionString=
　　　　　"＜%$ ConnectionStrings:NWConnectionString%＞"
　　　　　DataSourceMode="DataReader"＞
　　　　　＜SelectParameters＞
　＜asp:ControlParameter Name="ProductID" Type="Int32"
　　　ControlID="productSelector"
　　　PropertyName="SelectedValue"＞＜/asp:ControlParameter＞
　＜/SelectParameters＞
　＜/asp:SqlDataSource＞＜asp:GridView ID="orderDetailsGridView"
　　　Runat="server" DataSourceID="orderDetailsForProduct"
　　　AutoGenerateColumns="False" DataKeyNames="OrderID"
　　　BorderWidth="1px" BackColor="LightGoldenrodYellow"
　　　GridLines="None" CellPadding="2" BorderColor="Tan"
　　　ForeColor="Black"＞
　＜FooterStyle BackColor="Tan"＞＜/FooterStyle＞
　＜PagerStyle ForeColor="DarkSlateBlue"
　　　HorizontalAlign="Center" BackColor="PaleGoldenrod"＞
　＜/PagerStyle＞
　＜HeaderStyle Font-Bold="True"
　　　BackColor="Tan"＞＜/HeaderStyle＞
　＜AlternatingRowStyle
　　　BackColor="PaleGoldenrod"＞＜/AlternatingRowStyle＞
　＜Columns＞
　　＜asp:BoundField ReadOnly="True" HeaderText="Order ID"
　　　　InsertVisible="False" DataField="OrderID"
　　　　SortExpression="OrderID"＞
　　　＜ItemStyle HorizontalAlign="Center"＞＜/ItemStyle＞
　　＜/asp:BoundField＞
　　＜asp:BoundField HeaderText="Quantity"
　　　　DataField="Quantity" SortExpression="Quantity"
　　　　DataFormatString="{0:d}"＞
　　　＜ItemStyle HorizontalAlign="Right"＞＜/ItemStyle＞
　　＜/asp:BoundField＞
　　＜asp:BoundField HeaderText="Unit Price"
　　　　DataField="UnitPrice" SortExpression="UnitPrice"
　　　　DataFormatString="{0:c}"＞
　　　　＜ItemStyle HorizontalAlign="Right"＞＜/ItemStyle＞
　　＜/asp:BoundField＞
　＜/Columns＞
　＜SelectedRowStyle ForeColor="GhostWhite"
　　BackColor="DarkSlateBlue"＞＜/SelectedRowStyle＞
＜/asp:GridView＞
＜/div＞
＜/form＞
 接下來，我們以另外一種更直觀的方式，實現master-detail的主從關係．我們以northwind資料庫的order表和order detail表為例子，實現這樣的應用，當在gridview展示的所有訂單中，當點選某一具體的訂單，可以在右側顯示該訂單的詳細具體資訊。

　　步驟和上例子十分類似，先添加一個sqldatasource控制項，命名為ordersDataSource,綁定到northwind資料庫的orders表，只需要選擇orderid,company,orderdate三個欄位就可以了，然後添加一個gridview控制項，選擇控制項右上方的"smart tag＂智能標記，在彈出的菜單中，設定gridview控制項為＂enable paging"和"enable selection",即表示可以允許gridview分頁和允許選擇gridview中的每一行。

　　接著選擇＂smart tag＂標記，在彈出的菜單中選擇＂edit columns＂，對每一列進行具體設定，如，添加一個select類型的command field類型的欄位，並設定其selecttext屬性為＂顯示訂單詳細資料",
 

 接下來，將該gridview控制項綁定到ordersDataSource中去．再添加另外一個sqldatasource控制項，命名為orderDetailsDataSource,按上文提到的方法，將其綁定到order detail表中，並且設定其where子句，通過order id,與order表中的orderid進行串連．這些可以通過菜單進行設定，如所示：

  
   最後，可以運行程式了．結果如下兩圖所示：

  可以清楚的看到，當選擇左邊的gridview的每一行時，如果點了＂顯示訂單資訊＂的話，就會在右邊顯示這張訂單的詳細資料。

　　此外，為了能使gridview能分頁，則添加如下代碼：
void orderGridView_PageIndexChanged(object sender, EventArgs e)
{
　orderGridView.SelectedIndex = -1;
}
完整的代碼如下：
＜form id="form1" runat="server"＞
　＜div style="width:50%;float:left;padding-right:10px;"＞
　＜h2＞Select an Order from the Left...＜/h2＞
　＜asp:SqlDataSource ID="ordersDataSource" Runat="server"
　　SelectCommand="SELECT dbo.Orders.OrderID,
　　dbo.Customers.CompanyName, dbo.Orders.OrderDate FROM
　　dbo.Orders INNER JOIN dbo.Customers ON dbo.Orders.CustomerID = dbo.Customers.CustomerID"
　　ConnectionString=
　　　　"＜%$ ConnectionStrings:NWConnectionString %＞"＞
　＜/asp:SqlDataSource＞
　＜asp:GridView ID="orderGridView" Runat="server"
　　DataSourceID="ordersDataSource" DataKeyNames="OrderID"
　　AutoGenerateColumns="False" AllowPaging="True"
　　BorderWidth="1px" BackColor="#DEBA84"
　　CellPadding="3" CellSpacing="2" BorderStyle="None"
　　BorderColor="#DEBA84"
　　OnPageIndexChanged="orderGridView_PageIndexChanged"＞
　＜FooterStyle ForeColor="#8C4510"
　　BackColor="#F7DFB5"＞＜/FooterStyle＞
　　＜PagerStyle ForeColor="#8C4510"
　　　HorizontalAlign="Center"＞＜/PagerStyle＞
　　＜HeaderStyle ForeColor="White" Font-Bold="True"
　　　BackColor="#A55129"＞＜/HeaderStyle＞
　＜Columns＞
　　＜asp:CommandField ShowSelectButton="True"
　　　　SelectText="View Order Details"＞＜/asp:CommandField＞
　　＜asp:BoundField HeaderText="Company"
　　　　DataField="CompanyName"
　　　　SortExpression="CompanyName"＞＜/asp:BoundField＞
　　＜asp:BoundField HeaderText="Order Date"
　　　　DataField="OrderDate" SortExpression="OrderDate"
　　　　DataFormatString="{0:d}"＞
　　　＜ItemStyle HorizontalAlign="Right"＞＜/ItemStyle＞
　　＜/asp:BoundField＞
　＜/Columns＞
　＜SelectedRowStyle ForeColor="White" Font-Bold="True"
　　　BackColor="#738A9C"＞＜/SelectedRowStyle＞
　　＜RowStyle ForeColor="#8C4510" BackColor="#FFF7E7"＞＜/RowStyle＞
　＜/asp:GridView＞
＜/div＞
＜div＞
＜h2＞... and View the Order Details on the Right＜/h2＞
＜asp:SqlDataSource ID="orderDetailsDataSource" Runat="server"
　SelectCommand="SELECT dbo.[Order Details].OrderID,
　dbo.Products.ProductName, dbo.[Order Details].UnitPrice,
　dbo.[Order Details].Quantity, dbo.[Order Details].Discount
　FROM dbo.[Order Details] INNER JOIN dbo.Products
　ON dbo.[Order Details].ProductID = dbo.Products.ProductID
　WHERE dbo.[Order Details].OrderID = @OrderID"
　ConnectionString="＜%$ ConnectionStrings:NWConnectionString %＞"＞
＜SelectParameters＞
　＜asp:ControlParameter ControlID="orderGridView"
　　Name="OrderID" Type="Int32"
　　PropertyName="SelectedValue" /＞
＜/SelectParameters＞
＜/asp:SqlDataSource＞

＜asp:GridView ID="detailsGridView" Runat="server"
　DataSourceID="orderDetailsDataSource"
　AutoGenerateColumns="False" BorderWidth="1px"
　BackColor="#DEBA84" CellPadding="3"
　CellSpacing="2" BorderStyle="None" BorderColor="#DEBA84"＞
　＜FooterStyle ForeColor="#8C4510" BackColor="#F7DFB5"＞＜/FooterStyle＞
　＜PagerStyle ForeColor="#8C4510" HorizontalAlign="Center"＞＜/PagerStyle＞
　＜HeaderStyle ForeColor="White" Font-Bold="True" BackColor="#A55129"＞＜/HeaderStyle＞
　＜Columns＞
＜asp:BoundField HeaderText="Product"
　DataField="ProductName"
　SortExpression="ProductName"＞＜/asp:BoundField＞
＜asp:BoundField HeaderText="Unit Price"
　DataField="UnitPrice" SortExpression="UnitPrice"
　DataFormatString="{0:c}"＞
　＜ItemStyle HorizontalAlign="Right"＞＜/ItemStyle＞
＜/asp:BoundField＞
＜asp:BoundField HeaderText="Quantity"
　DataField="Quantity" SortExpression="Quantity"＞
　＜ItemStyle HorizontalAlign="Right"＞＜/ItemStyle＞
＜/asp:BoundField＞
＜asp:BoundField HeaderText="Discount"
　DataField="Discount" SortExpression="Discount"
　DataFormatString="{0:P}"＞
＜ItemStyle HorizontalAlign="Right"＞＜/ItemStyle＞
＜/asp:BoundField＞
＜/Columns＞
＜SelectedRowStyle ForeColor="White" Font-Bold="True"
　BackColor="#738A9C"＞＜/SelectedRowStyle＞
＜RowStyle ForeColor="#8C4510" BackColor="#FFF7E7"＞＜/RowStyle＞
＜/asp:GridView＞
＜/div＞
＜/form＞