Professional ASP.NET 1.0 Special Edition- P11 pdf

We also specify a DataFormatString for the Value column so that it is displayed in currency format: Binding a Repeater and a DataList Control To a HashTable The Repeate

<ASP:Repeater id="MyRepeater" runat="server">

<ASP:RadioButtonList id="MyRadioList" runat="server" /><p />

The declaration of the HTML <select>, ASP:DropDownList, and ASP:ListBox controls at the top of the page, and the ASP:CheckBoxList and ASP:RadioButtonList controls at the bottom of the page, is no different to the previous

example - we just define the control itself However, the definition of the other three list controls has to take into account the new structure of the data source

Binding a DataGrid Control To a HashTable

The DataGrid control cannot figure out by itself how to handle a HashTable, and needs us to provide some help As you'll see in more detail later in this chapter, we do this by setting the AutoGenerateColumns property of the control

to False, and then using a <Columns> element and ASP:BoundColumn controls to specify where the values should come from

The two columns are bound to the Key and Value fields in each item using the following syntax We also specify a DataFormatString for the Value column so that it is displayed in currency format:

<ASP:DataGrid id="MyDataGrid" runat="server" AutoGenerateColumns="false">

<Columns>

<ASP:BoundColumn HeaderText="Key" DataField="Key" />

<ASP:BoundColumn HeaderText="Value" DataField="Value"

DataFormatString="{0:C}" />

</Columns>

</ASP:DataGrid>

Binding a Repeater and a DataList Control To a HashTable

The Repeater and the DataList controls contain an <ItemTemplate> entry as in the previous example where we used an ArrayList However, now we can include two values in each template - the Key property and the Value property We refer to these as properties of the DataItem object

We're adding some extra layout information in these two controls In the Repeater control we're adding the equals sign between the Key and the Value, and a line break after each Key/Value pair In the DataList control, we wrap the output for each Key in single quotes, adding the word "value:" and formatting the Value property in scientific notation using the format string "{0:E}":

The Page_Load Event Handler

When the page loads, we first create the HashTable and fill in some values:

Sub Page_Load()

'create a HashTable of values to bind to

Dim tabValues As New HashTable(5)

of each item in the HashTable We can also provide different values for the value attribute of the control if required- we've done this for the second one of each control listed next:

'first <select> displays the Keys in the HashTable

MySelectList1.DataSource = tabValues

MySelectList1.DataTextField = "Key"

'second one displays the Values in the HashTable

'and uses the Keys as the <option> values

MySelectList2.DataSource = tabValues

MySelectList2.DataValueField = "Key"

MySelectList2.DataTextField = "Value"

'same applies to ASP: controls, except here

'we can also specify the format of the Key

If you look back at the earlier screenshot, you can also see the results of setting the DataTextFormatString property

of the ASP:DropDownList and ASP:ListBox controls For example, in the last four lines of the preceding code we bound the second ASP:ListBox control to the HashTable so that the text of each <option> element is automatically formatted as a currency value

Binding the DataGrid, Repeater, and DataList controls is easy because we specified how the columns should be mapped to the data source in the control definitions We just need to set the DataSource property of each one:

'in the CheckboxList we'll display the Title and

'use the Value as the control value

MyCheckList.DataSource = tabValues

MyCheckList.DataValueField = "Value"

MyCheckList.DataTextField = "Key"

'in the RadioList we'll display and format the

'Value and use the Key as the control value

MyRadioList.DataSource = tabValues

MyRadioList.DataValueField = "Key"

MyRadioList.DataTextField = "Value"

MyRadioList.DataTextFormatString = "Percentage rate {0:F}%"

The final part of the code in the Page_Load event simply calls the DataBind method of the page to perform the data binding:

Page.DataBind() 'bind all the controls on the page

End Sub

How the Controls Are Bound

If you view the output that this page creates in the browser, you'll see that (unlike in the previous ArrayList example where the value and text were the same) the second of the two lists in each group has the Key from each item in the HashTable as the value attribute of the <option> elements, and the Value from each item in the HashTable as the text of each <option> element:

<select name="MySelectList2" id="MySelectList2">

In the RadioButtonList, this technique also gives an output that specifies the Key from each item in the HashTable

as the value attribute The Value of each item in the HashTable is formatted and used as the text caption of the checkbox or radio button:

<span value="Microsoft">

<input id="MyRadioList_3" type="radio" name="MyRadioList" value="Microsoft" />

<label for="MyRadioList_3">Percentage rate 49.56%</label>

</span>

Repeated-Value Binding to a DataView Object

Our third example of data binding is to a DataView object For this example we're using a custom user control that returns a DataView object from a database We've provided the scripts and instructions for creating this database with the sample files, as well as a Microsoft Access database that you can use instead

We're putting off discussion of data access techniques until later in the book- it's not a vital topic here as long as you appreciate that basically each of the objects provides us with a set of data rows (a rowset) to which we can bind our controls In the next chapter we'll discuss in detail how we can use these objects to extract data from a relational database

The example page, Repeated-Value Data Binding to a DataView Object (dataview-binding.aspx) contains the same eight list controls as we've used in the previous two examples However, now we are displaying information drawn from our database of Wrox books:

How It Works

The HTML section of this page is basically the same as the first ArrayList example The difference is the definition of the Repeater and the DataList controls In each case, we need to specify the way we want to generate the content of the control from the values that are available in each "list item" (that is, each data row) within our source DataView

The Repeater control generates no layout information by default, so we have to create a template using an

<ItemTemplate> element We specify a <div> element to get each item on a separate line, because the Repeater does not provide any intrinsic formatting Inside the <div> element we place the text, HTML, and definitions of the fields

in the data source that we want to display We're displaying the contents of three columns from the DataView - the Title, ISBN, and PublicationDate We also format the PublicationDate column using the DataBinder.Eval method:

<ASP:Repeater id="MyRepeater" runat="server">

<ASP:DataGrid id="MyDataGrid" runat="server" />

The Page_Load Event Handler

In this example, we're using two separate custom user controls that return a database connection string and a DataView object populated with details about some Wrox books All the code in this page has to do is call functions in the user controls to get back the DataView object:

'get connection string from \global\connect-strings.ascx user control

Dim strConnect As String = ctlConnectStrings.OLEDBConnectionString

'create a SQL statement to select some rows from the database

Dim strSelect As String

strSelect = "SELECT * FROM BookList WHERE ISBN LIKE '18610053%'"

'create a variable to hold an instance of a DataView object

Dim objDataView As DataView

'get dataset from get-dataset-control.ascx user control

objDataView = ctlDataView.GetDataView(strConnect, strSelect)

If IsNothing(objDataView) Then Exit Sub

The details of how the control is inserted into the page, and how it gets the data from the database and creates the DataView object are covered in Chapter 8

The next step is to set the DataSource and other properties of the controls in the page The HTML <select> list, ASP:DropDownList and ASP:ListBox controls are mapped to the ISBN and Title columns in the DataView using the DataValueField and DataTextField properties of the controls:

'<select> list displays values from the Title column

'and uses the ISBN as the <option> values

MyRadioList.DataSource = objDataView

MyRadioList.DataValueField = "ISBN"

MyRadioList.DataTextField = "PublicationDate"

MyRadioList.DataTextFormatString = "Published on {0:dddd, MMMM dd, yyyy}"

All that's left is to activate the binding for all the controls on the page by calling the DataBind method of the Page object:

Page.DataBind()

Repeated-Value Binding to a DataSet Object

Our next example of data sources is the DataSet, and this is used in the page Repeated-Value Data Binding to a DataSet Object (dataset-binding.aspx) This page creates exactly the same result as the previous example The only difference is the creation of the data source, and how we actually perform the binding The page includes some code that creates a DataSet object, and we're leaving discussion of how this works until the next chapter What we want to focus

on here is the use of an object that has (or can have) multiple members as a data source

As we'll see in the next chapter, a DataSet object can contain several tables of data (in DataTable objects) When we bind to a DataSet, therefore, we have to specify which table we want the values for the control to come from This is done with the DataMember property of each control For example, to set the binding for the <select> list with the id of MySelectList we use:

MySelectList.DataSource = objDataSet 'specify the DataSet as the source

MySelectList.DataMember = "Books" 'use values from the table named "Books"

MySelectList.DataValueField = "ISBN" 'specify column to use for control values

MySelectList.DataTextField = "Title" 'specify column containing text to display

And, of course, the same technique is used for the rest of the controls on the page

Repeated-Value Binding to a DataReader Object

The example page Repeated-Value Data Binding to a DataReader Object (datareader-binding.aspx) uses a DataReader as the data source for the bound controls In general, using a DataReader is the preferred source of data for server-side data binding However, there is one important difference between this and the other data sources we've

used A DataReader is really just a "pipe" to the result of executing a query in a database Once the database has processed the query and built up the result set, the DataReader gives us a forward-only connection to that result set We can only read the rows once

This means that we can't create a DataReader and bind it to multiple controls as we've done in the previous examples They worked because all of the other data sources (an ArrayList, HashTable, DataView, and DataSet) are

"disconnected" from the database Unlike the DataReader, they are objects that actually hold the data, which allows us

to read the contents as many times as we like

So, the DataReader example page only contains one data-bound control- a DataGrid This is what the page looks like:

All we do is create our DataReader object in a variable named objDataReader, and bind it to the DataGrid control The control can figure out what columns are in the rowset, and it displays the column names and the data automatically

when we call the DataBind method:

'create a DataReader object

Dim objDataReader As OleDbDataReader

MyDataGrid.DataBind() 'and bind the control

We are calling the DataBind method of the control, rather than the DataBind method of the Page object as we did in previous examples (as we've only got this one control)

Adding Styles and Templates

We've seen how easy data binding is to use, and how much code and effort it saves Next, we'll look at how we can change the appearance of the data-bound controls This can be done in three ways:

ƒ Add CSS styles to the control - either directly using a <style> element in the page, or by setting the specific style properties of the controls

ƒ Create templates that specify the appearance of individual sections of the control's output

ƒ Use a combination of the two techniques

All of our example pages include a standard HTML <style> element in the <head> section, which specifies the font name and font size for the page The controls are generating ordinary HTML, so their output is automatically formatted in line with these styles by the browser:

<style type="text/css">

body, td {font-family:Tahoma,Arial,sans-serif; font-size:10pt}

input {font-family:Tahoma,Arial,sans-serif; font-size:9pt}

</style>

So, all of our <input> elements (including those that are created by the ASP:ListBox control, ASP:DropDownList control, and so on) are formatted with the style specified within our <style> element We also include specific CSS style definitions for the <td> elements in the <style> section, so that the HTML tables that some of the list controls create will

be formatted as well

Using the Style Properties

The list controls designed for use with data binding have a set of style properties that override the CSS styles defined in the page These can be used to change the appearance of the control The one exception is the Repeater control, which provides no visible interface elements (it simply repeats the content of the templates we define within it) Some of the properties that can be set are shown in the table below (a full list for each control is included in the NET SDK

Documentation):

BackColor, BackImageUrl Sets the appearance of the control's background

BorderStyle, BorderColor, BorderWidth Sets the appearance of the control's border

GridLines, CellPadding, CellSpacing Specifies the appearance of each cell

Font-Name, Font-Size, Font-Bold Specifies the text style within the control

HeaderStyle, ItemStyle, FooterStyle

AlternatingItemStyle

Specifies the style for various parts of the control's output, such

as the header or the content items

Adding Style to a DataGrid Control

If you run the example page Using CSS to Add Style to a DataGrid (css-style-datagrid.aspx), you will see how these style properties can be used, and what effect they have on the appearance of a DataGrid control You can edit the code to experiment with the different styles:

Next come the properties that define a 3-pixel wide black border for the control, and the padding within and spacing between the cells We also specify the font name and size, and make it bold Then, finally, come the style definitions for the header, each item (row) in the grid, and each alternating item All we're doing here is specifying a color for the ForeColor property (via the ForeColor attribute), though in fact we can include values for the other properties such

as BackColor, BorderWidth, Font, and so on

In the Page_Load event, all we have to do now is create a DataReader object, set it as the DataSource property of the grid, and then call the DataBind method In this case, as we only have the one control to deal with, we've called the DataBind method for our DataGrid control rather than calling it at Page level:

Using Templates with Data-bound Controls

The second way to manage the appearance of the ASP list controls designed for use with data binding is through the addition of templates to the control definition In fact (as we've seen in earlier examples), templates can do a lot more than just change the appearance of a control - we can use them to specify which columns are displayed in a control, and how the values appear

Three of the ASP list controls, the Repeater, DataList, and DataGrid, accept a series of templates that define the appearance and content of specific parts of the output All the templates are optional (depending on the control and the data source, as we'll see shortly), but the full list is demonstrated in the following diagram:

The names of each template are self-explanatory: we can optionally specify a different appearance for the header row

(usually where the names of each field or column appear), the item rows, the alternating item rows, the separator used

between each item row, and the footer row (often used to display navigation controls if there is more than one 'page' of

rows available)

The other two templates require a little more explanation:

ƒ The DataList and DataGrid controls allow us to specify one item or row that is "selected" (by setting the

SelectedIndex property) The SelectedItemTemplate is then used to specify the appearance of this item

or row

ƒ The DataList and DataGrid controls also allow us to switch them into "edit mode" (by setting the

EditItemIndex property) The EditItemTemplate is used to specify the appearance of this item or row (for

example, by changing the controls used to display the values in the row from labels to input controls)

Specifying Style and Content in a Repeater Control

You'll recall that a Repeater control is the simplest of all list controls, and is designed to repeat the content of the item

or row without adding any formatting or layout information To specify the content of each item when using a Repeater

control (as we saw in earlier examples), we have to add at least an <ItemTemplate> element to the control declaration

For example, to bind to an ArrayList we used the following code: