Transcript Building Data-Driven ASP.NET Applications

Building Data-Driven ASP.NET
Applications
Introduction to ASP.NET
By Kathleen Kalata
Chapter 7
1
Objectives
• In this chapter, you will:
• Learn about the various methods used to bind
data to ASP.NET controls
• Bind an array to various data controls
• Bind a hash table to a DataGrid and Repeater
control
• Populate a DropDownList control from an array
Chapter 7
2
Objectives
• In this chapter, you will:
• Populate a DataGrid control from a hash table
• Modify the appearance of a DataGrid control
using templates
• Modify the appearance of a Repeater control
using templates
• Modify the appearance of a DataList control using
templates
Chapter 7
3
Data Binding Techniques
• A data source can be a simple hash table, an array,
or a database
– Data can be displayed as a simple list, a drop-down list, or a
table
• Single-expression Binding
– Single-value binding is used to bind a single value or
expression to a control
• Use the pound sign (#) before the expression name
• Enclose the expression within inline server tags (<% %>)
<% dim ImageURL As String = "logo.gif" %>
<img name="Logo" src="<%# ImageURL %>" alt="Logo" />
Chapter 7
4
SingleBind.aspx
• Create a Property
ReadOnly Property ImageURL() As String
Get
Return "logo.gif"
End Get
End Property
• Create a Function to return a value
Function GetImageURL() As String
Return "images/logo.gif"
End Function
• Bind the data in the Page_Load event procedure
Page.DataBind()
Chapter 7
5
Return an Expression
from a Property or Function
Chapter 7
6
SingleBind.aspx
• The label and text box controls are bound to the value from the
ImageURL property and the image button control is bound to
the value from the GetImageURL function
– Change the href property to images/<%# ImageURL %>
– Change the src property of imgHTMLImageURL to
<%# GetImageURL %>
– Change the lblImageURL text property to <%# ImageURL %>
– Change the txtImageURL value property to <%# ImageURL %>
– Change the imgImageURL imageURL property to <%#
GetImageURL %>
Chapter 7
7
Binding Data Controls
to a Single Expression
Chapter 7
8
Repeated-Expression Binding
• The repeated expression which is bound to the data
control can be a collection, such as a hash table, or
an ArrayList
– You can also bind the data to a DataSet, DataView, or
DataReader
– Data controls inherit from the ListControl and BaseDataList
classes. Controls share many properties such as
DataSource and templates
– The repeater control inherits directly from the
System.Web.UI.Control class
Chapter 7
9
Web Data Controls
Chapter 7
10
Data Sources
• DataSet object - a cached set of records retrieved
from the database. It can contain one or more
DataTables
– You can identify which table members are bound to the
control with DataMember property of the DataSet
• DataView object - contains a subset of rows of data
from a DataTable
• DataReader object - a read-only, forward-only stream
of data from the database
Chapter 7
11
Web Data Controls
• Data Binding Controls are used to bind to the data
sources, and then display the data in the Web page
– DropDownList control - displays one value at a time using
the HTML select tag
– ListBox control - displays all the values at the same time
using the HTML select tag
– Repeater control - a small, lightweight control that displays
the data using HTML controls that you can define. It simply
repeats the content that you define
– DataList control - displays the data as a basic list
– DataGrid control - repeats content you define once for each
data row and places the data in a table or uses a <br /> tag
after each row as a delimiter
Chapter 7
12
Binding Data to
a DropDownList Control
• Create an ASP.NET DropDownList control using the
procedures listed on pages 298 through 300 of the
textbook
• In the Page_Load event handler create a onedimensional ArrayList named arr1
– Use the add method to add the items to the array
– Use the IsPostBack property of the page class to determine
if this page has been resubmitted to the server
Chapter 7
13
Binding Data to a
DropDownList Control
Chapter 7
14
Binding Data to a ListBox Control
• Create an ASP.NET ListBox control using the steps
illustrated on pages 301 through 303 of the textbook
• The ListBox control generates an HTML <select> tag
– Each item corresponds to an <option> in the <select> tag
– DataTextField property - text which is displayed
– DataValueField property - to specify the value property of
the HTML <option> control
– DataTextFormatString - formats the value
Chapter 7
15
Binding Data to a ListBox Control
Chapter 7
16
Binding to RadioButtonList and
CheckBoxList Controls
• Each item in the DataSource property will
correspond to an <input> tag where the type is listed
as radio or checkbox
• Create an ArrayList and a hash table and bind the
RadioButtonList and CheckBoxList controls to the
ArrayList using the processes outlined on pages 303
through 306 of the textbook
– DataTextField - The text which is displayed
– DataValueField - The value of the items, displayed in HTML
Chapter 7
17
Binding Data to CheckBoxList
and RadioButtonList Controls
Chapter 7
18
Binding to a DataGrid Control
• The code to insert an ASP.NET DataGrid control is
illustrated using the procedures shown on pages 307
through 309 of the textbook
– The AutoGenerateColumns property allows you to specify
the columns that you want to bind to your data source.
– The HeaderText property allows you to change the string
displayed at the top of the column headings.
– The DataFormatString property is used to display currency
and is applied to the values displayed within the DataGrid
control. The {0:C} will format the value as currency.
Chapter 7
19
Adding Bound
Columns to a DataGrid
Chapter 7
20
DataGridSimple.aspx
Chapter 7
21
Binding to a DataList Control
• The DataList control allows you to display values as a
simple list
• When you add the DataList controls you need to identify the
columns to bind to the data
– DataList control is bound to the key and value items of the
hash table when you perform the steps listed on pages 309
through 311 of the textbook
Chapter 7
22
Binding to a DataList Control
Chapter 7
23
Binding to a DataList Control
• The data binding instructions are stored within the
templates
– The DataList control requires you to configure an
ItemTemplate within the control in order to display the data
– Within the ItemTemplate is the DataItem
– The DataRow is referenced as a DataItem object within the
container control and the field
– The DataList control appears as a visual gray box in the
Design View
– The DataBinder.Eval evaluates the entire expression with
the parameters that are passed
Chapter 7
24
Binding Data to a Repeater Control
• The Repeater control allows you to bind read-only
data to a list
– The Repeater can be used to create tables, commadelimited lists, bulleted lists, and numbered lists
– Use the HTML View of the WebForm to modify the control
– The templates available include the header, footer,
alternating, item, and separator
– To position the Repeater, use the HTML <div> tag or
ASP.NET Panel control
Chapter 7
25
Binding to a Repeater Control
• The data is inserted into the Repeater control with an
ItemTemplate
• Format the value of the Repeater control as currency
using the same format as the DataList control while
following the directions on pages 312 and 313 of the
textbook
– Key property - to indicate the key from the data source
– Value property - to pass the value from the data source
– The Container.DataItem represents each item within the data
source
Chapter 7
26
Binding Data to
a Repeater Control
Chapter 7
27
Binding a DataView
to a DataGrid Control
– Bind a DataGrid to a different data source using the
DataSource property
– There are two main ways to connect to the database
– Use the DataReader object to create a connection to
the database and receive records individually
– Create the connection string and all of the data
objects; create an SQL Select statement to retrieve all
of the records for the first category using the
procedures outlined on pages 315 through 322 of the
textbook
Chapter 7
28
Binding a DataView
to a DataGrid
• Use the graphical user interface to bind the DataSource
property to a database table named Products which is stored in
the TaraStore.mdb database file
– The two tables are Products and Categories
• Use the DataAdapter to manage the connection with the
database and return the DataSet object
– Create the Data Connection
• Use the Query Builder to generate the SQL Statement
– The DataSet will contain a single table named Products, with a
single DataView
Chapter 7
29
Using the Query Builder
Chapter 7
30
Binding a DataView
to a DataGrid
• Create a DataSet object and use the menu commands to
Generate Dataset
• Preview the DataSet
– The page uses the default DataView to retrieve the data and
displays the default DataGrid
• In the Page_Load handler, add the code to fill the
DataAdapter and to bind the data control to the data source
Chapter 7
31
Binding a DataView
to a DataGrid
Chapter 7
32
Binding a DataGrid to a Database
Chapter 7
33
Modifying a DataGrid Control
• By default, all of the columns are displayed
– The AutoGenerateColumns is used to indicate that all of the
columns will be generated by the DataGrid control
• Use the Columns templates to build your columns manually
using the Columns template using the DataField property
– Bound columns are identified with the ASP.NET BoundColumn tag
within the Columns template
– Unbound columns do not automatically contain data from the
database
– The HeaderText property allows you to modify the text message at
the top of the column
Chapter 7
34
Modifying the DataGrid Columns
• Use the DataAdapter to create the data connection to the
TaraStore.mdb file
• The SQL query should be
SELECT * FROM Categories
• Create the DataSet and use the menu commands to Generate
Dataset named MyCatDS
• Add a DataView1 and assign a Categories table of the
MyCatDS1 to the DataView DataSource
– MyCatDS1.Categories
• Set the DataSource property of the DataGrid to the DataView
object, DataView1
Chapter 7
35
Modifying the DataGrid Columns
• In the Page_Load handler, fill the DataSet with the
DataAdapter and bind the data control
• Set the AutoGenerateColumns property of the DataGrid to
False
• In the HTML View, add a bound column
Chapter 7
36
Modifying the DataGrid Columns
Chapter 7
37
Displaying the DataGrid Control
Chapter 7
38
Working with Data Templates
• Templates are used to bind data to individual areas
within the control and to format the areas within the
control
– The ItemTemplate is required for both the DataList and the
Repeater controls
• The template is used to determine what content should appear
in the sections of the control
– The HeaderTemplate is used to configure the data contained
within the header row of the control
– The FooterTemplate is used to configure the data contained
within the last row of the control
Chapter 7
39
Template Styles
• Using Templates to Modify the DataGrid Control
• The appearance of these templates can be modified
manually, or by using the Property Builder
– HeaderStyle is used to format the HeaderTemplate. You can
use the Properties window to modify the styles, or add the
style information manually in the Web page
– FooterStyle is used to format the FooterTemplate
– ItemStyle is used to format the rows of data
– AlternatingItemStyle is used to format every other row of
data
Chapter 7
40
Template Styles
– SelectedItemStyle is used to format the currently
selected row
– EditItemStyle is used to format the row when you are
in edit mode and will be making changes to values in
the columns
– PagerStyle is used to format the page navigation
controls
• These controls are used when the number of rows exceeds the
number of rows that can be displayed on the Web page
• The number of rows that are displayed on the Web page are
configured using the PageSize property of the DataGrid control
Chapter 7
41
Using Templates to
Modify the DataGrid Control
• Use the OldDbDataAdapter control to create a
connection and generate the SQL statement
• Add a DataSet and use the menu commands to
Generate Dataset. Create a DataView control and
assign the table property to Products
MyProductsDS1.Products.
• Set the DataSource property of the DataGrid to the
DataView object, DataView1
• Do the above items using the procedures outlined on
pages 323 through 326 of the textbook
Chapter 7
42
The Properties Window
Chapter 7
43
Using Templates to
Modify the DataGrid Control
• In the Page_Load handler fill the DataAdapter, and bind
the data control to the data source
• Modify the DataGrid AlternatingItemStyle, ItemStyle,
HeaderStyle, and FooterStyle
• Check the DataGrid Show Footer check box and add the
border as shown in the book
Chapter 7
44
Using Templates to
Modify the DataGrid Control
Chapter 7
45
Using Templates to
Modify the Repeater Control
• You can use templates to modify the Repeater
control using the directions listed on pages 326
through 329 of the textbook
– Will create a header template that contains the heading
graphics. You will use a footer template to create an area
that contains a company logo and links to the home page.
In the body of the Web page you will use an ItemTemplate
which is bound to the data in the database
– Will use the product image names to display the product
images and create hyperlinks. Within the ItemTemplate,
you can retrieve the values of the data columns using <%#
Container.DataItem("ColumnName") %>"> , where
ColumnName is the name of the column in the database
Chapter 7
46
Using Templates to
Format the Repeater Control
Chapter 7
47
Using Templates to
Modify the DataList Control
• You can alter the number of columns displayed and
the direction or layout
– RepeatColumns property – the number of columns and
must be an integer
– RepeatDirections property – stores the direction of the
columns
• Possible values:
– RepeatColumns.Horizontal - columns repeat horizontally
– RepeatColumns.Vertical - columns repeat vertically
Chapter 7
48
Using Templates to
Modify the DataList Control
• In the Page_Load event handler, create a connection, SQL
select query, and the connection object
• Create the DataAdapter, DataSet, and DataView
• Set the DataList DataSource to the DataView
• Change the RepeatColumns property to 2
• Create the HeaderTemplate, FooterTemplate, and ItemTemplate
• Insert the hyperlinks in the first cell and then proceed to the
second cell
• Do all of the above items while following the instructions
shown on pages 330 through 332 of the textbook
Chapter 7
49
Using Templates to
Format the DataList Control
Chapter 7
50