ASP. NET 2.0 data Tutorial: select a row in the 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.

 

Select row in the GridView: Create an ObjectDataSource and name it AllProductsDataSource.

 

Select row in the GridView: Use the ProductsBLL class

 

Select row in the GridView: 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.

 

Select row in the GridView: Remove columns other than ProductName and UnitPrice.

The last GridView tag is as follows:

 
 

  
  
< asp:GridView ID="ProductsGrid" runat="server" AutoGenerateColumns="False" DataKeyNames="ProductID" 
  
  
DataSourceID="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.

 

Select rows in the GridView: 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" 
  
  
DataSourceID="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.

 

Select row in GridView: 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.

 

Select row in the GridView: Use the SelectedRowStyle attribute of the GridView to customize the appearance of the selected row.

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