Build Your Own ASP.NET 3.5 Website Using C# & VB (74 page)

■ the basics of the DataList control

■ how to handle DataList events

■ how to edit DataList items

■ how to handle the controls inside the DataList templates

■ how to use Visual Web Developer to edit the DataList

Let’s get started!

DataList Basics

To learn how to use the DataList, we’ll update the Dorknozzle Employee Directory

page to use a DataList control instead of a Repeater control. This update will be

particularly easy to do because the Employee Directory already has a list-like format.

If you now open
EmployeeDirectory.aspx
, you’ll see the Repeater control is used like

this:

Employee ID:

<%#Eval("EmployeeID")%>

Name: <%#Eval("Name")%>

Username: <%#Eval("Username")%>

Licensed to [email protected]

Displaying Content Using Data Lists

419

You can see the output of this code in
Figure 9.9 in
Chapter 9
. Now, let’s update the employee directory page to use a DataList instead of a Repeater. We can do

this simply by replacing the and tags with the

tags for a DataList:

Dorknozzle\VB\01_EmployeeDirectory.aspx
(excerpt)

Employee ID:

<%#Eval("EmployeeID")%>

Name: <%#Eval("Name")%>

Username: <%#Eval("Username")%>

As we’ve changed the ID for this control, we’ll need to change the name of the

control in the code-behind file as well. Locate the following lines of code and change

employeesRepeater to employeesList, as shown here:

Visual Basic

Dorknozzle\VB\02_EmployeeDirectory.aspx.vb
(excerpt)

reader = comm.ExecuteReader()

employeesList
.DataSource = reader

employeesList
.DataBind()

reader.Close()

C#

Dorknozzle\CS\02_EmployeeDirectory.aspx.cs
(excerpt

reader = comm.ExecuteReader();

employeesList
.DataSource = reader;

employeesList
.DataBind();

reader.Close();

Licensed to [email protected]

420

Build Your Own ASP.NET 3.5 Web Site Using C# & VB

As you can see, the changes required to use DataList instead of Repeater are

minimal in this case. That’s largely because the Repeater was displaying a basic

list of data anyway.

As with the Repeater control, we can feed data into the a DataList control by

binding it to a data source. Both Repeater and DataList support the ItemTemplate

and SeparatorTemplate templates, but in case of the DataList, the templates specify

the content that is to be inserted in the td elements of the table.

At the moment, the output appears very similar to the output we generated using

the Repeater
, as Figure 10.1 illustrates.

Figure 10.1. The Dorknozzle Employee Directory page

Repeater vs DataList

As a rule of thumb, you’ll use the Repeater when you need total control over

the HTML output, and when you don’t need features such as editing, sorting,

formatting, or paging for the data you’re displaying. Depending on the extra features

you need, you can use either the DataList control (which is covered in this

chapter), or the GridView or DetailsView controls (which you’ll learn about

in
Chapter 12).

Licensed to [email protected]

Displaying Content Using Data Lists

421

In this example, we’ve used the ItemTemplate of our DataList. The DataList offers

a number of templates:

ItemTemplate

This template is replicated for each record that’s read from the data source. The

contents of the ItemTemplate are repeated for each record, and placed inside

td elements.

AlternatingItemTemplate

If this template is defined, it will be used instead of ItemTemplate to display

every second element.

SelectedItemTemplate

This template is used to display the selected list item. The DataList control

doesn’t automatically give the user a way to select an item in the list, but you

can mark an item as selected by setting the DataList control’s SelectedIndex

property. Setting this property to 0 will mark the first item as selected; setting

SelectedIndex to 1 will mark the second item as selected; and so on. Setting

SelectedIndex to -1 deselects any selected item.

EditItemTemplate

Similar to SelectedItemTemplate, this template applies to an item that’s being

edited. We can set the item that’s being edited using the EditItemIndex property

of the DataList, which operates in the same way as the SelectedIndex property.

Later in this chapter, you’ll learn how to edit your DataList using the EditItemTemplate.

HeaderTemplate

This template specifies the content to be used for the list header.

FooterTemplate

This template defines the list footer.

SeparatorTemplate

This template specifies the content to be inserted between two consecutive data

items. This content will appear inside its own table cell.

Licensed to [email protected]

422

Build Your Own ASP.NET 3.5 Web Site Using C# & VB

Handling DataList Events

One problem you may encounter when working with container controls such as

the DataList or the Repeater is that you can’t access the controls inside their

templates directly from your code. For example, consider the following ItemTemplate, which contains a Button control:

Employee ID: <%#Eval("EmployeeID")%>

Although it may not be obvious at first glance, you can’t access the Button easily

through your code. So the following code would generate an error:

Visual Basic

' Don't try this at home

myButton.Enabled = False

Things get even more complicated if you want to handle the Button’s Click event,

because—you guessed it—you can’t do so without jumping through some reasonably

complicated hoops.

So, if we can’t handle events raised by the buttons and links inside a template, how

can we interact with the data in each template? To answer this question, we’ll improve our employee directory by making a simpler, more basic view of the items, and adding a
View More
link that users can click in order to access more details

about the employee. To keep things simple, for now, we’ll hide only the employee

ID from the standard view; we’ll show it when the visitor clicks the
View More
link.

After we implement this feature, our list will appear as shown in
Figure 10.2. Y
ou’ll be able to view more details about any employee by clicking on the appropriate

link.

Open
EmployeeDirectory.aspx
, and modify the ItemTemplate of the DataList as

shown below:

Licensed to [email protected]

Displaying Content Using Data Lists

423

Figure 10.2. Hiding employee details

Visual Basic

Dorknozzle\VB\03_EmployeeDirectory.aspx
(excerpt)

EnableViewState="false" />

Name: <%#Eval("Name")%>

Username: <%#Eval("Username")%>

Text=<%#"View more details about " & Eval("Name")%>

CommandName="MoreDetailsPlease"

CommandArgument=<%#Eval("EmployeeID")%> />

In C#, the string concatenation operator is + rather than &, so the Text property

definition of the Linkbutton should be as follows:

Licensed to [email protected]

424

Build Your Own ASP.NET 3.5 Web Site Using C# & VB

C#

Dorknozzle\CS\03_EmployeeDirectory.aspx
(excerpt)

Text=<%#"View more details about " + Eval("Name")%>

CommandName="MoreDetailsPlease"

CommandArgument=<%#Eval("EmployeeID")%> />

Here, we’ve added two controls. The first is a Literal control, which serves as a

placeholder that we can replace with HTML later when the user clicks on the other

control we’ve added—a LinkButton. Even though the LinkButton looks like a link,

it really behaves like a button. When someone clicks this button, it generates an

event that can be handled on the server side. If you prefer, you can change the

LinkButton to a Button, and the functionality will remain identical. If you load the

page now, it should appear as shown in
Figure 10.2.

Now you have a button that’s displayed for each employee in the list. In order to

react to this LinkButton being clicked, you might think that you’d need to handle