Combining asp.net 2.0 data controls to build a powerful user interface

Asp.net| Interface | control | data

In the previous columns, we introduced several data controls in asp.net 2.0:GridView, DetailsView, and FormView. In this article, I will combine these data controls to give a detailed description of the GridView control, so that users can get a detailed understanding of each data row.

Primary controls

DetailsView and FormView controls are powerful when displaying a single record from a backend data source, but it is unrealistic to force users to display countless records on a single page. To do this, we can combine the GridView control with the DetailsView or FormView control to let the user select a single column from the GridView control and then use the DetailsView or FormView control to browse or manipulate the contents. Therefore, the GridView is the primary control, and the details are displayed through other controls.

The first step in this approach is to try to select a single row in the GridView control (for example, you can allow the user to select a row to display in another control). In addition, the Selecterstyle property of the GridView control can explicitly set the style of the selected row so that the user knows or can easily remember which row is currently selected.

You can use a single command field to assist in line selection. The CommandField object's Showselectbutton property makes the object a row-selected object. The CommandField ButtonType property allows you to control how the selection is made, and when a row is selected, the Datakeyname property of the GridView control is assigned to the value of the selected item, which may be passed to other controls by selecting the event.

When you click the Select button for a row in the GridView, a Selectedrow property that returns and updates the GridView occurs. In addition to the Selectedrow property, the GridView control provides SelectedIndex, SelectedValue, and SelectedDataKey properties. The SelectedIndex property returns the index of the selected row, and the SelectedValue and SelectedDataKey properties return the values based on the DataKeyNames property of the GridView.

Details

Now that you have the main GridView control set up, you can add a DetailsView or FormView control to display the data in the selected row. In our example, the DetailsView control is added to the page where the GridView is located. In addition, DetailsView requires a data source, so another SQL Server data source is required. We want to display the data in the selected row in the GridView control, so we need to pass the ID of the selected row.

The best way to demonstrate that the GridView control is combined with other data controls is to take advantage of the instance code. The following GridView control connects to the SQL Servcer and displays the data in the Northwind database. Three controls are used here: DropDownList, GridView, and DetailsView.

Users can use the DropDownList control to specify the data that is loaded into the GridView control. The user selects a "city" and the data in response to the employee is loaded. Therefore, when a record is selected in the GridView control by a command button that appears as a link label, the details of the specified employee are displayed in the DetailsView control. At the same time, the selected row is highlighted in yellow, so that the user can easily identify which row is selected.

Three SqlDataSource objects are used in the code to load data for each control. The GridView control uses the selected value from the SQL of the DropDownList control, which is passed to SQL by using the SelectParameters property of the SqlDataSource control from the value of the DropDownList control. See below.

<asp:sqldatasource id= "DS" runat= "Server" selectcommand= "select EmployeeID, LastName, FirstName, Region from Employees WHERE (city= @City) "connectionstring=" server=localhost;database=northwind; Trusted_connection=true ">

<SelectParameters>

<asp:controlparametercontrolid= "DropDownList1" name= "City" Propertyname= "SelectedValue" type= "String"/>

</SelectParameters>

</asp:SqlDataSource>

You can use the ControlParameter object to get the data from other controls on the form by specifying the ID and attributes of the data you want to use. Also, when the SelectedValue property is passed, the key value is passed from the GridView to the DetailView control through the ControlParameter object. The SelectedValue of the selected row in the GridView is assigned with the DataKeyNames value that is specified to the GridView control. Also, to get data from a control, you can use data from querysring,cookies and many other options.

<%@ Page language= "C #"%>



<title>master-detail Page example</title>

<form id= "Frmmasterdetail" runat= "Server" >

<b>select a city:</b>

<asp:dropdownlist id= "DropDownList1" datasourceid= "SqlDataSource2" autopostback= "true"
datatextfield= "City" runat= "Server"/>

<asp:sqldatasource id= "SqlDataSource2" runat= "Server" selectcommand= "select DISTINCT City from Employees"

Connectionstring= "Server=localhost;database=northwind; Trusted_connection=true "/>

<asp:gridview id= "GridView1" allowsorting= "true" allowpaging= "true" runat= "Server"
Datasourceid= "SqlDataSource1" datakeynames= "EmployeeID"
autogeneratecolumns= "False" width= "427px" pagesize= "ten" backcolor= "#c0c0c0"
Bordercolor= "Black" borderstyle= "Groove" borderwidth= "5" caption= "GridView Example" >

<selectedrowstylebackcolor= "Yellow"/>

<Columns>

<asp:commandfieldshowselectbutton= "True"/>

<asp:boundfielddatafield= "EmployeeID" headertext= "ID" readonly= "True" sortexpression= "EmployeeID"/>

<asp:boundfielddatafield= "LastName" headertext= "Last" sortexpression= "LastName"/>

<asp:boundfielddatafield= "FirstName" headertext= "a" sortexpression= "FirstName"/>

<asp:boundfielddatafield= "Region" headertext= "Region" sortexpression= "Region"/>

</Columns>

</asp:GridView>

<asp:sqldatasource id= "SqlDataSource1" runat= "Server" selectcommand= "select EmployeeID, LastName, FirstName, Region from Employees WHERE (city= @City) "

 connectionstring= "Server=localhost;database=northwind; Trusted_connection=true "
 <selectparameters> 
 <asp:controlparametercontrolid=" DropDownList1 " Name= "City" Propertyname= "SelectedValue" type= "String"/> 
 </selectparameters> 
 </asp: Sqldatasource> 
 <asp:detailsviewautogeneraterows= "False" datakeynames= "EmployeeID" 
 datasourceid= " SqlDataSource3 "
 headertext=" Employee Details "id=" DetailsView1 "runat=" Server "width=" 275px "
 <fields 
 <asp:boundfielddatafield= "EmployeeID" headertext= "ID" readonly= "True"/> 
 <asp: Boundfielddatafield= "LastName" headertext= "last"/> 
 <asp:boundfielddatafield= FirstName "headertext=" /> 
 <asp:boundfielddatafield= "Region" headertext= "Region"/> 
 </fields> 
 </asp:d Etailsview> 
 <asp:sqldatasource connectionstring= "Server=localhost;database=northwind; Trusted_connection=true "id=" SqlDataSource3 "

runat= "Server" selectcommand= "select EmployeeID, LastName, FirstName, Region from Employees WHERE (EmployeeID = @Employee ID) ">
<SelectParameters>
<asp:controlparametercontrolid= "GridView1" name= "EmployeeID" propertyname= "SelectedValue" type= "String"/>
</SelectParameters>
</asp:SqlDataSource>
</form></body>
Includes the full source code of three controls and objects for data loading, this example demonstrates manipulating data with a data control without writing any code. Each control provides a large number of events that can be used to write code for these events to implement the same tasks and more other tasks in this article.

More powerful interfaces

ASP.net 2.0 includes a large number of data controls represented by the GridView, which we can use to easily display data from back-end data sources. You can also use the GridView control in conjunction with other DetailsView or FormView controls to manipulate more data objects and display the data you want to edit or browse in a form field or a single form.