ASP.NET v2.0 (IV): Data Source Controls, data bound controls and databinding (B)

By: Chris Sully Date: November 13, 2007 Printer Friendly Version

Introduction

This article is part 2 of the fourth in a series looking at ASP.NET 2.0 though it follows on from my earlier overview articles on the subject. Here's what we've covered thus far:

I: we looked at the enhancements to existing controls.
II: we proceeded to provide an overview of the new controls that have been introduced.
III: we looked at the changes to the compilation and deployment architecture in v2.0 as well as briefly looking at the tool support in VS .NET 2005.

As promised after 3 overview articles we moved away from the high level material to look in more detail at the nuts and bolts of the changes from v1.X to 2.0 with a couple of articles looking at data source controls, data bound controls and data binding in 2.0. As this was a large topic we split the content into A and B articles. A was about data source controls and this article, B, is concerned with the key, new data bound controls, namely the GridView, DetailsView and FormView controls

The GridView

We saw some examples of the GridView in action in part A of this article. The GridView is the ASP.NET 2.0 version of a 1.X favourite, the DataGrid. It effectively extends it to provide optimal support for the new data source controls as well as extending the built in functionality.

I'll assume you are familiar with the DataGrid and will focus on where the GridView differs. The GridView adds extra features, for example support for multiple field primary keys, extended appearance customisation, new column types and templating options as well as a new model for event handling. In fact the ASP.NET 2.0 team's objectives for all three of the new databound controls can be summarised as follows:

• Support the new data source controls
• To provide 'codeless' support for sorting, paging, editing and updating functionality
• Support the adaptive page rendering approach of 2.0, providing better support for user agents including mobile devices
• Better templating options to provide better support for custom paging and null values
• Additional features: multiple field primary keys, hyperlink columns with more than one data field, columns of checkboxes and columns with standard buttons

The DataGrid is a complex control and as you might expect with the above extra functionality the GridView is more so. See the SDK documentation for a full overview of the control members but let's pull out a few examples after discussing briefly a few key areas.

When a datasource control and a GridView are combined there is no need to write code to initiate data binding as the DataBind method of the GridView is called automatically. However, if you do want to do things the 'old fashioned way' the DataSource and DataMember properties and DataBind method remain exposed.

The events raised by the GridView as it binds to the datasource that you may respond to as a programmer are as follows:

• PageIndexChanging and PageIndexChanged
• RowCancelingEdit, RowCommand, RowCreated, RowDataBound, RowDeleting, RowDeleted, RowEditing, RowUpdating, RowUpdated
• SelectedIndexChanging, SelectedIndexChanged
• Sorting, Sorted

Notes:

• You will need to replace the connection string in the following code sample with that which is pertinent to your own system set up.
• I'm using the AdventureWorks sample database MS provides for SQL 2005 and will continue to do so for demonstration purposes throughout this series of articles. See http://www.microsoft.com/downloads/details.aspx?FamilyID=e719ecf7-9f46-4312-af89-6ad8702e4e6e&DisplayLang=en.

Example: GridView Event Handling

Aspx:

Codebehind:

This example reacts to the RowDataBound to display the title in italics. A trivial example which can probably be achieved better in other ways but serves as an example. Note also how simple it is to add paging but an immediate warning – paging relies on DataSets and is Ok for relatively small amounts of data but the inbuilt solution does not scale well so if potentially returning thousands of large records an alternative solution should be considered. Also note that this will impact on other out of the box support of the GridView such as sorting. For now, you should also be aware that you can include a nested PagerStyle element, and/ or a nested PagerSettings element, within the GridView control, with the latter being particularly useful for controlling how pager navigation is presented.

By default on mobile or other small screen devices when the first page loads only the column specified by name via the SummaryViewColumn property is displayed. This then renders a link that displays all the column values for just that row, as appropriate to the more limited display capital.

The GridView can automatically generate columns via the AutoGenerateColumns property. It acts like a BoundField and CheckBoxField (for Booleans). If set to false you have more granular control over the columns. The new controls are named xxxField to differentiate them from the xxxColumn controls used in the DataGrid.

• BoundField – value returned as a string, or TextBox in edit mode
• ButtonField – value returned as a property of a button of the various types supported
• CheckBoxField – value returned as CheckBox control, usually for Boolean values
• HyperLinkField – value returned as a property of a HyperLinkControl
• TemplateField – different templates can be included for a mode variant display, particularly useful when validation controls are needed in Edit mode.
• CommandField – buttons for commands (select, edit, delete, insert, cancel)

The DetailsView Control

The DetailsView control facilitates the display of one record at a time and can be used standalone, or in conjunction with the GridView to provide a Master-Details display (in fact this is how the rendering for mobile devices works as introduced earlier). If using standalone you need to enable the paging features to allow user navigation.

Example: linked GridView and DetailsView

This is a view only implementation but you can similarly extend the solution to allow editing of data by the DetailsView.

I'll finally mention the FormView control. This functions like the DetailsView in that it displays a single data item from a bound data control and allows viewing, adding, editing and deleting data but it does so via custom templates thus giving greater control over how the data is displayed and edited. In doing so however, you must explicitly define the data binding, e.g.

Note that this differs from ASP.NET 1.X. There is a consideration here regarding the nature of the binding we should mention. The new databinding controls in 2.0 support automatic databinding to a datasource control. This process also supports editing the data and automatically pushes the updates etc. back to the original datasource. In the GridView and DetailsView this works because the standard field controls used to generate the columns can connect the individual edit controls in each column with the appropriate fields in the data source. However, when you use templates the controls cannot perform this automatic linkage. In this case another form of data binding syntax must be used instead - the Bind method:

<%=Bind("Title")>%>

So please bear this in mind when considering the correct way to implement controls like the FormView.

Summary

In this article we took a closer look at the two key new data bound controls in ASP.NET 2.0: the GridView and the DetailsView and also had a passing glance at the FormView. The main topic of the next article in the series will be master pages.

References

ASP.NET v2.0 – the Beta Version
Homer et al.
Addison-Wesley

Professional ASP.NET2.0
Evjen et al.
Wrox

ASP.NET 2.0 SDK documentation