Chapter 7 1

Building Data-Driven ASP.NET Applications

Introduction to ASP.NET

By Kathleen Kalata

Chapter 7 2

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 3

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 4

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 5

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 6

Return an Expression from a Property or Function

Chapter 7 7

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 8

Binding Data Controlsto a Single Expression

Chapter 7 9

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 10

Web Data Controls

Chapter 7 11

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 12

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 13

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 one-dimensional 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 14

Binding Data to a DropDownList Control

Chapter 7 15

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 16

Binding Data to a ListBox Control

Chapter 7 17

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 18

Binding Data to CheckBoxList and RadioButtonList Controls

Chapter 7 19

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 20

Adding Bound Columns to a DataGrid

Chapter 7 21

DataGridSimple.aspx

Chapter 7 22

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 23

Binding to a DataList Control

Chapter 7 24

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 25

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, comma-delimited 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 26

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 27

Binding Data to a Repeater Control

Chapter 7 28

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 29

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 30

Using the Query Builder

Chapter 7 31

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 32

Binding a DataView to a DataGrid

Chapter 7 33

Binding a DataGrid to a Database

Chapter 7 34

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 35

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 36

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 37

Modifying the DataGrid Columns

Chapter 7 38

Displaying the DataGrid Control

Chapter 7 39

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 40

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 41

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 42

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 43

The Properties Window

Chapter 7 44

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 45

Using Templates to Modify the DataGrid Control

Chapter 7 46

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 47

Using Templates to Format the Repeater Control

Chapter 7 48

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 49

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 50

Using Templates to Format the DataList Control