Chapter 10: Displaying Content Using Data Lists

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:

<asp:DataList ID="employeesList" runat="server"> <ItemTemplate>

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

<asp:Button runat="server" ID="myButton" Text="Select" />

</ItemTemplate>

</asp:DataList>

Although it may not be obvious at the first glance, you can’t access the Button easily through your code. 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 pretty 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? We’ll improve our employee directory by making a simpler, basic view of the items, and add 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. You’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:

Visual Basic

File: EmployeeDirectory.aspx (excerpt)

<asp:DataList id="employeesList" runat="server"> <ItemTemplate>

<asp:Literal ID="extraDetailsLiteral" runat="server"

406

Handling DataList Events

Figure 10.2. Hiding employee details

EnableViewState="false" />

Name: <strong><%#Eval("Name")%></strong><br /> Username: <strong><%#Eval("Username")%></strong><br />

<asp:LinkButton ID="detailsButton" runat="server" Text=<%#"View more details about " & Eval("Name")%> CommandName="MoreDetailsPlease" CommandArgument=<%#Eval("EmployeeID")%> />

</ItemTemplate>

<SeparatorTemplate> <hr />

</SeparatorTemplate>

</asp:DataList>

C#	File: EmployeeDirectory.aspx (excerpt)

<asp:DataList id="employeesList" runat="server"> <ItemTemplate>

<asp:Literal ID="extraDetailsLiteral" runat="server" EnableViewState="false" />

Name: <strong><%#Eval("Name")%></strong><br /> Username: <strong><%#Eval("Username")%></strong><br />

<asp:LinkButton ID="detailsButton" runat="server"

407

Chapter 10: Displaying Content Using Data Lists

Text=<%#"View more details about " + Eval("Name")%> CommandName="MoreDetailsPlease" CommandArgument=<%#Eval("EmployeeID")%> />

</ItemTemplate>

<SeparatorTemplate> <hr />

</SeparatorTemplate>

</asp:DataList>

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 its Click event. Not this time! The button is “inside” the DataList as part of its ItemTemplate, so it’s not directly visible to your code. Also, when the code executes, you’ll have more instances of this button—so on the server side, you’ll need a way to know which of them was clicked!

Luckily, ASP.NET provides an ingenious means of handling this scenario. Whenever a button inside a DataList generates a Click event, the DataList generates itself a ItemCommand event. The DataList control is accessible in your code, so you can handle its ItemCommand event, whose arguments will give us information about which control was clicked.

Within the ItemCommand event handler, we can retrieve the data contained in the LinkButton’s CommandName and CommandArgument properties. We use these properties to pass the employee ID to the ItemCommand event handler, which can use the ID to get more data about that particular employee.

Take another look at the button definition from the DataList’s ItemTemplate:

Visual Basic

File: EmployeeDirectory.aspx (excerpt)

<asp:LinkButton ID="detailsButton" runat="server" Text=<%#"View more details about " & Eval("Name")%>

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

408

Handling DataList Events

Here, you can see that we’re using CommandArgument to save the ID of the employee record with which it’s associated. We’re able to read this data from the

DataList’s ItemCommand event handler.

Let’s use Visual Web Developer to generate the ItemCommand event handler. Open EmployeeDirectory.aspx in Design View, select the DataList, and hit

F4 to open its Properties window. There, click the yellow lightning symbol to open the list of events, and double-click the ItemCommand event in that list. Visual Web Developer will generate an empty event handler, and take you to the event handler’s code in the code-behind file.

If you were to open the DataList’s properties again, you’d see the event handler name appearing next to the event name, as depicted in Figure 10.3.

Figure 10.3. The ItemCommand event in the Properties window

Modify the code in employeesList_ItemCommand as shown below.

Visual Basic	File: EmployeeDirectory.aspx.vb (excerpt)
Protected	Sub employeesList_ItemCommand(ByVal source As Object, _
ByVal e	As System.Web.UI.WebControls.DataListCommandEventArgs) _
Handles	employeesList.ItemCommand
' Which	button was clicked?

If e.CommandName = "MoreDetailsPlease" Then

'Find the Literal control in the DataList item Dim li As Literal

li = e.Item.FindControl("extraDetailsLiteral")

'Add content to the Literal control

li.Text = "Employee ID: <strong>" & e.CommandArgument & _ "</strong><br />"

End If End Sub

409

Chapter 10: Displaying Content Using Data Lists

C#	File: EmployeeDirectory.aspx.cs (excerpt)

protected void employeesList_ItemCommand(object source, DataListCommandEventArgs e)

{

// Which button was clicked?

if (e.CommandName == "MoreDetailsPlease")

{

//Find the Literal control in the DataList item Literal li;

li = (Literal)e.Item.FindControl("extraDetailsLiteral");

//Add content to the Literal control

li.Text = "Employee ID: <strong>" + e.CommandArgument + "</strong><br />";

}

}

Our code is almost ready to execute, but we should make one more minor tweak before we execute this page. At the moment, the Page_Load method will data bind the DataList every time the page loads, which will put unnecessary load on our database server. Let’s change this code so that the data binding only takes place when the page is being loaded for the first time. We’ll also move the data binding code into its own function, so that we can make use of it later. Modify the code as shown below, moving the current contents of Page_Load into a new method called BindList:

Visual Basic File: EmployeeDirectory.aspx.vb (excerpt)

Protected Sub Page_Load(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles Me.Load

If Not IsPostBack Then BindList()

End If

End Sub

Protected Sub BindList() ' Define data objects

Dim conn As SqlConnection
Dim comm As SqlCommand
Dim reader As SqlDataReader
End Sub
C#	File: EmployeeDirectory.aspx.cs (excerpt)

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

410

Handling DataList Events

BindList();

}

}

protected void BindList()

{

// Define data objects SqlConnection conn; SqlCommand comm;

SqlDataReader reader;

}

Execute the project and click the View more details links to see the employee ID appear, as shown in Figure 10.4.

Figure 10.4. The Employee Directory showing employee IDs

The code in employeesList_ItemCommand shows how you can work with controls inside a DataList template, and how to handle their events. We determine which control was clicked by checking the value of e.CommandName in the event handler, which will be populated with the value of the CommandName property of the control that was clicked. Since our LinkButton has the CommandName value MoreDe-

411

Chapter 10: Displaying Content Using Data Lists

tailsPlease, we check for this value in the ItemCommand event handler, as shown below:

Visual Basic File: EmployeeDirectory.aspx.vb (excerpt)

' Which button was clicked?

If e.CommandName = "MoreDetailsPlease" Then

C# File: EmployeeDirectory.aspx.cs (excerpt)

// Which button was clicked?

if (e.CommandName == "MoreDetailsPlease")

{

Once we know the View more details button was pressed, we want to use the extraDetailsLiteral control from our template to display the employee ID. But, given that this control is inside our template, how can we access it through code?

To use a control inside a DataList, we use the FindControl method of the object e.Item. Here, e.Item refers to the template that contains the control; the FindControl method will return a reference to any control within the template that has the supplied ID. So, in order to obtain a reference to the control with the ID extraDetailsLiteral, we use FindControl like this:

Visual Basic File: EmployeeDirectory.aspx.vb (excerpt)

' Find the Literal control in the DataList item Dim li As Literal

li = e.Item.FindControl("extraDetailsLiteral")

Note that FindControl returns a generic Control object. If you’re using VB, the returned Control is automatically converted to a Literal when you assign it to an object of type Literal. In C#, we need an explicit cast, as shown here:

C# File: EmployeeDirectory.aspx.cs (excerpt)

// Find the Literal control in the DataList item Literal li;

li = (Literal)e.Item.FindControl("extraDetailsLiteral");

Finally, once we have access to the Literal control in a local variable, setting its contents is a piece of cake:

Visual Basic File: EmployeeDirectory.aspx.vb (excerpt)

' Add content to the Literal control

li.Text = "Employee ID: <strong>" & e.CommandArgument & _ "</strong><br />"

412