Chapter 71 Building Data-Driven ASP.NET Applications Introduction to ASP.NET By Kathleen Kalata.
-
Upload
rosanna-short -
Category
Documents
-
view
229 -
download
3
Transcript of Chapter 71 Building Data-Driven ASP.NET Applications Introduction to ASP.NET By Kathleen Kalata.
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