dot.NET.Framework.Essentials.1002003,.3Ed [Electronic resources] نسخه متنی

7.7 Data Binding and the Use of Templates

Although all web controls can be data bound, only
DataGrid, DataList, and Repeater use a
template to control the display
of data items. In this section, we show you how to perform simple
data binding with some common web controls and how to use an HTML
template to provide fully customized data-bound controls.

In ASP.NET, data binding between a control and its data source simply
means that the data is copied from the source and placed onto the
control upon the call to the DataBind( ) method. This is different
than data binding in Windows Forms, where a link is maintained
between the control and the data source. We cover Windows Forms and
data binding in the next chapter.

In its simplest form, data binding is the act of binding a control to
a data source. Previously, data binding required that an ADO
recordset be a data source, which is not too flexible. There was no
way to bind, for example, an array or a collection of objects to a
control. With ASP.NET, the whole data-binding business is revamped.
The only requirement to make your data source bindable to web
controls is that your data source implements the
System.Collections.ICollection interface. In other words, a bindable
data source is a collection of homogeneous objects that the web
controls can obtain data items from.

Although it is possible to write your own data classes that implement
the ICollection interface and bind them to web controls, numerous
classes exist that do this for you, such as Array, ArrayList, DataView, HashTable, Queue, SortedList, and Stack. All you have to do is put your data
in these forms, and you can bind your data to web controls.

Here is the simplest form of data binding. In the form file, all we
have are two list boxes with ids
list0 and list1:

<asp:listbox id="list0" runat="server"></asp:listbox>
<asp:listbox id="list1" runat="server"></asp:listbox>

In the Page_Load event handler in the
code-behind source file, we construct the data sources of type Array,
which implement the ICollection interface we mentioned earlier, and
then bind the list controls with the data sources:

int[] myArray0 = new int[7] { 1, 2, 3, 5, 7, 11, 13 };
string[] myArray1 = new string[7] {
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
"Sunday"
};
list0.DataSource = myArray0;
list0.DataBind( );
list1.DataSource = myArray1;
list1.DataBind( );

Figure 7-7 shows the output of this page.

Figure 7-7. Data binding with data from arrays

Most of the time, we tend to bind data from data sources that come
from a database. The next example pulls data from the Categories
table of the familiar NorthWind database. We can still use the
asp:listbox control, but this time, we specify the
item's property we want for the text, as well as the
value property of the list box. We did not have to do this for the
previous example because the items that the list box binds to are of
simple types (int and string). If we were to have an array of
objects, we would have to specify the property we want to bind to
datavaluefield and
datatextfield the way we do in the following
example:

<asp:listbox id=ListBox1 runat="server"
datavaluefield="CategoryID"
datatextfield="CategoryName">
</asp:listbox>

Again, in the code-behind source file, we have the code to construct
the data source and to bind the data source to the list control. Note
that because we are using ADO.NET to get the data from the database,
we must have references to System.Data and System.Data.OleDb
namespaces. The DefaultView property of class Table is of type
DataView, which implements the ICollection interface:

System.Data.DataSet m_ds = new System.Data.DataSet( );
String sConn =
"provider=SQLOLEDB;server=(local);database=NorthWind;Integrated Security=SSPI";
String sSQL =
"select * from Categories";
System.Data.OleDb.OleDbDataAdapter da =
new System.Data.OleDb.OleDbDataAdapter(sSQL, sConn);
da.Fill(m_ds, "Categories");
ListBox1.DataSource = m_ds.Tables["Categories"].DefaultView;
ListBox1.DataBind( );

Figure 7-8 shows the output for this example.

Figure 7-8. Data binding with data from a database

7.7.1 DataGrid

The DataGrid control takes data binding a
step further by allowing more than one property of the bound item to
be displayed. This section's example shows you how
to control the binding of data columns to the grid, as well as how to
customize the look and feel of the DataGrid using style.

By default, the DataGrid automatically binds all columns of the data
source in the order that they come from the database. Sometimes this
is not the behavior you would want. To fully control what columns
bind and in which order you want the binding to happen, switch off
the autogeneratecolumns attribute of the DataGrid,
and provide the columns property, as shown in the following sample:

<asp:DataGrid id=DataGrid1 runat="server"
ForeColor="Black"
autogeneratecolumns=false>
<columns>
<asp:boundcolumn datafield=CategoryID
headertext="ID" readonly=True/>
<asp:boundcolumn datafield=CategoryName
headertext="Category" />
<asp:boundcolumn datafield=Description
headertext="Description" />
</columns>
<SelectedItemStyle backcolor="#ffcc99" font-bold=True/>
<AlternatingItemStyle BackColor="Gainsboro"/>
<FooterStyle BackColor="Silver" ForeColor="White"/>
<ItemStyle BackColor="White"/>
<HeaderStyle BackColor="Navy" Font-Bold="True" ForeColor="White"/>
</asp:DataGrid>

Figure 7-9 shows the result of this example.

Figure 7-9. DataGrid data binding

In addition to using asp:boundcolumn to bind a
column of the DataGrid to a column of the data source, you can also
use asp:buttoncolumn to insert a column with
buttons that generate notifications. You can handle these
notifications to perform predefined tasks such as selecting the item,
removing it, and adding it to the shopping basket. You can also have
asp:hyperlinkcolumn insert links to other pages in
a column, asp:editcommandcolumn control editing of
the selected row of data, or asp:templatecolumn
customize the display of your column of data.

There are a number of styles that you
use to control the visual formatting of your DataGrid control. The
HeaderStyle and
FooterStyle, as the names
imply, control the style for the header and the footer of the
DataGrid. The ItemStyle,
AlternatingItemStyle,
SelectedItemStyle, and
EditItemStyle are used for each
type of items in the list. The PagerStyle controls the visual
appearance and layout of the paging interface.

The code-behind source file for binding data to the DataGrid is
similar to that of the previous example. Basically, we bind the set
of the DataSource property of the DataGrid to
the DefaultView of the Categories table and perform the binding with
the DataBind method:

DataGrid1.DataSource = m_ds.Tables["Categories"].DefaultView;
DataGrid1.DataBind( );

7.7.2 DataList

Unlike the DataGrid control, where the data binding is still in a
tabular form, the DataList control allows to you lay out
the list in any way[10] through the use of HTML templates.

[10] For both the DataList and
DataGrid controls, the table html tag is used to lay out the output.
The difference is that the DataGrid actually uses the table to
display tabular data while the DataList uses the table for the lay
out only and flows the data into the rows in the table.

Within a DataList tag, you can customize a number of
templates. The templates that can be
customized include:

AlternatingItemTemplate EditItemTemplate FooterTemplate HeaderTemplate ItemTemplate SelectedItemTemplate SeparatorTemplate

Specific tags are used to set up the style for each type of items you
want to display. Similar to the previous list, you also have
ItemStyle, SelectedItemStyle, and so on.

In the following example, we only show you one template, the
ItemTemplate, which is applied to all items in the list. In this
template, we use Web Form data-binding syntax to bind two properties
of the data item, the CategoryID and CategoryName fields. In this
simple template, the CategoryID will always be shown with Verdana
font in size 10.

You can also control the flow of the DataList by setting attributes
such as repeatcolumns,
repeatdirection (vertical, horizontal), or
repeatlayout (flow, table):

<asp:DataList id=DataList1 runat="server"
repeatcolumns=3
repeatdirection=Horizontal>
<AlternatingItemStyle BackColor="Gainsboro"/>
<ItemTemplate>
<font face=Verdana size=10>
<%# DataBinder.Eval(Container.DataItem, "CategoryID") %>
</font>
<%# DataBinder.Eval(Container.DataItem, "CategoryName") %>
</ItemTemplate>
</asp:DataList>

The code behind the data binding is shown here:

DataList1.DataSource = m_ds.Tables["Categories"].DefaultView;
DataList1.DataBind( );

Figure 7-10 shows the output of this DataList
data-binding example.

Figure 7-10. DataList data binding with template

7.7.3 Repeater

The ASP.NET
Repeater control is completely driven by an HTML
template to repeatedly display each of the data items bound to it.
When the page renders, the Repeater control loops through all the
records in the data source and generates HTML to display the record
according to the HTML template. This is as free-form as you can get
for data binding. You can have templates to generate bulleted lists,
numbered lists, comma-separated lists, and tabs. Unlike the DataGrid
or DataList that use an HTML table to control the layout of the data,
the Repeater control does not add any HTML of its own. You can
specify the layout however you want using the templates described
below.

There are only five templates in the Repeater control:

AlternatingItemTemplateFooterTemplateHeaderTemplateItemTemplateSeparatorTemplate

We will use two of these templates to control the display of the item
and its separator.

Again, we bind two fields of each item to the template. The end
result is a comma-separated list of URLs that link another Web Form
to display more detailed information about the clicked category. As
you can see, we also use Web Form data-binding tags,
<%# and %>, to perform
the binding. The CategoryID fills the cat
parameter of the query string to the fictitious
DisplayCategory.aspx Web Form, and the
CategoryName is the display text for the anchor tag.

You could also replace the anchor tag and comma with graphical images
to make your page more visually appealing:

<asp:Repeater id=Repeater1 runat="server">
<ItemTemplate>
<A HREF="http://YourURL/DisplayCategory.aspx?cat=
<%# DataBinder.Eval(Container.DataItem, "CategoryID") %>"
><%# DataBinder.Eval(Container.DataItem, "CategoryName") %>
</A>
</ItemTemplate>
<SeparatorTemplate>, </SeparatorTemplate>
</asp:Repeater>

Figure 7-11 shows the result of using the data
repeater to bind data.

Figure 7-11. Data binding using repeater and template

As with the other controls, the Repeater needs to be bound to a data
source:

Repeater1.DataSource = m_ds.Tables["Categories"].DefaultView;
Repeater1.DataBind( );

As you can see, using a template to bind data to these list-bound
controls can be very simple, yet powerful. However, you should be
aware of how the generated HTML will look. You should not have
complicated, bloated templates that will result in unappealing, large
files. In web application development, the page size is directly
proportional to the response time the customer experiences.