ASP. net2.0 uses gridview to implement master-slave relationship

the original article is published at http://dev.yesky.com/msdn/493/2079993_1.shtml< br>

In this article, we will continue to introduce other techniques in Asp.net 2.0 . First, let's take a look at how to use gridview to implement a master-Detail master-slave relationship application, to implement a one-to-many relationship, because this is a very common Web application. In Asp.net 1.1 , you may need to write more Code to implement such an application, however, in Asp.net 2.0 , you can easily implement such a master-slave relationship. The following is a step-by-step introduction:
we use the northwind database in SQL Server 2000 is used as an example. There are many examples of one-to-multiple relationships in this database. Here, we use Products table and the Order detail table is described. Here, we implement such an application through the dropdownlist drop-down box, when a user selects a product, you can use gridview to display it in all orders, which of the following orders have subscribed to this product? The two tables form a typical one-to-many relationship.

first, we need to extract the product from the product table and bind it to dropdownlist. Drag a sqldatasource control to the form and name it productlistingdatasource. Then, set the productid and productname fields of the product table to be retrieved and sorted by productname, drag a dropdownlist control to the form and click the Smart tag of the control. In the pop-up menu, select data source as the name of the added sqldatasource (productlistingdatasource ), select productname as the text to be displayed in the drop-down box, and set prodcutid to the selected value in the drop-down box. As shown in:
next, drag a sqldatasource control to the form and name it orderdetailsforproduct. In this control, we bound it to the order detail table. because we do not need to return all the fields, we only need to return the orderid, unitprice, and quantity fields, in addition, we need to associate with dropdownlist, so we need to set appropriate SQL statements. in Asp.net 2.0, this can also be implemented through menu operations.

When setting the sqldatasource attribute, click "where" when performing the steps shown in.

After clicking the "where" button, in the pop-up menu (as shown in), set column to productid, set operator to "=", and set the value of the source drop-down box to control, to bind to the value from the control. After the selection, set the conrol ID in the parameter properties Properties window on the right to the name of the dropdownlist control we just added. Finally, remember to press the "add" button to set the SQL statement.

Finally, add a gridview control and bind it to the data source control named orderdetailsforproduct just added. The result is as follows:

 

As you can see, when you select different items in the dropdownlist, The gridview will display detailed information about different orders involving this item. Program The Code is as follows:
<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"
Performanceid = "productlistingdatasource"
Datatextfield = "productname" datavaluefield = "productid"
Autopostback = "true">
</ASP: dropdownlist> & nbsp;
<Asp: sqldatasource id = "orderdetailsforproduct" runat = "server"
Selectcommand = "select [orderid], [productid], [unitprice],
[Quantity] from [Order Details] Where ([productid] =
@ Productid )"
Connectionstring =
"<% $ Connectionstrings: nwconnectionstring %>"
Performancemode = "datareader">
<Selectparameters>
<Asp: controlparameter name = "productid" type = "int32"
Controlid = "productselector"
Propertyname = "selectedvalue"> </ASP: controlparameter>
</Selectparameters>
</ASP: sqldatasource> <asp: gridview id = "orderdetailsgridview"
Runat = "server" performanceid = "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"> <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>
Next, we will implement the master-Detail master-slave relationship in another more intuitive way. we use the order table and order detail table of the northwind database as examples to implement such an application. When you select a specific order in all orders displayed in the gridview, the detailed information about the order is displayed on the right.

The procedure is very similar to the previous example. First add a sqldatasource control named ordersdatasource and bind it to the orders table of the northwind database. You only need to select the orderid, company, and orderdate fields, add a gridview control and select "Smart Tag" in the upper-right corner of the control. In the pop-up menu, set the gridview control to "enable paging" and "enable selection ", that is, each row in the gridview can be selected by page.

Next, select the "Smart Tag" tag and select "Edit columns" in the pop-up menu to set each column. For example, add a select-type command field, and set its selecttext attribute to "display order details ",

Next, bind the gridview control to ordersdatasource. add another sqldatasource control named orderdetailsdatasource. bind it to the order detail table according to the method mentioned above, and set its WHERE clause through Order ID, connect to the orderid in the order table. these settings can be set through the menu, as shown in:

Finally, you can run the program. The result is as follows:

You can clearly see that when you select each row in the left-side gridview, if you click "show order information", the Order details will be displayed on the right.

In addition, add the following code to enable pagination of the gridview:
Void ordergridview_pageindexchanged (Object sender, eventargs E)
{
Ordergridview. selectedindex =-1;
}
The complete code is as follows:
<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. MERs on DBO. Orders. customerid = DBO. MERs. customerid"
Connectionstring =
"<% $ Connectionstrings: nwconnectionstring %>">
</ASP: sqldatasource>
<Asp: gridview id = "ordergridview" runat = "server"
Performanceid = "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"> <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"
Performanceid = "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"> <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>