1. Chapter 71 Building Data-Driven ASP.NET Applications Introduction to ASP.NET By Kathleen Kalata

2. Chapter 72 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. Chapter 73 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. Chapter 74 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 ( ) " alt="Logo" />

5. Chapter 75 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. Chapter 76 Return an Expression from a Property or Function

7. Chapter 77 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/ –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

8. Chapter 78 Binding Data Controls to a Single Expression

9. Chapter 79 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. Chapter 710 Web Data Controls

11. Chapter 711 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. Chapter 712 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 tag after each row as a delimiter

13. Chapter 713 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. Chapter 714 Binding Data to a DropDownList Control

15. Chapter 715 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 tag –Each item corresponds to an in the tag –DataTextField property - text which is displayed –DataValueField property - to specify the value property of the HTML control –DataTextFormatString - formats the value

16. Chapter 716 Binding Data to a ListBox Control

17. Chapter 717 Binding to RadioButtonList and CheckBoxList Controls Each item in the DataSource property will correspond to an 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. Chapter 718 Binding Data to CheckBoxList and RadioButtonList Controls

19. Chapter 719 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.

20. Chapter 720 Adding Bound Columns to a DataGrid

21. Chapter 721 DataGridSimple.aspx

22. Chapter 722 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. Chapter 723 Binding to a DataList Control

24. Chapter 724 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. Chapter 725 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 tag or ASP.NET Panel control

26. Chapter 726 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. Chapter 727 Binding Data to a Repeater Control

28. Chapter 728 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. Chapter 729 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. Chapter 730 Using the Query Builder

31. Chapter 731 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. Chapter 732 Binding a DataView to a DataGrid

33. Chapter 733 Binding a DataGrid to a Database

34. Chapter 734 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. Chapter 735 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. Chapter 736 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. Chapter 737 Modifying the DataGrid Columns

38. Chapter 738 Displaying the DataGrid Control

39. Chapter 739 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. Chapter 740 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. Chapter 741 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. Chapter 742 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. Chapter 743 The Properties Window

44. Chapter 744 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. Chapter 745 Using Templates to Modify the DataGrid Control

46. Chapter 746 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 ">, where ColumnName is the name of the column in the database

47. Chapter 747 Using Templates to Format the Repeater Control

48. Chapter 748 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. Chapter 749 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. Chapter 750 Using Templates to Format the DataList Control