Database Programming

Chapter 4 (Part 3)
What Are You Going To Learn?
• At the end of this lesson, you will be able to:
– use data bound controls
– apply data binding to data bound controls, such as
DropDownList

2/1
Data Bound Controls and Data Source Controls

• A simple way is to use data source controls, which allow you

to encapsulate data access in a control that you can configure
with connection and query information.

Namespace: System.Web.UI.WebControls

data bound controls

data source controls

3/1
Data Source Control
• The built-in data source controls
– SqlDataSource
– AccessDataSource
– ObjectDataSource
– XmlDataSource
– SiteMapDataSource
– LinqDataSource
– EntityDataSource (not in syllabus)

4/1
SqlDataSource Control
The "Sql" in the control name does not refer to
Microsoft SQL Server, but rather the SQL syntax for
querying relational databases.

• SqlDataSource control can be used to access not only

Microsoft SQL Server databases, but Microsoft
Access databases, Oracle databases and basically any
OLE-DB or ODBC-compliant data store.

5/1
Data Bound Control
• render data as markup to the requesting
browser.
• can bind to a data source control and
automatically fetch data at the appropriate
time in the page request lifecycle.

6/1
Data Bound Control (cont..)
• ASP.NET includes the data-bound controls
described as following:-
– GridView
– DetailsView
– FormView
– DataList
– Repeater
– List controls
• BulletedList, CheckBoxList, DropDownList, ListBox, and
RadioButtonList controls.
7/1
Data Bound Control (cont..)
– Menu
• Renders data in a hierarchical dynamic menu that can
include submenus.
– AdRotator
• Renders advertisements on a page as an image that
users can click to go to a URL associated with the
advertisement.
– TreeView
• Renders data in a hierarchical tree of expandable
nodes.

8/1
Overview of Data Binding
• Data Binding:
– Process of dynamically assigning a value to a
property of a control at run time.
• Example:
– You can use data binding to bind the properties of
a control to a data source such as the content of a
Microsoft SQL Server Express table.
• Data binding enables you to control exactly
when a value is bound to a property.
9/1
Binding a Server Control to a Data Source

• In this section, you will learn how to use data

binding with GridView, DataList, Detailsview,
FormView, Repeater, DropDownList,
radioButtonList, and ListBox controls.
• You will use the SqlDataSource property to
bind the items from SQL Server Express
Edition.

10/1
Gridview
Control displays data as a table and provides
the capability to sort columns, page through
data, and edit or delete a single record.

11/1
 GridView
• You can customize the appearance and behavior of the
GridView control by doing the following:

Utilizing templates to create custom Specifying custom columns and

user interface (UI) elements. styles.
Double-click the Gridview allows you adding your own code to the
functionality of the GridView control by handling events.
12/1
 DEMO

Binding to the GridView Control

DetailsView
Renders a single record at
a time as a table

provides the capability to page

through multiple records, as well
as to insert, update, and delete
records.
14/1
 DetailsView
Often used in master-detail scenarios where the selected record
in a master control such as a GridView control determines the
record displayed by the DetailsView control.

w
DetailsVie
Gridvie
w

15/1
DetailsView
DetailsView offers
additional
customization through
templates, which give
you more control over
the rendering of certain
elements

Similar to Gridview, DetailsView offers you paging,

inserting, editing and deleting command fields.
16/1
 DetailsView
• You can control the appearance of the DetailsView
The DetailView control supports the following Fields
BoundField Displays the value of a data item as text
CheckBoxField Displays the value of the data item as a check box

TemplateField Customize the appearance of a data item

ImageField Displays the value of a data item as an image
HyperlinkField Displays the value of a data item as a link
ButtonField Displays the value of a data item as a button,
imagebutton,
linkbutton
CommandField Displays links for editing, deleting and selecting rows
17/1
 DEMO

Binding to the DetailsView Control

 FormView

Similar to DetailsView, FormView renders a single record at a time

from a data source
Different from DetailsView, FormView does not specify a pre-
defined layout for displaying a record.
19/1
FormView

You can create templates that

contain controls to display
individual fields from the record

similar to the DetailsView,

FormView povides the capability to
page through multiple records, as
well as to insert, update, and
delete records,
20/1
 DEMO

Binding to the FormView Control

 Data-bound Controls Comparisons
Control Data Structure Capabilities Description and Primary Uses

GridView Table Read and edit Separate column for each field
Each field value in its own cell
Display multiple records in a grid
Edit existing records
DetailViews Table or Tree Read, edit, create Display single records
Default structure provided
Edit existing records
Create new records
FormView Table or Tree Read, edit, create Display single records
No default structure
Edit existing records
Create new records 22/1
Question
• Suggest the appropriate data bound control
that can be used to create the following
effects:

(a) (b)

23/1
 DataList

DataList control
explicitly places
items in an
HTML table

Renders data as table and enables you to display data

records in different layouts, such as ordering them in
columns or rows. 24/1
 The EditCommand event is raised when
DataList the Edit button is clicked for an item in
the DataList control
Datalist enables users to edit
or delete a record in the
table.

However DataList control

does not provide the
capabilities for you to
modify data; you must
supply this code yourself.

The UpdateCommand event is raised when the Update button for

an item is clicked 25/1
 DataList

Features of the templates:

• Enable you to apply complicated formatting
to each of the items displayed by a control.
• You can place any HTML tags that you
please within a template.
• A template can also contain other controls
and even inline ASP.Net code.

26/1
 Templates
Types Description
HeaderTemplate Contains the text and controls to render at the beginning and
/FooterTemplate end o the list, respectively.
ItemTemplate Contains the HTML elements and controls to render once for
each data item in the data source.
AlternatingItemTemplate Contains the HTML elements and controls to render once for
every other data item in the data source. Typically, this
template is used to create a different look for the alternating
items, such as a different background color than the color that
is specified in the ItemTemplate.
SeparatorTemplate Contains the elements to render between each item. A typical
example might be a line (using an <hr> element).

27/1
 DEMO

Binding to the DataList Control

Question
• fill in the names of the templates
(a)

(b)

(c)

(d)

29/1
Repeater
Repeater control has no
default look (while DataList
places items in a table)

Repeater control allows you

to define the layout of
individual items on a Web
page by using templates (for
you to create your own
custom layout to display any
data)

30/1
Repeater
• Because the Repeater control has no default look, you can
use it to create many kinds of lists, including the following:

31/1
Using Repeater Template
• Similar to DataList, all fields are displayed in
one cell on a repeater (one cell = one record)
• You must use templates to control output
formatting.

You may bind the data to a repeater from a DataSource control

32/1
 Repeater
<asp:Repeater ID="Rpt1" runat="server" DataSourceID = "DataSource1" >
<ItemTemplate>
<%#DataBinder.Eval(Container.DataItem, "FirstName" ) %><br/>
</ItemTemplate>
</asp:Repeater>

• Output table field custom formatting

Critina
Artonda DataBinder.Eval (object: container, string: expression)
Degama
Mia For any of the list Web controls, such as GridView,
Harry DetailsView, DataList, or Repeater, container should be
Prace Container.DataItem. (If you are binding against the page,
Kudo container should be Page)
Dhabi 33/1
DataBinder.Eval (object: container, string: expression)

Container:
• The object reference against which the expression is
evaluated. This must be a valid object identifier in the
page's specified language.

expression
• The navigation path from the container to the
property value to be placed in the bound control
property.
• This must be a string type of property or field names
34/1
 Repeater
<asp:Repeater ID="Rpt1" runat="server" DataSourceID = "DataSource1" >
<ItemTemplate>
<%#Eval("LastName" )%>, <%#Eval("FirstName“)%> <br/>
</ItemTemplate>
</asp:Repeater>

• Output table fields custom formatting

Anne, Critina
Joseph, Artonda Alternatively, we can use Eval() instead of
Alfanso, Degama
Mama, Mia
DataBinder.Eval()
Greece, Harry
William, Prace
Joe, Kudo
Abu, Dhabi 35/1
 DEMO

Binding to the Repeater Control

Binding to the List Controls – with
DataSource control

you need to set the

DataTextField and
DataValueField property
37/1
Binding to the List Controls – with Code
• Alternatively, you can write code to bind the
data to the list control.
//assume that connection and command have been established
dtrEmployees = cmdSelectEmployees.ExecuteReader();

CheckBoxList1.DataSource = dtrEmployees;
CheckBoxList1.DataTextField = "lastName";
//Use DataValueField if Value != Text
CheckBoxList1.DataValueField = " EmployeeID";
CheckBoxList1.DataBind();
…
38/1
Question
• Assuming part of the code is shown below. Discuss the
problem if the page is loaded again (for the 2nd time).
void Page_Load(object sender, eventArgs e)
{
string strCon = ConfigurationManager.ConfigurationSt…….;
SqlConnection con = new SqlConnection(strCon);
…
dtrStates = cmdSelectState.ExecuteReader();
ddlState.DataSource = dtrStates;
ddlState.DataTextField = “state";
ddlState.DataBind();
con.Close();
dtrStates.Close();
} 39/1
Binding to the List Controls – with Code
• What happen if neglecting the IsPostBack property:
– Decrease the performance of the page because the
records need to be retrieved from the database
every time the page is opened. Retrieving records
from a database is a resource-intensive task.
– if a user selects an Employees from the
DropDownList control, and you rebind the
DropDownList to the database table, the user’s
selection is lost. Binding a DropDownList resets the
SelectedIndex and SelectedItem properties of the
control. 40/1
 Data-bound Controls Compariso

Control Data Capabilities Description and Primary Uses

Structure
DropDownList Table or Tree Read only List of few fields
, ListBox

DataList Table or Tree Read and edit All field in one cell
One cell equals one record
Display multiple records in a grid
Create new record for GridView
Repeater Table or Tree Read only All field in one cell
One cell equal one record
Display multiple records in a grid.
Create new record for GridView display

41/1
 ®

Next Week

MEMBERSHIP AND ROLE

MANAGEMENT
42