Adding the EditItemTemplate Section
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 JumpstartDataListEditItemTemplate.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.
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.)
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
5. |
Right-click the DataList control and select End Template Editing from the context menu. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
6. |
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)