Download - Data Bound Controls
-
7/29/2019 Data Bound Controls
1/49
Data-Bound Controls
-
7/29/2019 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.
-
7/29/2019 Data Bound Controls
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.
-
7/29/2019 Data Bound Controls
4/49
The class diagram for data-bound controls in ASP.NET 2.0
-
7/29/2019 Data Bound Controls
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.
-
7/29/2019 Data Bound Controls
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/29/2019 Data Bound Controls
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.
-
7/29/2019 Data Bound Controls
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.
-
7/29/2019 Data Bound Controls
9/49
Code Usage
-
7/29/2019 Data Bound Controls
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.
-
7/29/2019 Data Bound Controls
11/49
Code Usage
-
7/29/2019 Data Bound Controls
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.
-
7/29/2019 Data Bound Controls
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.
-
7/29/2019 Data Bound Controls
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..
-
7/29/2019 Data Bound Controls
15/49
Code usage
-
7/29/2019 Data Bound Controls
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).
-
7/29/2019 Data Bound Controls
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
-
7/29/2019 Data Bound Controls
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.
-
7/29/2019 Data Bound Controls
19/49
Configuring Columns
To statically declare your columns in the.aspx source file, you use the
tag, as shown here:
-
7/29/2019 Data Bound Controls
20/49
-
7/29/2019 Data Bound Controls
21/49
-
7/29/2019 Data Bound Controls
22/49
A GridView composed of different types of
columns
-
7/29/2019 Data Bound Controls
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.
-
7/29/2019 Data Bound Controls
24/49
-
7/29/2019 Data Bound Controls
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.
-
7/29/2019 Data Bound Controls
26/49
-
7/29/2019 Data Bound Controls
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
-
7/29/2019 Data Bound Controls
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.
-
7/29/2019 Data Bound Controls
29/49
To enable paging, all you do is enable paging capabilities on the
control. The property to use isAllowPaging.
-
7/29/2019 Data Bound Controls
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
-
7/29/2019 Data Bound Controls
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
-
7/29/2019 Data Bound Controls
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:
-
7/29/2019 Data Bound Controls
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.
-
7/29/2019 Data Bound Controls
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
-
7/29/2019 Data Bound Controls
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.
-
7/29/2019 Data Bound Controls
36/49
Code Usage
-
7/29/2019 Data Bound Controls
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
-
7/29/2019 Data Bound Controls
38/49
Code Usage-1
-
7/29/2019 Data Bound Controls
39/49
-
7/29/2019 Data Bound Controls
40/49
-
7/29/2019 Data Bound Controls
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.
-
7/29/2019 Data Bound Controls
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.
-
7/29/2019 Data Bound Controls
43/49
Displaying Data
-
7/29/2019 Data Bound Controls
44/49
C d U 1
-
7/29/2019 Data Bound Controls
45/49
Code Usage-1
The following code generates the page shown in the
figure in previous slide: ,
.
-
7/29/2019 Data Bound Controls
46/49
Country
Hired
Code Usage-2
-
7/29/2019 Data Bound Controls
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.
-
7/29/2019 Data Bound Controls
48/49
-
7/29/2019 Data Bound Controls
49/49