Adding the EditItemTemplate Section

IOTA^_^

---

	ASP.NET Developer's JumpStart By Paul D. Sheriff, Ken Getz
	Table of Contents
	Chapter 19.  Using the DataList Control

---

You've created the required ItemTemplate so that you can display data, but you'll need to add the EditItemTemplate section if you want to handle editing. This template allows you to supply layout information, used only when you're editing a row of data within the DataList control. You can have completely separate layouts for displaying and for editing data.

TIP

Creating the EditItemTemplate requires a bit of care as well as some time. If you don't wish to follow these steps, you can simply copy and paste the appropriate HTML from the file Jumpstart\DataList\EditItemTemplate.txt. Paste the contents of the file within the asp:DataList element, in HTML view. We suggest that, for this template, you copy the HTML rather than creating each control individually.

To add the template, follow these steps:

1. With EmployeeInfo.aspx open in the page designer, right-click the DataList control.

2. From the context menu, select Edit Template, Item Templates. At the bottom of the design area, you'll find the EditItemTemplate area.

3. Add controls to the ItemTemplate section and set the controls' properties, using Table 19.6 as your guide. When you're done, the section should look like Figure 19.12.

   Figure 19.12. The finished EditItemTemplate looks like this.

   

   Table 19.6. Set the EditItemTemplate Controls' Properties Using This Guide

   Control	Property	Value
   Image	ID	imgPhoto1
   	Height	93px
   	Width	66px
   Label	Text	First
   	Width	50
   TextBox	ID	txtFirstName
   Label	Text	Last
   	Width	50
   TextBox	ID	txtLastName
   Label	Text	Phone
   	Width	50
   TextBox	ID	txtPhone
   LinkButton	ID	btnUpdate
   	CommandName	update
   	Height	16px
   	Text	Update
   	Width	58px
   LinkButton	ID	btnCancel
   	CommandName	cancel
   	Height	16px
   	Text	Cancel
   	Width	58px

   TIP

   To get the controls laid out similar to the way they appear in Figure 19.12, press Enter to insert a <p> tag into the HTML after the Image control and after the Phone text box. Press Shift+Enter between the other controls to insert a <br> tag into the HTML.

4. One by one, select each control, find the DataBindings property in the Properties window, click the … button to display the dialog box, and bind the properties as shown in Table 19.7. (If you've pasted the content from the EditItemTemplate.txt file, you've already added these properties.)

   Table 19.7. Set Data-Binding Properties for Each Control

   Control	Property	Custom Binding Expression
   imgPhoto2	ImageURL	DataBinder.Eval(Container.DataItem, "PhotoURL")
   txtFirstName	Text	DataBinder.Eval(Container.DataItem, "FirstName")
   txtLastName	Text	DataBinder.Eval(Container.DataItem, "LastName")
   txtPhone	Text	DataBinder.Eval(Container.DataItem, "HomePhone")
   btnUpdate	CommandArgument	DataBinder.Eval(Container.DataItem, "EmployeeID")

   TIP

   As we mentioned before, because the custom binding expression values for all the controls are so similar, you may want to type one, copy and paste the others, and then modify each field name.

5. Right-click the DataList control and select End Template Editing from the context menu.

6. Save your project.

Using the LinkButton Control Properties

In this section, you set the CommandName and CommandArgument properties of LinkButton controls. Why use these properties? When you click the button, the DataList control looks at the CommandName property. If it finds "edit", "update", "delete", or "cancel" in that property, it raises the corresponding event back on the server: EditCommand, UpdateCommand, DeleteCommand, or CancelCommand.

TIP

Rather than writing separate event handlers, you could take advantage of the fact that the DataList control raises its ItemCommand event when you click any button or link within the control. You can place all the event-handling code in that one procedure, if you like. (You'll still need to set the CommandName property for each button or link within the control; otherwise, you'll have no way of knowing which control was clicked. We find it easier to use separate event handlers.)

The CommandArgument property allows you to specify data that you want sent to the event-handling procedure. In each case, in this example, if you've set the CommandArgument property, you've bound it to the EmployeeID value for the current row of data. Using this technique, from within the event-handling code, you can take action against the selected employee's data.

How does the event handler retrieve this information? The ASP.NET page framework passes your event handler, as its second parameter, an object of type DataListCommandEventArgs. This object type provides, among its other properties, a CommandArgument property. This property contains the value placed into the CommandArgument property of the control that triggered the event.

For example, in the UpdateCommand event handler, which you'll add in the next section, the code uses the CommandArgument property to retrieve the employee ID for the row you're updating:

 strSQL = String.Format( _  "UPDATE Employees " & _  "SET FirstName = {0}, LastName = {1}, " & _  "HomePhone = {2} " & _  "WHERE EmployeeID = {3}", _  DataHandler.QuoteString(strFirstName), _  DataHandler.QuoteString(strLastName), _  DataHandler.QuoteString(strPhone), _  e.CommandArgument.ToString) 

---

IOTA^_^

Top