Combine ASP. NET 2.0 Data Controls to build powerful user interfaces

Main controls

The detailsview and formview controls are powerful in displaying a single record in the backend data source, but it is unrealistic to force users to display countless records on a single page. Therefore, we can combine the gridview control with the detailsview or formview control to allow users to select a single column from the gridview control, then, use the detailsview or formview control to browse or manipulate the content. Therefore, gridview is the main control, while details are displayed through other controls.

The first step of this method is to try to select a single row in the gridview control (for example, you can allow users to select a row to display in other controls ). In addition, the selecterstyle attribute of the gridview control can explicitly set the style of the selected row, so that you can know or easily remember which row is selected.

You can use a command field to assist in row selection. The showselectbutton attribute of the commandfield object makes the object selected by the row. The buttontype attribute of commandfield allows you to control how to select. When a row is selected, the datakeyname attribute of the gridview control is assigned to the value of the selected item. This value may be passed to other controls by selecting events.

When you click the select button for a row in the gridview, the returned result is displayed and the selectedrow attribute of the gridview is updated. In addition to the selectedrow attribute, the gridview control also provides the selectedindex, selectedvalue, and selecteddatakey attributes. The selectedindex attribute returns the index of the selected row, while the selectedvalue and selecteddatakey attributes return the value of the datakeynames Attribute Based on the gridview.

Details

Now that the primary gridview control has been set, 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 the combination of the gridview control and other data controls is to use the instance code. The following gridview control connects to SQL servcer and displays data in the northwind database. Three controls are used: dropdownlist, gridview, and detailsview.

You can use the dropdownlist control to specify the data loaded to the gridview control. When you select a city, the response staff's data is loaded. Therefore, when a record is selected by the command button that shows the link label in the gridview control, the detailed information of the specified employee is displayed in the detailsview control. At the same time, the selected row is highlighted in yellow, so that you can easily identify the selected row.

The Code uses three sqldatasource objects to load data for each control. The gridview control uses the selected values in the SQL statements from the dropdownlist control. This is done by passing the values from the dropdownlist control to the SQL using the selectparameters attribute of the sqldatasource control. See list.

You can use the controlparameter object to obtain data from other controls on the form by specifying the ID and attribute of the data you want to use. When the selectedvalue attribute is passed, the key value is also transmitted from the gridview to the detailview control through the controlparameter object. Selectedvalue of the row selected in the gridview is assigned a value to the datakeynames value of the gridview control. In addition, to obtain data from controls, you can also use data from querysring, cookies, and many other options.

List B contains all the source code of Three Controls and objects for data loading. This example shows how to use a Data Control to manipulate data without writing any code. Each control provides a large number of events for writing code for these events to implement the same tasks and more other tasks in this article.

More powerful interfaces

ASP. NET 2.0 contains a large number of data controls represented by the gridview. We can use these controls to easily display data from backend data sources. You can also combine the gridview control with other controls such as detailsview or formview to manipulate more data objects, and display the data to be edited or browsed in a form field or in a separate form.

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

 

<% @ Page Language = "VB. NET" %>

<HTML>

<Head id = "head1" runat = "server">

<Title> master-Detail page example </title>

</Head> <body>

<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 = "10" 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 = "first" 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"
Performanceid = "sql1_c4"
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 = "first"/>

<Asp: boundfielddatafield = "region" headertext = "region"/>

</Fields>

</ASP: detailsview>

<Asp: sqldatasource connectionstring = "Server = localhost; database = northwind; trusted_connection = true" id = "sql1_c4"

Runat = "server" selectcommand = "select employeeid, lastname, firstname, region from employees where (employeeid = @ employeeid)">

<Selectparameters>

<Asp: controlparametercontrolid = "gridview1" name = "employeeid" propertyname = "selectedvalue" type = "string"/>

</Selectparameters>

</ASP: sqldatasource>

</Form> </body>