Data operations in ASP.net 2.0 nine: Cross-page master/from report self-study process

Introduction

In the previous two tutorials, we saw how to display the Master/detail report in a single page, using DropDownList to display the master record, and using the GridView or DetailsView to display the details. Another common master/detail mode is to display the master record in one page and display the details on another page. Forums on the Internet, such as www.asp.net, are typical examples of this pattern in practical applications. The ASP.net forum consists of multiple sub forums: Getting Started, Web Forms, Data presentation Controls, and so on. Each sub forum contains multiple topics, each of which consists of multiple posts. These sub forums are listed on the ASP.net Forum home page, and clicking one of these forums will go to the Showforum.aspx page, which lists the topics that this sub-forum contains. Similarly, clicking a theme turns to showpost.aspx, which displays a post for the topic you clicked.

In this tutorial, we will use the GridView to list vendors to implement this pattern. Each line in the GridView (a row is a vendor) contains a link to "view products." When clicked, the link will go to a different page that shows all the products selected by the vendor.

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

When we defined the page structure in the third tutorial, we added several start pages to the basicreporting, filtering, and customformatting folders. We haven't added a start page to this tutorial, Add two pages to the filtering folder: Supplierlistmaster.aspx and productsforsupplierdetails.aspx. Supplierlistmaster.aspx will list the master record (vendor) productsforsupplierdetails.aspx will display the selected vendor's products.

When you create these two pages, be aware that you want them to be associated with Site.master master pages.

Figure 1: Adding supplierlistmaster.aspx and productsforsupplierdetails.aspx under the filtering folder

In addition, after you have added two files to the project, be sure to update the site map file Web.sitemap accordingly. For this tutorial simply use the following XML content as the child node of the element

Tip: Use K. Scott Allen's free visual Studio site map macro can help you update your site map automatically when new asp.net pages are added.

Show list of suppliers in step 2:supplierlistmaster.aspx

After adding supplierlistmaster.aspx and productsforsupplierdetails.aspx, the next step is to create a GridView that shows the vendor on the supplierlistmaster.aspx page . Add a GridView to the page and bind to a new ObjectDataSource, the ObjectDataSource should use the Getsuppliers () method of the Suppliersbll class to return all vendors.

Figure 2: Selecting the Suppliersbll class

Figure 3: Configuring ObjectDataSource using the Getsuppliers () method

We need to include a "view Products" link in each GridView line, which will go to the Productsforsupplierdetails.aspx page when clicked, and in the query string (querystring) Passes the SupplierID value of the selected row. For example, if the user clicks the "View Products" link for the Vendor Tokyo Traders (SupplierID value is 4), will it go to productsforsupplierdetails.aspx? Supplierid=4.

To implement this feature, add a HyperLinkField column to the GridView, which adds a link for each GridView row. First, click the Edit Column link on the GridView smart tag. Then select HyperLinkField in the list in the upper-left corner and click New Add HyperLinkField to the field list of the GridView.

Figure 4: Adding HyperLinkField to GridView

HyperLinkField can be configured to use the same text or URL values in each GridView row, or to base these values on data values that are bound to a particular row. To specify a static value that is the same for all rows, use the HyperLinkField text or NavigateUrl property. Because we want each line of link text to be consistent, set the HyperLinkField Text property to "view products."

Figure 5: Setting the HyperLinkField Text property to "view Products"

To have the text or URL based on the underlying data that is bound to the GridView line, you can specify the data field from which the text or URL will get data from DataTextField or DataNavigateUrlFields. DataTextField can only be set to a single data field; DataNavigateUrlFields can be set to a comma-delimited list of data fields. We need to have the text or URL based on the data field values and some tags for the current row. For example, in this tutorial, we want the HyperLinkField link URL 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-driven values. Productsforsupplierdetails.aspx? Supplierid= This part is a static value. The SupplierID part is data driven, and its value is the SupplierID value of each row.

To specify a mixture of static values and data-driven values, use the Datatextformatstring and Datanavigateurlformatstring properties. Enter static text as necessary in these properties to use the {0} tag to display specific fields in the DataTextField or DataNavigateUrlFields properties. If you have more than one field in DataNavigateUrlFields, use {0} when you need the first field, the second field uses {1}, and so on.

For our tutorial, we need to set DataNavigateUrlFields as SupplierID because we need to customize the links for each row using the data field.

Figure 6: Configure HyperLinkField to use the appropriate SupplierID-based link address.

After you have added HyperLinkField, you can customize and rearrange the fields of the GridView. Here's what I did with the modified tag (markup):

Visit the supplierlistmaster.aspx in the browser. As shown in Figure 7, the page lists all of the vendors, each containing the "view Products" link. Clicking the view Products link will go to productsforsupplierdetails.aspx and pass the vendor's SupplierID value in the query string.

Figure 7: Each vendor contains a "View Products" link.

Step 3: List the suppliers ' products on the productsforsupplierdetails.aspx

The supplierlistmaster.aspx page causes the user to go to productsforsupplierdetails.aspx and pass the selected vendor's SupplierID value in the query string. The final step in this tutorial is to display the product in the GridView on the Productsforsupplierdetails.aspx page. To implement this feature, first add the GridView to the productsforsupplierdetails.aspx and use a new ObjectDataSource control named Productsbysupplierdatasource. The control invokes the Getproductsbysupplierid (SupplierID) method of the Productsbll class.

Figure 8: Adding a new ObjectDataSource named Productsbysupplierdatasource

Figure 9: Selecting the Productsbll class

Figure 10: Let ObjectDataSource invoke the Getproductsbysupplierid (SupplierID) method

The final step in configuring the Data Source Wizard is to provide us with the source of the SupplierID parameters in the Getproductsbysupplierid (SupplierID) method. To use the value in the query string. Set the parameter source to querystring and enter the name of the query string value (SupplierID) in the Querystringfield text box.

Figure 11: Using the SupplierID value in the query string as the value of the SupplierID parameter

That's it! Figure 12 shows what you see when we click the Tokyo Traders vendor's "View Products" link in the Supplierlistmaster.aspx page.

Figure 12: Products showing Tokyo traders vendors

Display Vendor information in productsforsupplierdetails.aspx

As shown in Figure 12, productsforsupplierdetails.aspx only lists the products of the SupplierID vendor that are specified in the query string. However, some people will get to the page directly, so they are not sure of the product that Tokyo trader is shown in Figure 12. To fix this problem, we can display the vendor's information on the page.

Add a FormView above the GridView. Create a ObjectDataSource control and name it Suppliersdatasource. The control invokes the Getsupplierbysupplierid (SupplierID) method of the Suppliersbll class.

Figure 13: Selecting the Suppliersbll class

Figure 14: Let ObjectDataSource invoke the Getsupplierbysupplierid (SupplierID) method

Use the SupplierID value in the query string to assign a value to the Productsbysupplierdatasource SupplierID parameter.

Figure 15: Let the SupplierID parameter use the value of the SupplierID in the query string

When you bind FormView to ObjectDataSource in Design view, Visual Studio automatically creates FormView ItemTemplate, InsertItemTemplate, and EditItemTemplate three templates that use the label and TextBox Web controls to render data returned from ObjectDataSource. Because we only need to display vendor information, we can remove the InsertItemTemplate and Edititemtemplat templates. Then, edit the ItemTemplate template so that it displays the vendor's company name in the label, with the address, city, country, and telephone number under the company name. Alternatively, you can set the FormView DataSourceID and create ItemTemplate tags manually. Just as we did in the "Show Data using ObjectDataSource" section later in the article.

When modified, the FormView tag should look like this:

<asp:formview id= "FormView1" runat= "Server" datakeynames= "SupplierID" datasourceid= "Suppliersdatasource" Enableviewstate= "False" >
<ItemTemplate>
 
 

Figure 16 shows a screenshot of the Productsforsupplierdetails.aspx page that contains the vendor information.

Figure 16: A list of products containing the vendor's summary information

Apply tips for productsforsupplierdetails.aspx user interface.

To improve the user experience of the report, you should add something to the Productsforsupplierdetails.aspx page. The only way for users to return to the Vendor List page from Productsforsupplierdetails.aspx now is to click the Back button on the browser. Let's add a hyperlink control to productsforsupplierdetails.aspx that points to supplierlistmaster.aspx, which gives the user another way back to the vendor list.

Figure 17: Adding a Hyperlink control allows the user to return to the supplierlistmaster.aspx

If the user clicks on a vendor's "View Products" link, and the vendor does not have any products, the productsforsupplierdetails.aspx on the Productsbysupplierdatasource ObjectDataSource will not return any results. The GridView bound to ObjectDataSource does not render any markup and is displayed as blank in the user's browser. To explicitly tell the user that there is no product associated with the selected vendor, we can set the Emptydatatext property of the GridView to be the message we want to display when this happens. We set it to: "No product of 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 vendor Escargots nouveaux no longer associates any products. Figure 18 shows the detailed page of the modified vendor escargots nouveaux.

Figure 18: Prompts the user that the vendor does not provide any products.

Summarize

Master/from reports can display both master and detail records on a single page, and on many sites, master/From records are displayed separately on two pages. In this tutorial we see how to implement this report, which displays a list of vendors with the GridView on the main page and a list of the associated products on the detail page. Each vendor on the main page contains a link to the specified detail page and passes the SupplierID value. Such a specific line of links using the HyperLinkField of the GridView can be easily implemented.

The product that gets the specified vendor in the detail page is implemented by invoking the Getproductsbysupplierid (SupplierID) method of the Productsbll class. The SupplierID parameter value is specified by the query string. We also saw how to use FormView to display vendor details in a detail page

The next tutorial is the last part of the master/from report. We'll see how to list the products in the GridView, and each row in the GridView has a Select button. Clicking the Select button displays the details of the product in DetailsView on the same page.

I wish you a happy programming!

Author Introduction

Scott Mitchell, with six asp/asp. NET book, is the founder of 4GuysFromRolla.com, has been applying Microsoft Web technology since 1998. Scott is an independent technical consultant, trainer, writer, recently completed a new book to be published by Sams Press, proficient in asp.net 2.0 within 24 hours. His contact email is mitchell@4guysfromrolla.com, or he can contact him through his blog http://scottonwriting.net/.