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＞