Data operations in ASP.NET 2.0: Using two DropDownList filter master/from report self-study process

Introduction

In the previous guide we examined how to display a simple master/DropDownList report that uses the DropDownList and GridView controls to populate categories, and the GridView displays the products of the selected category. Such reports are appropriate for displaying records with a one-to-many relationship, and can easily be extended to display data for multiple one-to-many relationships. For example, an order system should contain tables that represent customers, orders, and order details. One customer may have multiple orders, and each order contains more than one order item. Such data can be presented to the user using two DropDownList and a GridView. The first DropDownList should contain a list of all the customers in the database, and the second DropDownList is the order for the selected customer. The GridView is used to list the order detail items for the selected order.
Step 1: Create DropDownList and populate with category data

Our first goal is to add a DropDownList that can list categories. These steps have been analyzed in detail in the previous guidelines, but there is a need to briefly summarize them in order to keep the integrity of this guide.

Open the masterdetailsdetails.aspx in the filtering folder, add a DropDownList to the page, set its ID to categories, and then click Configure Data on the smart tag Source link. Select a new data source in the Data Source Configuration Wizard.

Figure 1: Adding a new data source for the DropDownList

Of course, the new data source should be ObjectDataSource. Name the new ObjectDataSource as Categoriesdatasource and let him invoke the GetCategories () method of the Categoriesbll object

Figure 2: Choosing to use the CATEGORIESBLL class

Figure 3: Configuring ObjectDataSource using the GetCategories () method

After you configure ObjectDataSource, you also need to specify the data fields that you want to display in DropDownList, and the data fields that are values for the data item (value for the list item). We specify CategoryName as the column to display, Specify CategoryID as the Value field for the data item

Figure 4: Specify DropDownList to display the CategoryName column and use the CategoryID column as the value of the data item

At this point, we have a DropDownList control that is populated with records from the Categories table. When the user selects a new category in DropDownList, we need a postback, which refreshes the product DropDownList control we are creating in the second step. Therefore, the AutoPostBack option is selected on the Categoriesdropdownlist smart tag.

Figure 5: AutoPostBack selected for categories DropDownList

Step 2: Displays the selected category of products in the second DropDownList

Once the Categories DropDownList is complete, the next step is to have a DropDownList that displays the products that belong to the selected category. To complete this function, add a DropDownList control and name it productsbycategory. Like categories DropDownList, for Productsbycategory DropDownList creates a new ObjectDataSource and names it productsbycategorydatasource.

Figure 6: Adding a new data source for Productsbycategory DropDownList

Figure 7: Create a new ObjectDataSource and name it Productsbycategorydatasource

Because Productsbycategory DropDownList needs to display products that belong to the selected category, let ObjectDataSource invoke the Getproductsbycategoryid of the Productsbll object ( CategoryID) method.

Figure 8: Choosing to use the PRODUCTSBLL class

Figure 9: Configuring ObjectDataSource using the Getproductsbycategoryid (CategoryID) method

You need to specify the CategoryID value in the final step of the wizard. We use the categories DropDownList as the selected data entry item as the parameter value.

Figure 10: Using the CategoryID parameter to receive values from categories DropDownList

After the ObjectDataSource configuration is complete, the rest is to specify the fields to display DropDownList and the fields that are values. Set to display ProductName and ProductID as a value field

Figure 11: Specifying the data source fields used for text and values of DropDownList data items

After the ObjectDataSource and Productsbycategory DropDownList configuration is complete, there will be two DropDownList on the page: the first lists all the categories, and the second lists the products that belong to the selected category. When a user selects a new category on the first DropDownList, a postback (postback) occurs, and the second DropDownList is rebind to show the product belonging to the newly selected category. Figure 12 and Figure 13 show the Masterdetailsdetails.aspx page that is seen in the browser.

Figure 12: The Beverages category is selected the first time the page is accessed.

Figure 13: Display a product of this category when you select a different category

Figure 14: Activating the AutoPostBack property of the Productsbycategory DropDownList

Step 3: Use DetailsView to display the selected product details

The final step is to display the details of the selected product in DetailsView. To complete this feature, add a DetailsView to the page, set its id attribute to ProductDetails, and create a new ObjectDataSource for it. Configuration ObjectDataSource enables it to populate data with the Getproductbyproductid (ProductID) method of the Productsbll class, using Productsbycategory DropDownList the value of the selected item as the value of the ProductID parameter.

Figure 15: Choosing to use the PRODUCTSBLL class

Figure 16: Configuring ObjectDataSource using the Getproductbyproductid (ProductID) method

Figure 17: Using the value of the Productsbycategory DropDownList as the value of the ProductID parameter

You can select any valid fields that are displayed in the DetailsView. I decided not to display ProductID, SupplierID, and CategoryID fields and to reorder and format the remaining fields. In addition, I removed the DetailsView height and Width property settings, Allows DetailsView to be extended to the desired width, which is better than limiting it to a specified size to display the data. The following are all the markup languages (markup)

<asp:detailsview id= "productdetails" runat= "Server" autogeneraterows= "False" datakeynames= "ProductID" Datasourceid= "ObjectDataSource1" enableviewstate= "False" > <Fields> <asp:boundfield datafield= " ProductName "headertext=" Product "sortexpression=" ProductName "/> <asp:boundfield datafield=" CategoryName " headertext= "Category" readonly= "True" sortexpression= "CategoryName"/> <asp:boundfield "datafield=" SupplierName "headertext=" Supplier "readonly=" True "sortexpression=" SupplierName "/>" <asp:boundfield DataField = "QuantityPerUnit" headertext= "Qty/unit" sortexpression= "QuantityPerUnit"/> <asp:boundfield DataField= " UnitPrice "dataformatstring=" {0:c} "headertext=" "htmlencode=" False "sortexpression=" UnitPrice "/> <asp: BoundField datafield= "UnitsInStock" headertext= "UnitsInStock" sortexpression= "Units in the Stock"/> <asp: BoundField datafield= "UnitsOnOrder" headertext= "UnitsOnOrder" sortexpression= "Units on order"/> <asp:BouNdfield datafield= "ReorderLevel" headertext= "ReorderLevel" sortexpression= "Reorder level"/> <asp: CheckBoxField datafield= "discontinued" headertext= "discontinued" sortexpression= "discontinued"/> </Fields > </asp:DetailsView>

Take the time to test the masterdetailsdetails.aspx page in the browser. At first glance it seemed as if everything was going as well as expected, but there was a small problem. When you select a new category, Productsbycategory DropDownList updates the product that displays the selected category, but ProductDetails DetailsView or displays information about the previous product. DetailsView should be updated when a different product of a selected category is selected. Also, if your test is thorough enough, you will find that if you constantly choose a new category (such as selecting beverages in categories DropDownList, and then choosing Condiments, then Confections) The choice of each category will cause the ProductDetails DetailsView to be refreshed.

To make this problem more specific, let's look at an example. When you first visit the page, the Beverages category is selected and the product associated with it is listed in Productsbycategory DropDownList. Chai is the currently selected product, and his details are displayed in ProductDetails DetailsView, as shown in Figure 18.

Figure 18:detailsview shows the details of the selected product

If you change the Category option beverages to condiments, a postback will occur, and Productsbycategory DropDownList will update accordingly, but DetailsView will still display the chai details.

Figure 19: The details of the last product selection are still displayed

Selecting a product in the list refreshes DetailsView as expected, and if you change the product and then select a new category, DetailsView is not refreshed again. Then if you choose a new category instead of a product, DetailsView refreshes. What the hell is going on here?

This problem is caused by the scheduling of the page life cycle time. When a page is requested, it is rendered after a series of processing. One of the treatments is that the ObjectDataSource control checks whether his selectparameters value has changed. If a change occurs, the data that the Web control binds to the ObjectDataSource will refresh the display. For example, when a new category is selected, Productsbycategorydatasource ObjectDataSource finds that its parameter values have changed and then Productsbycategory DropDownList will rebind to get the product of the selected category.

The problem that occurs in this case is that the action to check whether the parameter has changed during the life cycle of the page is before the associated Web control objectdatasources. Therefore, when a new category is selected Productsbycategorydatasource ObjectDataSource will check that its parameter values have changed. However, the ObjectDataSource used by ProductDetails DetailsView has not changed since Productsbycategory DropDownList has not been rebind. In a later lifecycle, Productsbycategory DropDownList rebind to its ObjectDataSource to get the product that just selected the category. When the value of the Productsbycategory DropDownList changes, the ObjectDataSource of ProductDetails DetailsView has completed its parameter value checking work. As a result, DetailsView still displays the previous data. Figure 20 depicts the process of this interaction.

Figure 20:t ProductDetails DetailsView ObjectDataSource the value of Productsbycategory DropDownList changes after the end of the check work.

To solve this problem, we need to explicitly rebind the ProductDetails DetailsView after productsbycategory DropDownList binding. We can invoke the DetailsView () method of the ProductDetails DataBind in the DataBound event of the Productsbycategory DropDownList. Add the following event-handling code to the code-behind class for the Masterdetailsdetails.aspx page:

protected void Productsbycategory_databound (object sender, EventArgs e)
{

 productdetails.databind ();

}

After you add an explicit call to the DataBind () method of the ProductDetails DetailsView, everything is fine. Figure 21 highlights how this approach solves the problem.

Figure 21: ProductDetails DetailsView displayed refresh in the DataBound event of the Productsbycategory DropDownList.

The DropDownList control is a very desirable user interface element for a master/from report (the master record and a one-to-many relationship from the record). In the previous tutorial we saw how to use a single DropDownList to filter products for the selected categories. In this tutorial we use the GridView instead of DropDownList as a product list, using DetailsView to display the details of the selected product. The concepts discussed in this tutorial can easily be extended to data models that contain multiple one-to-many relationships, such as customers, orders, and order items. Usually, in a one-to-many relationship you can always use DropDownList to represent the "primary" entity (one in multiple, master record for Master/from relationship)

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/.