Data Operations in ASP. NET 2.0: Master/Slave reports implemented using gridview and detailview

Document directory

• Introduction
• Highlight selected rows
• Summary

 

Data Operations in ASP. NET 2.0: original Master/Slave reports implemented using gridview and detailview | code | introduction to PDF

In the previous tutorial, we saw how to create a Master/Slave report using two pages (one homepage for listing suppliers and one detail page for displaying products provided by selected suppliers. the report formats of these two pages can also be concentrated on one page. this tutorial uses a gridview. Each row contains the product name, unit price, and a selection button. click the select button of a product to display all the details of the product on the detailsview control on the same page.

Figure 1: Click the select button to display product details

 

Step 1: Create a selectable row gridview

Think back to the previous cross-page Master/Slave report. Each master record contains a hyperlink. When you click this link, it is displayed on the details page, in the query string, pass the supplierid value of the row to be clicked. this link is implemented by using hyperlinkfield on the gridview. for a single-page Master/Slave report, a button is required for each gridview row. Details are displayed when you click this button. the gridview control can contain a selection button in each row. Clicking this button will result in a re-release and use this row as the selectedrow value of the gridview.

Add a gridview control to the detailsbyselecting. ASPX page in the filtering folder, set the ID attribute to productsgrid, and add a new objectdatasource named allproductsdatasource. It calls the getproducts () method of the productsbll class.

Figure 2: Create an objectdatasource and name it allproductsdatasource

 

Figure 3: using the productsbll class

Figure 4: Configure objectdatasource to call the getproducts () method

Edit the field of the gridview to remove fields other than productname and unitprice. you can also customize the binding fields as needed. For example, you can format the utitprice field as the currency and modify the headertext attribute of the binding field. these operations can be completed in the design view, click the edit column on the gridview Smart Tag, or manually configure the declared syntax.

Figure 5: Remove columns other than productname and unitprice.

The last gridview tag is as follows:

<Asp: gridview id = "productsgrid" runat = "server" autogeneratecolumns = "false" datakeynames = "productid"
Performanceid = "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>

Next, we need to set the gridview to select rows, which will add a selection button for each row. to implement this function, you only need to select the "enable selected content" check box on the gridview Smart Tag.

Figure 6: Select rows in the gridview

If you select "enable selected content", a command field is added to productsgrid gridview and the showselectbutton attribute is set to true. in this way, each row of the gridview will have a selection button, as shown in figure 6. by default, the select button is displayed as a link, but you can also use the button or image button to modify the buttontype attribute of commandfield.
<Asp: gridview id = "productsgrid" runat = "server" autogeneratecolumns = "false" datakeynames = "productid"
Performanceid = "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>

When you click the select button of the gridview, a sending request is triggered. The selectedrow attribute of the gridview is also updated. in addition to the selectedrow attribute, the gridview also provides the selectedindex, selectedvalue, and selecteddatakey attributes. the selectedindex attribute returns the index of the selected row, and the selectedvalue and selecteddatakey attributes return the value of the datakeynames Attribute Based on the gridview.

The datakeynames attribute Associates each row with one or more data fields. It is often used to uniquely identify a row in the gridview. the selectedvalue attribute returns the value of the first data field in the selected row's datakeynames. The selecteddatakey returns the datakey object of the selected row, which contains the values of all the specified data primary key fields of the row.

When the data source is bound to the gridview, detailsview, and formview, The datakeynames attribute is automatically set to the data field uniquely identified in the data source. although this attribute is automatically set in the previous tutorial, the example can be run without the specified datakeynames attribute. however, the datakeynames attribute must be properly set for the select row gridview in this tutorial and for the new, update, and delete rows in the gridview. make sure that the datakeynames attribute of the gridview has been set to productid.

View the work we have done in the browser. the gridview lists the names and unit prices of all products and a selection button. click the select button to trigger a send-back request. in step 2, we will see how to make a detailsview respond to the send-back event and display the details of the selected product.

Figure 7: Each product line contains a selection link.

Highlight selected rows

Productsgrid gridview has a selectedrowstyle attribute, which determines the appearance of the selected row. reasonable Use can clearly display the selected rows to improve user experience. in this tutorial, we use a yellow background to highlight selected rows.

Like in the previous tutorial, we need to keep the appearance as full as possible. define a new CSS class in styles.css and name it selectedrowstyle.
. Selectedrowstyle
{
Background-color: yellow;
}

 

To apply this CSS class to all the selectedrowstyle attributes of the gridview in this series of tutorials, edit the gridview. Skin appearance file under the datawebcontrols topic as follows:
<Asp: gridview runat = "server" cssclass = "datawebcontrolstyle">
<Alternatingrowstyle cssclass = "alternatingrowstyle"/>
<Rowstyle cssclass = "rowstyle"/>
<Headerstyle cssclass = "headerstyle"/>
<Selectedrowstyle cssclass = "selectedrowstyle"/>
</ASP: gridview>

After modification, the selected row of the gridview is highlighted with a yellow background.

Figure 8: Use the selectedrowstyle attribute of the gridview to customize the appearance of the selected row

Step 2: display the details of the selected product in detailsview

After the productsgrid gridview is completed, a detailsview is added, which displays the details of the selected product. add a detailsview control at the top of the gridview and create a new data source named productdetailsdatasource. because we want this detailsview to display the details of the selected product, configure productdetailsdatasource to use the getproductbyproductid (productid) method of the productsbll class.

Figure 9: Call the getproductbyproductid (productid) method of the productsbll class

Let productid obtain the parameter value from the selectedvalue attribute of the gridview control. as we have discussed earlier, the selectedvalue attribute of the gridview returns the first data key value of the selected row. therefore, you must set the datakeynames attribute of the gridview to productid, so that the productid of the selected row can be returned through the selectedvalue attribute.

Figure 10: Associate the productid parameter with the selectedvalue attribute of the gridview.

After configuring productdetailsdatasource objectdatasource and binding it to detailsview, this tutorial is complete! No row is selected during the first access, so the selectedvalue attribute of the gridview returns NULL. because there is no product whose productid value is null, The getproductbyproductid (productid) method does not return any records, and the detailsview cannot be displayed (11 ). clicking the select button of the gridview will cause a sending back and update the detailsview. the selectedvalue attribute of the gridview returns the productid of the selected row, and the getproductbyproductid (productid) method returns the productsdatatable information of the specific product. The detailsview displays the details (12 ).

Figure 11: only the gridview is displayed during the first access

Figure 12: select a row to display the product details

Summary

In this article and the previous three tutorials, we have seen several tips for displaying Master/Slave reports. in this tutorial, we have studied how to display the primary record and the details of the selected primary record in detailsview using the selectable row gridview. in the previous tutorial, we saw how to use dropdownlists to display the master record on one page and the detailed record on another page.

The Study of Master/Slave ends with this article. starting from the next article, we will study custom formatted gridview, detailsview and formview. we will see how to customize these data binding controls, how to display general information in the footer of the gridview, and how to use templates to better control the layout.

Happy programming!