Data Bound Controls

7/29/2019 Data Bound Controls

1/49

Data-Bound Controls


2/49

Introduction

The DataGridis the principal control of mostdata-driven ASP.NET 1.x applications. It

generates a tabular representation of data and

offers advanced functionality such as paging,

sorting, and in-place editing. Like all ASP.NET 1.x controls, the DataGridis

fully supported in ASP.NET 2.0 but is partnered

with a newer control that is meant to replace it in

the long run. The new grid control,GridView, iscomplemented by other view controls, such as

DetailsViewand FormView.


3/49

Hierarchy of Data-Bound Controls

All controls descend from the same base class

BaseDataBoundControl.

BaseDataBoundControlbranches off into

two more specific child classesDataBoundControland

HierarchicalDataBoundControl.


4/49

The class diagram for data-bound controls in ASP.NET 2.0


5/49

The DataBoundControl Base Class

DataBoundControlis an abstract base

class that defines the common

characteristics of flat, nonhierarchical

controls that use a data source. The classdetermines how a data-bound control

binds to a collection of data items or to a

data source object.


6/49

You can group data-bound controls into

three categories: simple, composite, and hierarchical controls.

Properties of the DataBoundControl Class:

The DataBoundControlclass inherits fromWebControland can thus have all

the visual and style properties defined on the

base class. Examples of visual propertiesinclude BackColor, ForeColor, Font,

BorderStyle, and the new SkinID.


7/49

Data-Related Properties of

DataBoundControl

Property Description: DataMember: Selects the list of data that the

control should bind to when the datasourcecontains more than one list. For example, itspecifies the name of the DataTable to pick upwhen the control is bound to a DataSet.

DataSource: Indicates the data source to bindto. The data source must be an objectthat

implements the IEnumerable orIListSourceinterface.

DataSourceID: The ID of the data source objectto use to retrieve data.


8/49

Simple Data-Bound Controls:

ASP.NET 2.0 has two types of simple

data-bound controlstheAdRotatorcontrol

and list controls.TheAdRotatorcontrol is

extended to support data sources using thedefault data-binding model. Basically, the

ASP.NET 2.0AdRotatorcontrol is the same

as the one in version 1.x but with full support

for data binding.


9/49

Code Usage


10/49

The BulletedList Control

use the Bulleted Listcontrol to create a list

of items formatted with bullets.

usually do not statically generate the list

items fill the bulleted list via its data

binding capabilities.


11/49

Code Usage


12/49

The CompositeDataBoundControl

The CompositeDataBoundControlclass, whichinherits from DataBoundControl, is marked as

abstract and declares and implements the

Controls property.

The Controls property stores references to childcontrols.TheCompositeDataBoundControl

class also exposes the CreateChildControls

method.


13/49

Examples of Composite Data-Bound

Controls

ASP.NET 2.0 defines a few key composite data-bound controls, such as Grid-View, FormView,and DetailsView. The GridViewcontrol can beconsidered the successor to the DataGrid.

The DetailsViewcontrol provides a flexible andcustomizable user interface but a fixed layout.The FormViewcontrol is fully templatized.

The DetailsViewand FormViewcontrolsare typically employed to update existingrecords and insert new ones.


14/49

The GridView Object Model

The GridViewcontrol provides a tabular, grid-

like view of the contents of a data

source. Each column represents a data source

field, and each row represents a record.

The GridView Control in Action

Simple Data Binding..


15/49

Code usage


16/49

Adaptive Rendering of GridView control

Another important difference between theDataGridand GridViewcontrols is that the

adaptive rendering engine of Visual Studio

2005 server controls enables the GridViewto adapt its HTML output to the

characteristics of the browser( with special

attention paid to mobile devices).


17/49

Because of their limited screen size,

mobile devices often require that the

control reorganize the output to make it fit.

For devices with small screens, the

GridViewshows only a single record per

page and provides additional links to movebetween records.

Adaptive Rendering of GridView

control


18/49

Displaying Data

Like the DataGridcontrol, the GridView

supports custom column fields through the

Columns collection. If you want to display

only a subset of the retrieved data fields orif you simply want to customize their

appearance, you can populate the

Columns collection with objects thatrepresent columns of data.


19/49

Configuring Columns

To statically declare your columns in the.aspx source file, you use the

tag, as shown here:


20/49


21/49


22/49

A GridView composed of different types of

columns


23/49

Templated Fields

A TemplateFieldcolumn gives each row in the

grid a personalized user interface that is

completely defined by the page developer. You

can define templates for various renderingstages, including the default view, in-place

editing, header, and footer.


24/49


25/49

Sorting Data

The GridViewis designed to take advantage of

specific capabilities of the underlying data

source control. In this way, the grid control can

handle common operations on data such as

sorting, paging, updating, and deleting. To enable sorting on a GridView, the

following code would suffice.


26/49


27/49

When you run this code, each column that

has a nonempty SortExpression

property displays its header text as a

hyperlink. When a user clicks there, page

posts back and returns with the grids

contents sorted accordingly.

Sorting Data


28/49

Paging The Data-1

The ability to scroll a potentially large set of datais an important but challenging feature formodern, distributed applications. An effectivepaging mechanism allows customers to interact

with a database without holding resources. Likethe DataGrid, the GridViewcontrol provides abuilt-in mechanism for paging over the supplieddata source.


29/49

To enable paging, all you do is enable paging capabilities on the

control. The property to use isAllowPaging.


30/49

When theAllowPagingproperty is set to true,

the grid displays a pagerbar. You can control the

characteristics of the pager to a large extent

through the and tags or their equivalent properties.

The pager can work in either of two

modesdisplaying explicit page numbers

or providing a relative navigation system

Paging The Data-3


31/49

The buttons are present to navigate to the

next or previous page and even to the first

or the last. Ad hoc properties

NextPageTextand PreviousPage- Textlet you set the labels for these buttons as

desired.

Paging The Data-4


32/49

In-Place Editing and Updates

In-place editing refers to the grids ability tosupport changes to the currently

displayed records. You enable in-place editing

on a grid view by turning on the

AutoGenerateEditButton Boolean property:


33/49

DetailsView Control-1

Many applications need to work on a single

record at a time. ASP.NET 1.x has no built-in

support for this scenario. Creating a single

record view is possible, but it requires somecoding. You have to fetch the record, bind its

fields to a data-bound form.

In ASP.NET 2.0, the DetailsViewfulfills this role.

It is the ideal complement to the GridViewcontrol for building, easily and effectively,

hierarchical views of data.


34/49

Like the GridView, the DetailsViewcontrol can

bind to any data source control and exploit its

set of data operations. It can page, update,

insert, and delete data items in the underlyingdata source as long as the data source supports

these operations.

The DetailsViewcontrol doesnt support

templates. A fully templatized details viewcontrol is the FormView.

DetailsView Control-2


35/49

The DetailsView Control in Action

Building a record viewer with the DetailsView

control is easy and quick. You just drop an

instance of the control onto the Web form and

add a few settings.


36/49

Code Usage


37/49

As with the GridView, edit and delete operations

for the DetailsViewcontrol are handled by the

bound data source control, as long as the proper

commands are defined and a key field is

indicated through the DataKeyNames property:

Continue


38/49

Code Usage-1


39/49


40/49


41/49

The FormView Control

FormViewis a new data-bound controlthat works like the templated version of the

DetailsViewcontrol.

It renders one record at a time picked fromthe associated data source and optionally

provides paging buttons to navigate

between records.


42/49

Two functional aspects mark the

difference between FormViewand

DetailsView. First, the FormViewcontrol

has ItemTemplate, EditItemTemplate, and

InsertItemTemplate properties thatas

youve already seenthe Details-

Viewlacks. Second, the FormViewcontrol

lacks the command row, which is a

sort of toolbar where available functionsare grouped.


43/49

Displaying Data


44/49

C d U 1


45/49

Code Usage-1

The following code generates the page shown in the

figure in previous slide: ,

.


46/49

Country

Hired

Code Usage-2


47/49

The Edit button is added using a classic

button with the Edit

command name. This causes the

FormViewto switch from read-only mode

to edit mode and display using the

EditItemTemplate, if any is defined. In view mode, you use the Evalfunction to

bind data fields to controls.

Evalis useful only in read-only scenarios.


48/49


49/49

Documents

Data Bound Controls