Chapter 10 Binding Data to Web Controls

1
Chapter 10 Binding Data to Web Controls

• Mauricio Featherman, Ph.D.

2
Chapter 10 Objectives

• Learn how to databind server list controls (ddl,
  lb, rbl, chkl) to different datasources
• Learn how to use the Repeater Control to display
  records from a database table or datareader
• Learn how to use Templates to format and put
  databinding expressions into DataRepeaters
• Create Master/Detail forms

3
Data Binding

• Data Binding refers to the process of dynamically
  assigning a value to a property of a control at
  runtime
• You can do this in the HTML ltaspLabel
  IDlblMessage Text lt DateTime.Now.ToString(
  T) gtRunatServer /gt
• The special lt and gt tags delimit the
  databinding expression
• Unlike Winforms the data doesnt go into the
  control until you execute a Control.Databind() or
  Page.Databind() method

This is a databindingexpression
4
Binding a Server Control to a DataSource

• The list controls (dropdownlist, listbox,
  radiobuttonlist, and checkboxlist) and the
  repeater control all have a datasource property
• This datasource property is used to bind the
  control to a database table (thats in a
  dataset), arraylist, or datareader
• The list controls also have a .DataTextField that
  specifies which column of the datasource to bind
  to and display (this is refered to as the
  .Displaymember in Winforms)

5
DataTextField and DataValueField

• The .DataTextField is what is shown to the user
  its the column in the datasource that
• The listcontrols are very sneaky in that they
  also have a .DataValueField that is bound to
  another column of the datasource used to
  capture another piece of info related to the
  .SelectedItem (called the .SelectedValue) this
  property in Winforms is the .Valuemember
• The .DataValueField is usually the primary key of
  the row and is used to execute a SelectCommand to
  retrieve another related table of information
• This is the secret behind retrieving
  Master-Detail Tables (Parent/Child Data)

6
Sample Code

• dtrAuthors cmdSelect.ExecuteReader()ddlAuthors
  .DataSource dtrAuthorsddlAuthors.DataTextField
  au_lnameddlAuthors.DataValueField
  au_idddlAuthors.DataBind()
• The SqlDataReader is boundto the dropdownlist

These are Columns in the datasource
7
List Controls

• All list controls bind to their datasource in the
  same way
• If you are loading the control at page load, be
  sure to encase the code in a If Not IsPostBack
  Then run databinding codeEnd ifor else you
  will lose the users selection

8
What if the column in the datasource isnt
AlphaNumeric? I want to display a column of pics!

• Well SQLServer does have a db columntype that can
  store images, sounds, or movies, but more
  commonly you place those in a separate folder and
  just create a char field that stores the file
  name and path
• We can use the repeater webcontrol to bind the
  column with the path\filename to an image control
• Repeaters use its ItemTemplate to display data
  from a column
• So the image control pulls its values from a
  database? And can show a list of images? Sounds
  like the start of an on-line catalog!

9
Repeaters A WebControl To Display Data

• Repeaters can display the contents of a
  datasources columns. They use templates to
  display data
• They use a databinding expression within an
  Itemtemplate to refer to the correct column for
  ex to show the id column uselt
  Container.DataItem(id) gt
• This is theoretically similar toWhile
  dtrAuthors.Read control.items.add(dtrAuthors.Item
  s(id)End WhileWe have previously used
  dtrAuthors.Getstring(0) or dtrAuthors.Getstring(i
  d) which are similar to dtrAuthors.Items(0)
• Because a dataReader is also a container with
  columns

This is a databindingexpression
10
For ex (pg 467- some lines left out)

• cmdSelect New SqlCommand (Select from
  Authors, conPubs)dim dtrAuthors as
  SqlDataReaderdtrAuthors cmdSelect.ExecuteReader
  ()rptAuthors.DataSource dtrAuthorsrptAuthors.D
  atabind()ltaspRepeater IDrptAuthors Runat
  ServergtltItemTemplatelt Container.DataItem(a
  u_lname) gtlt/ItemTemplategtlt/aspRepeatergt

Here we get the data Here we show the data
This is a databindingexpression
11
Using A Repeater to Bind to Image Controls

• The trick to binding a list of Image controls to
  a datasource is to place the controls in the
  ItemTemplate of A Repeater
• You can bind the Repeater control to a datasource
  thereby indirectly binding all the Image controls
  to the datasource
• cmdSelect New SqlCommand (Select imagePath
  from Pics, conPics)dim dtrPics as
  SqlDataReaderdtrPics cmdSelect.ExecuteReader()
  rptImages.DataSource dtrPicsrptImages.Databind(
  )ltaspRepeater IDrptImages Runat
  ServergtltItemTemplateltaspImage Runat
  Server ImageURL lt Container.DataItem(imag
  ePath) gt /gtlt/ItemTemplategtlt/aspRepeatergt

12
Using A Repeater to Bind to HyperLink Controls

• You can also display a list of Hyperlink controls
  (perhaps in a User control?) which are strings in
  a char column in the datasource - with the
  repeater controlSo build a SqlDataReader and
  bind a repeater to it and bind the column of the
  repeater to the control (hyperlink, image,
  buttons and linkbuttons)
• ltASPRepeater IDrptLinks Runat
  ServergtltItemTemplateltaspHyperLink Runat
  Server Text lt Container.DataItem(Link_ti
  tle) gt NavigateURL lt Container.DataItem(Li
  nk_URL) gt /gt lt/ItemTemplategtlt/aspRepeatergt

13
Event Bubbling in Repeaters

• We can pull a word out of a column from a
  datasource and assign it to the text property of
  a link buttons. Buttons however fire a postback
  event when they are clicked on
• So if we show a list of buttons inside a
  repeater, how can we discover which button from
  the list was clicked? It would be insane to have
  50 on_click events one for each button in the
  list
• So we write a procedure for the repeater
  (container control) to capture abd handles the
  events raised by the controls contained within it
• This is called event bubbling, the buttons event
  bubbles up to and is handled by the repeater

14
Event Bubbling in Repeaters

• Private Sub B_click( s as Object, e as
  RepeaterCommandEventArgs)Dim lbtnSelected as
  LinkButton e.Item.Controls(1)lblOutput.Text
  The btn selected was lbtnSelected.TextEnd
  SubltaspRepeater ID rptCat OnItemCommand
  B_click gtltItemTemplategt ltaspLinkButton Text
  lt Container.DataItem(CategoryName) gt
  /gtlt/ItemTemplategtlt/aspRepeatergt
• Whichever linkbutton is clicked on, its name is
  displayed in a label

15
More about Repeaters

• Data is in the bound columns of a repeater as
  opposed to being in the rows of a datatable
• Repeaters are the little brother to datalists
  and datagrids providing less built-in
  functionality but more flexibility if you dont
  mind HTML programming (easy to place all kinds of
  controls within a tabular interface)
• Repeaters use templates to bind data and control
  formatting, so far we have used the itemtemplate
  but there is also a headertemplate,
  footertemplate and alternatingitemtemplate
  (effects every other row of data to make them
  another color, font, etc)
• If you are going to just display data with a
  repeater then be sure to set the EnableViewState
  False

16
Master/Detail Forms 1 file (pg 490-494)

• A ddl holds the master data and the repeater
  displays the detail data (a parent-child
  relationship exists)
• Set the ddls Datatextfield to the column you
  want to display (ex CategoryName) and the
  DataValue field (ex CategoryID) to the foreign
  key that matches the primary key of the detail
  table.
• When the ddl_selectedIndexChanged event fires
  capture the .SelectedItem.Value (a number)
• Pass that to the procedure that binds the
  detail table to the repeater in that procedure
  run a command that selects the appropriate
  related records using the PK

17
Master/Detail Categories/Products Example

• ltAspDropDownList AutoPostback
  trueOnSelectedIndexChangedddl_SelectedIndexChan
  ged /gtCreate and Bind Repeater here 1
  Private Sub ddl_SelectedIndexChanged()2 intCatID
  ddl.SelectedItem.Value3 Call
  BindRepeater(intCatID)4 End Sub5 Private Sub
  BindRepeater(intC as Integer)6 cmdSelect.Paramete
  rs.Add(_at_catID,intC)7 cmdSelect New
  SqlCommand(SELECT FROM Products WHERE
  8 CategoryID _at_catID,conn)9 dtrProducts
  cmdSelect.ExecuteReader10 repeater.DataSource
  dtrProducts11 End Sub

Some coderemoved for clarity
18
Master/Detail Example 2 files see pg 496

• This example uses a repeater to display the
  master data and labels on another pager to
  display the detail dataltaspRepeater
  IDrptLinks Runat ServergtltItemTemplategtltas
  pHyperLink Runat Server NavigateURL lt
  String.Format(detailspage.aspx?ID0,
  Container.DataItem(CatID)) gt Text lt
  Container.DataItem(NameonLink) gt /gt
  lt/ItemTemplategtlt/aspRepeatergt
• In the detailspage.aspx to retrieve the passed in
  value (here the ID)intID Int32.Parse(Request.Qu
  eryString(ID)Then assign the intID as the
  value of a parameter in the command that is used
  to select the related child records

This is the page To goto, passing In the selected
CatID