Introduction to ASP.NET, Second Edition2 Chapter Objectives

Introduction to ASP.NET, Second Edition3 Data Binding Techniques Data source – represents data – A simple hash table, an array, or a database – Web controls used to display data – Sometimes called Data controls because their primary function is to display data – Data can be displayed as a simple list, a drop-down list, or a table Data binding - process of assigning data source to a Web control – Data can be bound to a variety of Web controls

Introduction to ASP.NET, Second Edition4 Data Binding Techniques (continued)

Introduction to ASP.NET, Second Edition5 Single-Expression Binding Bind a single value or expression to a control Pound sign (#) before the expression name Enclose within inline server tags ( ) " alt="Logo" />

Introduction to ASP.NET, Second Edition6 Single-Expression Binding (Page 316) SingleBind.aspx Create a Property Create a Function to return a value Bind the data in the Page_Load procedure Return an Expression from a Property or Function Label and text box - bound to the value from the ImageURL property Image button - bound to the value from the GetImageURL function

Introduction to ASP.NET, Second Edition7 SingleBind.aspx (continued)

Introduction to ASP.NET, Second Edition8 SingleBind.aspx (continued) 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/ – Change the src property of imgHTMLImageURL to – Change the lblImageURL text property to – Change the txtImageURL value property to – Change the imgImageURL imageURL property to

Introduction to ASP.NET, Second Edition9 SingleBind.aspx (continued)

Introduction to ASP.NET, Second Edition10 SingleBind.aspx (continued)

Introduction to ASP.NET, Second Edition11 Repeated-Expression Binding Repeated expression bound to data control – collection, such as a hash table, or an ArrayList – a DataSet, DataView, or DataReader Data controls - inherit from the ListControl and BaseDataList classes. – Controls share properties such as DataSource and templates Repeater - inherits directly from the System.Web.UI.Control class

Introduction to ASP.NET, Second Edition12 Repeated-Expression Binding (continued)

Introduction to ASP.NET, Second Edition13 Repeated-Expression Binding (continued) Data Controls – DataSet A cached set of records Contain one or more DataTables DataMember - identify which table is bound – DataView - Subset of rows of data from a DataTable – DataReader Read-only, forward-only stream of data

Introduction to ASP.NET, Second Edition14 Data Controls Data Binding Web Controls – DropDownList - displays one value at a time using – RadioButtonList, CheckBoxList - groups controls – ListBox control - displays all values - – Repeater - a small, lightweight control displays data. Repeats HTML content you define – DataList - displays the data as a basic list – DataGrid - repeats content once for each data row places the data in a table

Introduction to ASP.NET, Second Edition15 Binding Data to a DropDownList Control DropDownList.aspx (Page 323) Assign – DataSource property – DataTextField – what’s displayed – DataValueField – Used by control as the value – DataTextFormatString – how to display - currency

Introduction to ASP.NET, Second Edition16 Binding Data to a DropDownList Control DropDownList.aspx (Page 323) MyDD1.DataSource = arr1 MyDD2.DataSource = MyHash MyDD2.DataTextField = "Key" MyDD2.DataValueField = "Value" MyDD3.DataSource = MyHash MyDD3.DataTextField = "Value" MyDD3.DataValueField = "Key" MyDD3.DataTextFormatString = "{0:C}" Page.DataBind()

Introduction to ASP.NET, Second Edition17 DropDownList.aspx (continued)

Introduction to ASP.NET, Second Edition18 Binding Data to a ListBox Control ListBox.aspx (Page 326) MyLB1.DataSource = arr1 MyLB2.DataSource = MyHash MyLB2.DataTextField = " Key " MyLB2.DataValueField = " Value " MyLB3.DataSource = MyHash MyLB3.DataValueField = " Key " MyLB3.DataTextField = " Value " MyLB3.DataTextFormatString = " {0:C} " Page.DataBind()

Introduction to ASP.NET, Second Edition19 ListBox.aspx (continued)

Introduction to ASP.NET, Second Edition20 Binding Data to a RadioButtonList and a CheckBoxList Control CheckBoxRadio.aspx (Page 327) ArrayList and HashTable bind the RadioButtonList and CheckBoxList controls – Each item - – Type - radio or checkbox – DataTextField - text displayed – DataValueField - value of items

Introduction to ASP.NET, Second Edition21 CheckBoxRadio.aspx (continued) CheckBoxList1.DataSource = arr1 RadioButtonList1.DataSource = arr1 CheckBoxList2.DataSource = MyHash CheckBoxList2.DataTextField = "Key" CheckBoxList2.DataValueField = "Value" RadioButtonList2.DataSource = MyHash RadioButtonList2.DataValueField = "Key" RadioButtonList2.DataTextField = "Value" RadioButtonList2.DataTextFormatString = "{0:C}" Page.DataBind()

Introduction to ASP.NET, Second Edition22 CheckBoxRadio.aspx (continued)

Introduction to ASP.NET, Second Edition23 Binding to a DataGrid Control DataGridSimple.aspx (Page 329) Data Grid can bound to various data source, in this example you will insert columns to bound to key and value items in hash table. AutoGenerateColumns - to specify columns HeaderText property – Change the column headings – String which can contain HTML DataFormatString format – {0:C} Format the value as currency

Introduction to ASP.NET, Second Edition24 DataGridSimple.aspx (continued)

Introduction to ASP.NET, Second Edition25 DataGridSimple.aspx (continued)

Introduction to ASP.NET, Second Edition26 Binding to a DataList Control DataList.aspx (Page 332) DataList Control allows you to display values as a simple list. You need to identify the columns to bind to the data DataList - a visual gray box in Design View – Auto Format schemes – DataGrid & DataList Templates store data binding instructions – ItemTemplate - required to display the data DataRow is referenced as a DataItem object DataItem – display data

Introduction to ASP.NET, Second Edition27 DataList.aspx (continued) DataBinder.Eval evaluates the entire expression with the parameters passed Identify columns to bind to the data – DataList - bound to HashTable key and value ( ) 

Introduction to ASP.NET, Second Edition28 DataList.aspx (continued)

Introduction to ASP.NET, Second Edition29 Binding Data to a Repeater Control Repeater.aspx (Page 335) Used to create tables, comma-delimited lists, bulleted lists, and numbered lists Use HTML View - modify the control Data inserted with an ItemTemplate – Templates available include the header, footer, alternating, item, and separator – Position the Repeater, use HTML tag or ASP.NET Panel control

Introduction to ASP.NET, Second Edition30 Repeater.aspx (continued) Container.DataItem represents each item – Key - key from the data source – Value - value from the data source ( )

Introduction to ASP.NET, Second Edition31 Repeater.aspx (continued)

Introduction to ASP.NET, Second Edition32 Binding a DataView Object to a DataGrid Control DataReader & DataSet Data objects Building Connections to a Database – Connection String Dim CS As String = "Provider=Microsoft.Jet.OLEDB.4.0;Data " _ & "Source=C:\Inetpub\wwwroot\Chapter7\TaraStore.mdb" Dim objCS As New System.Data.OleDb.OleDbConnection(CS) Import Data namespaces – First line of code Imports Namespace="System.Data.OleDb"

Introduction to ASP.NET, Second Edition33 Binding a DataView Object to a DataGrid Control (continued) Dim SQL As String = _ "SELECT * FROM Products WHERE SubCategoryID=1" Dim objDA As New _ System.Data.OleDb.OleDbDataAdapter(SQL, objCS) Dim objDS As New DataSet() objDA.Fill(objDS, "Products") Dim objDV As DataView objDV = objDS.Tables(0).DefaultView MyDG1.DataSource = objDV Page.DataBind()

Introduction to ASP.NET, Second Edition34 Binding a DataView Object to a DataGrid Control (continued) DataAdapter - Data tab in Toolbox – Creates and manages the Connection object – Query Builder to generate the SQL Statement Go to Data menu – Generate Dataset – Preview Data - Dataview - Data tab in Toolbox – Table property set to DataTable (Categories)

Introduction to ASP.NET, Second Edition35 Binding a DataView Object to a DataGrid Control (continued) Dataview - Data tab in Toolbox – Table property set to DataTable (ie Categories) DataGrid.DataSource – set to DataView Page_Load handler – Fill the DataAdapter DataAdapter1.Fill(DataSetName1) – Bind the data control to the data source Page.DataBind()

Introduction to ASP.NET, Second Edition36 Binding a DataGrid Control to the TaraStore Access Database DataGridDisplay.aspx (Page 338)

Introduction to ASP.NET, Second Edition37 DataGridDisplay.aspx (continued)

Introduction to ASP.NET, Second Edition38 DataGridDisplay.aspx (continued)

Introduction to ASP.NET, Second Edition39 DataGridDisplay.aspx (continued)

Introduction to ASP.NET, Second Edition40 Common Database Error Messages ASP.NET Machine account – MachineName\ASPNET – Used by the Web server to run ASP.NET pages – Does not have NTFS permissions to manage the database – Go to Windows Explorer to the file – Set NTFS permissions to Modify

Introduction to ASP.NET, Second Edition41 Common Database Error Messages (continued)

Introduction to ASP.NET, Second Edition42 Microsoft Access Database Connection Error Messages Permission to the directory that contains the file – Creates a Microsoft Access LDB file – Databasename.ldb Record locking and other settings can be set within Access

Introduction to ASP.NET, Second Edition43 Microsoft Access Database Connection Error Messages (continued)

Introduction to ASP.NET, Second Edition44 Microsoft Access Database Connection Error Messages (continued)

Introduction to ASP.NET, Second Edition45 Modifying Data Columns in the DataGrid Control Default - all columns displayed – AutoGenerateColumns - all columns generated Columns - build columns manually – Bound columns – bound to data with DataField – Unbound columns do not automatically contain data – HeaderText - modify the column heading message

Introduction to ASP.NET, Second Edition46 Modifying Data Columns in the DataGrid Control (continued) Columns have a header, footer, item section – Set style using properties in Properties window or IntelliSense <asp:BoundColumn HeaderText="Category ID" DataField="CategoryID" > ItemStyle-Font-Name="Trebuchet MS" ItemStyle-ForeColor="DarkSlateGray">

Introduction to ASP.NET, Second Edition47 Modifying Data Columns in the DataGrid Control (continued) HeaderStyle, FooterStyle, ItemStyle tags – Set style using Style Templates <asp:BoundColumn HeaderText="Name" DataField="CategoryName" > <ItemStyle Font-Names="Trebuchet MS" ForeColor="DarkSlateGray">

Introduction to ASP.NET, Second Edition48 DisplayGridColumns.aspx (Page 348) <asp:BoundColumn DataField="CategoryID" HeaderText="Category ID"> <ItemStyle Font-Names="Trebuchet MS" HorizontalAlign="Center" ForeColor="DarkSlateGray"> <asp:BoundColumn DataField="CategoryName" HeaderText="Name"> <ItemStyle Font-Names="Trebuchet MS" ForeColor="DarkSlateGray">

Introduction to ASP.NET, Second Edition49 DisplayGridColumns.aspx (continued)

Introduction to ASP.NET, Second Edition50 DisplayGridColumns.aspx (continued)

Introduction to ASP.NET, Second Edition51 Data Columns Modes - Display & Edit – EditCommandColumn - buttons change modes BoundColumn– display the data ButtonColumn – insert button, row-specific procedures – LinkButton or Button property – CommandName property – ItemCommand event – raised when button is clicked HyperLinkColumn - display hyperlink TemplateColumn - customize columns - display and edit

Introduction to ASP.NET, Second Edition52 Templates – bind data to individual areas within the control – format the control – determine what content should appear in the sections of the control ItemTemplate - required for DataList & Repeater HeaderTemplate - header row of the control FooterTemplate - last row of the control

Introduction to ASP.NET, Second Edition53 Column Styles Appearance of these templates modified manually, or Property Builder – HeaderStyle - format the HeaderTemplate – FooterStyle - format the FooterTemplate – ItemStyle - format the rows of data – AlternatingItemStyle - format every other row – SelectedItemStyle - format currently selected row – EditItemStyle - format the row in edit mode – PagerStyle - format the page navigation controls PageSize - number of rows number displayed

Introduction to ASP.NET, Second Edition54 Using ButtonColumn, HyperLinkColumn, and TemplateColumn to Modify the DataGrid Control DataGridDetails.aspx 2 DataAdapters (one for each table) – Tables could have come from different databases – Could have used 1 Adapter with SQL JOIN 1 DataSet with 2 tables (Categories, Products) 2 DataViews – 1 for each DataTable 2 DataGrids in the Web Page – Bound to different DataViews – RowFilter – subset of DataView – Count – total records in DataView

Introduction to ASP.NET, Second Edition55 DataGridDetails.aspx

Introduction to ASP.NET, Second Edition56 DataGridDetails.aspx (continued)

Introduction to ASP.NET, Second Edition57 DataGridDetails.aspx (continued)

Introduction to ASP.NET, Second Edition58 DataGridDetails.aspx (continued)

Introduction to ASP.NET, Second Edition59 Using Templates to Modify the Repeater Control RepeaterTemplate.aspx (Page 358) Use DataAdapter, DataSet, and DataView Create header, footer, separator, item template – product image names to display the product images and create hyperlinks – ItemTemplate - retrieve the values of data columns "> ColumnName - name of column in database

Introduction to ASP.NET, Second Edition60 RepeaterTemplate.aspx (continued)

Introduction to ASP.NET, Second Edition61 RepeaterTemplate.aspx (continued) For more information visit

Introduction to ASP.NET, Second Edition62 RepeaterTemplate.aspx (continued) <a href="images/ProductPics/ "> <img src="images/ProductThumbnails/ " hspace="2" border="0"/>  

Introduction to ASP.NET, Second Edition63 RepeaterTemplate.aspx (continued) <a href="images/ProductPics/ "> Description: Price: <%# DataBinder.Eval(Container.DataItem, _ "UnitCost", "{0:C}") %> Item #: 

Introduction to ASP.NET, Second Edition64 RepeaterTemplate.aspx (continued) 

Introduction to ASP.NET, Second Edition65 Using Templates to Modify the DataList Control DataListTemplate.aspx (Page 362) RepeatColumns property - number of columns RepeatDirections property - direction of columns – RepeatDirection.Horizontal – RepeatDirection.Vertical In code behind the page create: – DataAdapter, DataSet, and DataView Set DataList RepeatColumns property to 2 In HTML view create: – HeaderTemplate, FooterTemplate, ItemTemplate

Introduction to ASP.NET, Second Edition66 DataListTemplate.aspx (continued) If Not Page.IsPostBack() Then Dim CS As String = _ "Provider=Microsoft.Jet.OLEDB.4.0;Data " & _ "Source=C:\Inetpub\wwwroot\Chapter7\data\TaraStore.mdb" Dim SQL As String = _ "SELECT * FROM Products WHERE SubCategoryID=2" Dim objCS As New System.Data.OleDb.OleDbConnection(CS) Dim objDA As New _ System.Data.OleDb.OleDbDataAdapter(SQL, objCS) Dim objDS As New DataSet() objDA.Fill(objDS, "Products") Dim objDV As DataView objDV = objDS.Tables(0).DefaultView MyDL1.DataSource = objDV Page.DataBind() Else End If

Introduction to ASP.NET, Second Edition67 DataListTemplate.aspx (continued)

Introduction to ASP.NET, Second Edition68 DataListTemplate.aspx (continued) For more information visit

Introduction to ASP.NET, Second Edition69 DataListTemplate.aspx (continued) <a href="images/ProductPics/<%# Container.DataItem("ProductImage") %>"> <img src= "images/ProductThumbnails<%# Container.DataItem("Thumbnail") %>" hspace="2" border="0">  

Introduction to ASP.NET, Second Edition70 DataListTemplate.aspx (continued) <a href="images/ProductPics/<%# Container.DataItem("ProductImage") %>"> Description: 

Introduction to ASP.NET, Second Edition71 DataListTemplate.aspx (continued) Price: <%# DataBinder.Eval(Container.DataItem, _ "UnitCost", "{0:C}") %> Item #:

Introduction to ASP.NET, Second Edition72 DataListTemplate.aspx (continued)

Introduction to ASP.NET, Second Edition73 Summary Web Server controls display data Web Server controls can be bound to many types of data DropDownList, ListBox, CheckBoxList, RadioButtonList inherit from ListControls class DataList and DataGrid inherit from BaseDataList class – DataGrid contains Bound and Unbound columns – ItemTemplate is used to display data – Use templates to create header, footer, and item sections – Format templates using Style Builder or manually Repeater must be edited manually in HTML view

Introduction to ASP.NET, Second Edition74 Summary DataAdapter creates and manages the connection – Connection uses the connection string to locate database – DataAdapter uses Fill method to populate DataSet DataSet can contain 1 or more DataTables DataView contains subset of rows of data from DataTable DataReader read-only forward-only stream of data