Adding the EditItemTemplate Section


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.


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


    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")


    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.


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) 


    ASP. NET Developer's JumpStart
    ASP.NET Developers JumpStart
    ISBN: 0672323575
    EAN: 2147483647
    Year: 2002
    Pages: 234 © 2008-2017.
    If you may any questions please contact us: