Building DataDriven ASP'NET Applications

1
Building Data-Driven ASP.NET Applications

• Introduction to ASP.NET
• By Kathleen Kalata

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

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

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
  (lt gt)
• lt dim ImageURL As String "logo.gif" gt
• ltimg name"Logo" src"lt ImageURL gt" alt"Logo"
  /gt

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()

6
Return an Expression from a Property or Function
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/lt ImageURL
  gt
• Change the src property of imgHTMLImageURL to
  lt GetImageURL gt
• Change the lblImageURL text property to lt
  ImageURL gt
• Change the txtImageURL value property to lt
  ImageURL gt
• Change the imgImageURL imageURL property to lt
  GetImageURL gt

8
Binding Data Controlsto a Single Expression
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

10
Web Data Controls
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

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 ltbr /gt tag after each row as a
  delimiter

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

14
Binding Data to a DropDownList Control
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 ltselectgt
  tag
• Each item corresponds to an ltoptiongt in the
  ltselectgt tag
• DataTextField property - text which is displayed
  
• DataValueField property - to specify the value
  property of the HTML ltoptiongt control
• DataTextFormatString - formats the value

16
Binding Data to a ListBox Control
17
Binding to RadioButtonList and CheckBoxList
Controls

• Each item in the DataSource property will
  correspond to an ltinputgt 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

18
Binding Data to CheckBoxList and RadioButtonList
Controls
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 0C will
  format the value as currency.

20
Adding Bound Columns to a DataGrid
21
DataGridSimple.aspx
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

23
Binding to a DataList Control
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

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 ltdivgt tag
  or ASP.NET Panel control

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

27
Binding Data to a Repeater Control
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

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

30
Using the Query Builder
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

32
Binding a DataView to a DataGrid
33
Binding a DataGrid to a Database
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

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

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

37
Modifying the DataGrid Columns
38
Displaying the DataGrid Control
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

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

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

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

43
The Properties Window
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

45
Using Templates to Modify the DataGrid Control
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 lt Container.DataItem("ColumnN
  ame") gt"gt , where ColumnName is the name of the
  column in the database

47
Using Templates to Format the Repeater Control
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

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

50
Using Templates to Format the DataList Control