ASP. NET 2.0 data Tutorial: display data in the GridView

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.

 

Display Data in the GridView: Add a new ObjectDataSource named ProductsBySupplierDataSource.

 

Display Data in the GridView: select the ProductsBLL class

 

Display Data in the GridView: Let the 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 ).

 

Display Data in the GridView: 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.

 

Display Data in the GridView: display 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.

 

Display Data in the GridView: Select SuppliersBLL class

Display Data in the GridView: Let the ObjectDataSource call the GetSupplierBySupplierID (supplierID) method.

Use the SupplierID value in the query string to assign a value to the supplierID parameter of ProductsBySupplierDataSource.

 

Display Data in the GridView: Make the supplierID parameter use 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" DataSourceID="suppliersDataSource" EnableViewState="False">  
  
  
< ItemTemplate>  
  
  
< h3>< %# Eval("CompanyName") %>< /h3>  
  
  
< 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.

 

GridView display data: A list of products that contain vendor summary information

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.

 

Display Data in the GridView: a HyperLink control is added 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.

 

Data displayed in the GridView: the user is prompted that the supplier has not provided any products.

1. ASP. NET 2.0 data Tutorial: Add An aspx page to a site
2. ASP. NET 2.0 data Tutorial: Create a master page
3. ASP. NET cross-page value passing skills
4. ASP. NET 2.0 data Tutorial: add custom encoding to DAL
5. ASP. NET 2.0 data Tutorial: completes the data access layer