ASP.NET 2.0 Data Controls
Author: Douglas Minnaar
The intent of this series is to provide more information concerning the functionality and limitations of the available ASP.NET 2.0 data controls. This will mostly be demonstrated through the use of code samples. Once this series is complete, I will demonstrate how one can AJAX enable some of these samples to improve the overall user experience. Therefore, this series will address the basics first before moving onto more advanced tools. Many will feel that there is enough information available concerning these matters. However, for completeness sake, I feel it is important to provide a good foundation from which to launch future articles from. The articles in this series will address typical scenarios that one might encounter in terms of developing with ASP.NET data controls.
There will be three parts in this series:
- Part 1 – ASP.NET GridView
- Part 2 – ASP.NET FormView and DetailsView
- Part 3 – ASP.NET Repeater and DataList
The SqlDataSource control is used throughout the series for simplicities sake.
Part 1 - ASP.NET GridView Data Control
This article is the first chapter in a series of articles pertaining to the understanding and application of ASP.NET 2.0 data controls. This article will address common functionality that may be required from ASP.NET GridView data controls.
Level: Novice - Intermediate
Prerequisites:
- In order for the sample code to run, one will require the Northwind database running on either SqlExpress or Sql2005.
- An understanding of C# and ASP.NET development code
Download the code here
Download the code here for a demonstration of how one would use a GridView with an ObjectDataSource
Introduction
Based on various Microsoft documentation, the ASP.NET GridView can be summarised as follows.
The ASP.NET GridView control is the successor to the v1.x DataGrid. Whereas the v1.x DataGrid required a page developer to write custom code to handle simple operations such as paging, sorting, editing or deleting data, the GridView control can automatically handle these operations provided its bound data source control supports these capabilities.
Therefore, the GridView control is used to display the values of a data source in a table. Each column represents a field, while each row represents a record. The GridView control supports the following features:
- Binding to data source controls, such as SqlDataSource.
- Built-in sorting capabilities.
- Built-in updating and deleting capabilities.
- Built-in paging capabilities.
- Built-in row selection capabilities.
- Programmatic access to the GridView object model to dynamically set properties, handle events, and so on.
- Multiple key fields.
- Multiple data fields for the hyperlink columns.
- Customizable appearance through themes and styles.
- New field types and templating
We will be using the SqlDataSource as a data provider in this example. The example will demonstrate the following features:
- Bind GridView to a SqlDataSource (It should be noted that I only use the SqlDataSource for demonstration purposes. I favour the ObjectDataSource over the SqlDataSource in terms of the development I have been involved in)
- Filter data using a query statement and ASP.NET DropDownList.
- Single and multiple rows select using ASP.NET CheckBox controls.
- Edit and Update behaviour with the ASP.NET RequiredFieldValidator control.
- Delete with confirmation dialog
- Master/Details using a modal dialog
- Master/Detail between GridView (master) and DetailsView (detail)
- Using the RowDataBound event
- Using the DataBound event
- Implement custom Paging
- Highlighting important data
- Use ASP.NET Panel to provide scrolling for GridView
- Use of TemplateFields and using DropDownList in GridView TemplateField
Bind GridView to a SqlDataSource
The SqlDataSource is configured as follows.
The results from binding to the SqlDataSource is demonstrated as follows.
Filter data using a query statement and DropDownList
This example demonstrates hot to filter data by Supplier. A DropDownList control is bound to a SqlDataSource control that retrieves a list of Suppliers. When a supplier is selected, the data in the GridView control will be filtered based on the selected Supplier.
The following code snippets demonstrate the ASP code that is required to enable the aforementioned filtering behaviour.
Code required setup Supplier DropDownList control
Code required as part of the SqlDataSource setup. A control parameter is used. Please review the sample code for a complete code listing.
The ‘SELECT’ SQL query statement specifies a ‘WHERE’ clause condition as “WHERE SupplierID = @SupplierID”
Single and multiple row select using ASP.NET CheckBox controls
The ability to select single or multiple GridView rows is shown in the following screen shots
Select all
Select single
The code has been documented to indicate how this behaviour is achieved. Please refer to the following code in the sample solution.
Edit and Update behaviour with the ASP.NET RequiredFieldValidator control
The following screen shot illustrates that when a row is in edit mode, a Product Name is required and cannot be left empty. If an attempt is made to update the row, a client-side validation event is raised to indicate that the product is required. To save space, an image is used to indicate a required field.
The ASP code required to provide the aforementioned behaviour.
Delete with confirmation dialog
Unfortunately, there is no setting that one can enable to allow one to have a confirmation dialog popup should a delete action be initiated. The following snippet demonstrates a way that one might use to create this kind of behaviour.
An ‘OnClientClick’ event handler is configured for the Delete ImageButton. The event handler will execute the ‘ConfirmDelete()’ javascript function.
The behaviour is demonstrated as follows.
Master/Details using a modal dialog
The following code snippet demonstrates how one might open a dialog window from a GridView control. When the ‘View Order Details’ image button is clicked, a modal dialog will be opened. Upon opening, the dialog window will load a GridView control with a summary of Order detail based on a ProductID. The ProductID is passed as a parameter as part of the javascript code required to open a modal dialog as can be seen in the snippet below.
The RowDataBound event is used to add javascript functionality to the ‘View Order Details’ ImageButton at runtime. This is illustrated below.
The result is visually demonstrated as follows:
It should be noted that a Base target is specified for the Page that is loaded in the modal dialog.
Master/Detail between GridView (master) and DetailsView (detail)
As part of using the modal dialog, a master/detail implementation is also demonstrated as follows. A GridView is used as the master control and a DetailsView as the detail. The GridView is populated via a SqlDataSource that retrieves a list of Orders based on a ProductID. The ProductID is passed as a QueryStringParameter as follows.
When a GridView row is selected, the DetailsView will display more detailed information pertaining to the selected Order in the GridView. A ControlParameter is once again used. A GridView is used as the control and passes the OrderID as a parameter.
The result of selecting a GridView row is demonstrated as follows.
Implement custom Paging
For the Master/Detail example, default numeric paging is used. For the Product GridView, a custom form of Paging is implemented. The following code snippets illustrate how this is achieved. Please refer to the following code in the actual code solution.
Also, the following ASP code is required.
Please take note of the ‘CommandArgument’ and ‘CommandName’ attributes.
The result of the aforementioned code a paging template that is displayed as follows.
Highlighting Important Data
It is possible to control the way cells are renedered in a GridView control. For demonstration purposes please review the following code in the sample solution.
The result of the aforementioned code is as follows.
- Unit Price is rendered to two decimal places. Please note that it is possible to do formatting via ASP code. I have chosen to show this behaviour in code.
- ‘Units in Stock’ is highlighted red when stock is zero or less that ‘Units on Order’. It’s green otherwise.
- ‘Unit Price’ is highlighted in Orange if the value is greater than 50.
- A checkbox image is used to indicate a Boolean
Use ASP.NET Panel to provide scrolling for GridView
A GridView is simply placed within a Panel control with scroll-bars enables. This provides a simple (‘quick and dirty’) scrolling mechanism.
Use of TemplateFields and using DropDownList in GridView TemplateField
When given the choice, I prefer to use TemplateField fields as a default. TemplateField fields provide far more control over the display of data than DataBound fields. One can also use DropDownList controls to provide a richer form of editing as follows.
The ASP code snippet for the TemplateField is illustrated as follows.
That’s it for Part 1 of ASP.NET data controls. Part 2 will address the ASP.NET FormView and DetailsView data controls.
|