Data Operations in ASP. NET 2.0: Cross-page Master/Slave report

Document directory

• Introduction
• Step 1: Add supplierlistmaster. aspx and productsforsupplierdetails. aspx to the filtering folder.
• Step 2: display the Supplier List in supplierlistmaster. aspx
• Step 3: List suppliers' products on productsforsupplierdetails. aspx
• Display supplier information in productsforsupplierdetails. aspx
• Apply tips for the productsforsupplierdetails. aspx user interface.
• Summary

Data Operations in ASP. NET 2.0: the original English version of the Cross-page Master/Slave report | code | introduction to the English PDF version

In the previous two tutorials, we saw how to display the Master/Slave report on a single page. It uses dropdownlist to display the master record, and uses gridview or detailsview to display details. another common Master/Slave report mode is to display the master record on one page while displaying details on another page. forums on the Internet, such as www.asp.net, are very typical examples of this mode in practical applications. ASP. net forums are composed of multiple sub-forums: getting started, web forms, data presentation controls, and so on. each sub-Forum contains multiple topics, and each topic is composed of multiple posts. these sub-forums are listed on the Asp.net Forum homepage. clicking a forum will go to showforum. the ASPX page that lists topics contained in this subforum. similarly, clicking a topic changes to showpost. aspx. The page displays the posts of the clicked topic.

In this tutorial, we will use the gridview to list suppliers to implement this mode. each row (one row is a supplier) in the gridview contains a "view product" link. this link will go to another page when you click it. This page displays all the products of the selected supplier.

Step 1: Add supplierlistmaster. aspx and productsforsupplierdetails. aspx to the filtering folder.

When defining the Page Structure in the third tutorial, we added several start pages in the basicreporting, filtering, and customformatting folders. we have not added the start page for this tutorial, and added two pages in the filtering Folder: supplierlistmaster. aspx and productsforsupplierdetails. aspx. supplierlistmaster. aspx will list the primary record (supplier) productsforsupplierdetails. aspx will display the products of the selected supplier.

When creating these two pages, be sure to associate them with the site. master page.

Figure 1: Add supplierlistmaster. aspx and productsforsupplierdetails. aspx In the filtering folder

After adding two files to the project, make sure that the website map file web. sitemap is updated accordingly. For this tutorial, simply use the following XML content Child node of the element

Tip: using K. Scott Allen's free Visual Studio site map macro can help you automatically update site maps when adding ASP. NET pages.

Step 2: display the Supplier List in supplierlistmaster. aspx

Add supplierlistmaster. aspx and productsforsupplierdetails. after the aspx, the following is the supplierlistmaster. create a gridview that displays the supplier on the ASPX page. add a gridview to the page and bind it to a new objectdatasource. This objectdatasource should use the getsuppliersbll class () method to return all vendors.

Figure 2: Select suppliersbll class

Figure 3: Configure objectdatasource using the getsuppliers () method

We need to include a "view product" link in each gridview line. When we click this link, it will go to productsforsupplierdetails. on the ASPX page, pass the supplierid value of the selected row in the query string (querystring. for example, if you click the "view product" link of the supplier Tokyo traders (supplierid is 4), it will be forwarded to productsforsupplierdetails. aspx? Supplierid = 4.

To implement this function, add a hyperlinkfield column to the gridview, which adds a link for each row in the gridview. click Edit column link on the gridview Smart Tag. select hyperlinkfield from the list in the upper left corner and click Add to add hyperlinkfield to the field list of the gridview.

Figure 4: Add hyperlinkfield to the gridview

Hyperlinkfield can be configured to use the same text or URL values in each gridview row, or to bind these values to the data values of a Specific Row. to specify a static value with the same values for all rows, use the text or navigateurl attribute of hyperlinkfield. because we want to make the link text of each line consistent, set the text attribute of hyperlinkfield to "view product ".

Figure 5: Set the text attribute of hyperlinkfield to "view product"

To bind text or URL to the underlying data of the row in the gridview, you may use datatextfield or datanavigateurlfields to specify the data field from which text or URL is to be obtained. datanavigateurlfields can only be set as a single data field. datanavigateurlfields can be set as a list of data fields separated by commas. we need to make text or URL Based on the Data Field Values and some tags of the current row. for example, in this tutorial, we want the URL of hyperlinkfield to be productsforsupplierdetails. aspx? Supplierid = supplierid. Where supplierid is the supplierid value of each row of the gridview. Note that we need static values and data driver values. productsforsupplierdetails. aspx? Supplierid = this part is a static value, while supplierid is data-driven, and its value is the supplierid value of each row.

To specify a mixture of the static value and data driver value, use the extextformatstring and datanavigateurlformatstring attributes. enter static text as needed in these attributes and use {0} to display specific fields in the extextfield or datanavigateurlfields attribute. if datanavigateurlfields has multiple fields, use {0} when the first field is required, use {1} For the second field, and so on.

For this tutorial, we need to set datanavigateurlfields to supplierid, because we need to use this data field to customize the link of each row.

Figure 6: Configure hyperlinkfield to use a supplierid-based link address.

After hyperlinkfield is added, you can customize and re-arrange the fields in the gridview. below is the modified mark (markup ):

Access supplierlistmaster in the browser. aspx. 7. All suppliers are listed on the page. Each Vendor contains the "view product" link. click "view product" to go to productsforsupplierdetails. aspx, and pass the supplier's supplierid value in the query string.

Figure 7: each supplier has a "view product" link.

Step 3: List suppliers' products on productsforsupplierdetails. aspx

Supplierlistmaster. the ASPX page transfers the user to productsforsupplierdetails. aspx, and pass the supplierid value of the selected supplier in the query string. the last step of this tutorial is in productsforsupplierdetails. the products are displayed in the gridview on the aspx page. to implement this function, add the gridview to productsforsupplierdetails. on aspx, and use a new objectdatasource control named productsbysupplierdatasource. This control calls the getproductsbysupplierid (supplierid) method of the productsbll class.

Figure 8: Add a new objectdatasource named productsbysupplierdatasource

Figure 9: select the productsbll class

Figure 10: Let objectdatasource call the getproductsbysupplierid (supplierid) Method

The last step of the data source Configuration Wizard is to provide the source of the supplierid parameter in the getproductsbysupplierid (supplierid) method. to use the value in the query string. set the parameter source to querystring and enter the name (supplierid) of the query string value in the querystringfield text box ).

Figure 11: Use the supplierid value in the query string as the value of the supplierid Parameter

That's all! Figure 12 shows what we see when we click the "view products" link of the Tokyo traders supplier on the supplierlistmaster. ASPX page.

Figure 12: Products of the Tokyo traders supplier

Display supplier information in productsforsupplierdetails. aspx

As shown in figure 12, productsforsupplierdetails. aspx only lists the products of the suppliers specified by the supplierid in the query string. however, some people will go directly to this page, so that they do not know that the Tokyo trader product is displayed in the middle of Figure 12. to fix this problem, we can display the supplier information on the page.

Add a formview. Create an objectdatasource control and name it suppliersdatasource. The control calls the getsupplierbysupplierid (supplierid) method of the suppliersbll class.

Figure 13: suppliersbll class
Figure 14: Let objectdatasource call the getsupplierbysupplierid (supplierid) Method

Use the supplierid value in the query string to assign a value to the supplierid parameter of productsbysupplierdatasource.

Figure 15: Set the supplierid parameter to the value of supplierid in the query string

When formview is bound to objectdatasource in the design view, Visual Studio automatically creates the itemtemplate, insertitemtemplate, and edititemtemplate templates of formview, these templates use the label and textbox Web controls to render data returned from objectdatasource. because we only need to display the supplier information, we can remove the insertitemtemplate and edititemtemplat templates. edit the itemtemplate to display the company name of the supplier in the tag, and the address, city, country, and phone number under the company name. in addition, you can manually set the performanceid of formview and the tag for creating itemtemplate. just as we did in the next section "display data using objectdatasource.

After modification, the flag of formview should look like this:

<Asp: formview id = "formview1" runat = "server" datakeynames = "supplierid" performanceid = "suppliersdatasource" enableviewstate = "false">
<Itemtemplate>
<H3> <% # eval ("companyName") %> <P>
<Asp: Label id = "addresslabel" runat = "server" text = '<% # BIND ("Address") %>'> </ASP: Label> <br/>
<Asp: Label id = "citylabel" runat = "server" text = '<% # BIND ("city") %>'> </ASP: Label>,
<Asp: Label id = "countrylabel" runat = "server" text = '<% # BIND ("country") %>'> </ASP: Label> <br/>
Phone:
<Asp: Label id = "phonelabel" runat = "server" text = '<% # BIND ("phone") %>'> </ASP: Label>
</P>
</Itemtemplate>
</ASP: formview>

Figure 16 shows the productsforsupplierdetails. ASPX page screenshot after the supplier information is included.

Figure 16: list of products with vendor Summary

Apply tips for the productsforsupplierdetails. aspx user interface.

To improve the user experience of the report, you should give productsforsupplierdetails. add something on the ASPX page. now, the user sends messages from productsforsupplierdetails. the only way for aspx to return to the Vendor List page is to click the back button of the browser. let's give productsforsupplierdetails. aspx adds a hyperlink control pointing to supplierlistmaster. aspx to provide another method to return to the supplier list.

Figure 17: Add a hyperlink control to allow users to return to supplierlistmaster. aspx

If you click the "view product" link of a supplier and the supplier does not have any products, productsforsupplierdetails. the productsbysupplierdatasource objectdatasource on aspx does not return any results. the gridview bound to objectdatasource does not display any markup, and is blank in the user's browser. to explicitly tell the user that there is no product associated with the selected supplier, we can set the emptydatatext attribute of the gridview to display the message when this happens. we set it to: "products without this supplier ...";

By default, all vendors in the northwinds database provide at least one product. however, in this tutorial, I have manually modified the product table so that the supplier escargots nouveaux will not be associated with any products. figure 18 shows the detailed page of the modified supplier escargots nouveaux.

Figure 18: the user is prompted that the supplier has not provided any products.

Summary

Master/Slave reports can display both master records and detailed records on one page. In many websites, Master/Slave records are also displayed separately on two pages. in this tutorial, we see how to implement this report. The report displays the Supplier List on the home page using the gridview, and the list of associated products on the details page. each supplier on the home page contains a link to the specified detail page and transmits the supplierid value. such links of specific rows can be easily implemented using the hyperlinkfield of the gridview.

The product obtained from the specified supplier on the details page is implemented by calling the getproductsbysupplierid (supplierid) method of the productsbll class. the supplierid parameter value is specified by the query string. we also see how to use formview on the details page to display supplier details

The next tutorial is the last part of the Master/Slave report. we will see how to list products in the gridview. Each row in the gridview has a selection button. click the select button to display the details of this product in the detailsview on the same page.

Happy programming!