The past two weeks I have examined using ASP.NET 2.0's GridView data control to view and manipulate data within a Web page. (You can catch up on parts one and two here.) While the GridView control makes it easy to work with sets of data, you often need to work with the data in individual GridView rows or records. Another new ASP.NET 2.0 control, DetailsView, makes it easy.
The DetailsView control
Working with individual data records required custom development in ASP.NET 1.1, but it is simple and straightforward in 2.0 with the DetailsView control. This control can bind to any data source and utilize its set of data operations.
The DetailsView control binds to a data source control. The data source control handles the details of connecting to a data store and returning the selected data. Binding the DetailsView control to data is as simple as setting the DataSourceID property declaratively. Also, the code option is available.
The operations will depend upon the data source, but the DetailsView control allows you to page, update, insert, and delete data from the underlying data source, as long at the operations are allowed by the underlying data source and respective SQL commands are defined. In keeping with the GridView control, the DetailsView control can easily be used without code.
You can use a DetailsView control with the syntax in Listing A. (You'll notice it uses many of the same properties supported by the GridView control.)
A more detailed overview of the overwhelming number of options is available online from Microsoft. In addition to controlling the paging options with the PagerSettings element, you can also control the presentation of the various areas of the control like the footer, header, individual rows, and so forth. The simple example in Listing B demonstrates the DetailsView control usage.
The example code binds the DetailsView control to the data source included on the page (SQL Server backend). The DetailsView control includes paging links (AllowPaging="true"), but the delete, edit, and update buttons are disabled. The paging links allow you to loop through the database records one by one. By default, paging links appear as number links directly below the data record. You can alter the appearance via the various paging options. Also, the delete and update buttons utilize the delete and update commands defined by the data source control to manipulate backend records.
The previous syntax listing includes the AutoGenerateRows property, which allows you to let the system generate the rows (true) or define it yourself (false). The Fields element is used to define the fields to be included in a DetailView control. The possibilities include the following:
- BoundField: Bind the field to a data item from the underlying data source.
- ButtonField: Include a button in the display.
- CheckBoxField: Include check box controls in the display.
- CommandField: Include command buttons in the display.
- HyperLinkField: Include URL links in the display.
- ImageField: Display underlying data as an image.
- TemplateField: Define a custom display format for a data element.
A more thorough examination of the available field types is available online.
Listing C utilizes BoundField field types to display data from the SQL Server data source with custom labels. Also, the example utilizes the delete, edit, and update button options via the following DetailsView object properties:
- AutoGenerateDeleteButton: Boolean value signaling whether the Delete button is displayed. The DeleteCommand of the associated data connection is used to perform the delete of the selected record.
- AutoGenerateInsertButton: Boolean value signaling whether the Insert button is displayed. The InsertCommand property of the associated data connection is used to perform the new record insertion.
- AutoGenerateEditButton: Boolean value determining if the Edit button is displayed. Selecting this button puts the record in edit mode and displays an update button to save the changes. The UpdateCommand property of the associated data connection is used to save the changes to the backend data source.
Note: The EmployeeID field is not editable with the ReadOnly flag set to true since it is the primary key on the underlying database table.
The TemplateField field type provides more control over data fields within the DetailsView data control. It allows you to control the appearance and behavior of the field when it is being edited, viewed, or a new value is being added. The following elements are used to control these behaviors:
- EditItemTemplate: Control the appearance of the field when the current DetailsView record is in edit mode.
- InsertItemTemplate: Determine how the field will appear when a new record is being added to the underlying data source.
- ItemTemplate: How the field appears when being viewed by the user.
Listing D displays the employee's hire data via a TemplateField field type. When the value is being edited or a new item is added, a calendar control is used to allow the user to easily enter date values. The date value is simply displayed via a Label control when the record is being viewed.
Ease of use
There is a focus in many of ASP.NET 2.0's features on ease-of-use. This is especially true of the new data controls with the DetailsView control. You can easily access and display data, as well as allow editing, deletion, and insertion with no code.
What do you think of the new data controls available in ASP.NET 2.0? Share your thoughts with the .NET community by posting to the article discussion.
Miss a column?
Check out the .NET Archive, and catch up on the most recent editions of Tony Patton's column.
Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.
Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a production environment on a daily basis.