Using the New ListView Control in ASP.NET 3.5 : Page 3

Editing Data with the ListView Control
As you've seen, displaying data through a ListView control is relatively straightforward, but you can let users edit the data in a ListView as well. Add a new ASP.NET page named ListViewEditExample.aspx to the sample web site and modify its code as shown in Listing 2:

The code in Listing 2 demonstrates how to use the EditItemTemplate element to generate content when an item is in edit mode, and update the database through the SqlDataSource control.

First, you set the UpdateCommand property of the SqlDataSource control to the SQL statement that will be executed to update the database with the latest values specified by the user:

   <asp:SqlDataSource ID="deptSource" runat="server" 
       ConnectionString="<%$ ConnectionStrings:AdventureWorks %>"
       SelectCommand="SELECT [DepartmentID],[Name],[GroupName] FROM 
       HumanResources.Department" UpdateCommand="UPDATE 
       HumanResources.Department SET Name = @Name,
       GroupName = @GroupName WHERE DepartmentID = @DepartmentID">
      </asp:SqlDataSource>

Next, in the ItemTemplate element, you specify the link users click to edit an item:

   <ItemTemplate>
      ----
      ----
      <asp:LinkButton ID="btnEdit" runat="Server" Text="Edit" 
       CommandName="Edit" />
     </td>
    </tr>
   </ItemTemplate>

After that, you specify the EditItemTemplate that declares the text boxes where users enter the update Name and/or GroupName of the department, and the links for the users to either commit ("Update") or cancel ("Cancel") the current operation.

   <EditItemTemplate>
    <tr style="background-color: #ADD8E6">            
     <td>
      <asp:TextBox ID="txtName" runat="server" 
       Text='<%# Bind("Name") %>' 
       MaxLength="50" /><br />
     </td>
     <td>
      <asp:TextBox ID="txtGroupName" runat="server" Text='<%# 
       Bind("GroupName") %>' MaxLength="50" /><br />
     </td>
     <td>
      <asp:LinkButton ID="btnUpdate" runat="server" 
       CommandName="Update" Text="Update" />&nbsp;
      <asp:LinkButton ID="btnCancel" runat="server" 
       CommandName="Cancel" Text="Cancel" />
     </td>
    </tr>
   </EditItemTemplate>

You define the LinkButton's action by setting the CommandName property to an appropriate value, as shown in Table 2.

Value	Description
Cancel	Cancels the current operation.
Delete	Deletes the currently selected item from the data source.
Edit	Switches the ListView to edit mode, and displays the content specified in the EditItemTemplate element.
Insert	Saves the values in the data source control to the data source as a new record.
Update	Updates the data source with the values in the data source control.

At the end of the update, the ListView control fires an OnItemUpdated event that you can use to confirm the update status to users. In the code in Listing 2, the ListView control handles two events:

Figure 2. Editable ListView in Action: The configured ListView control displays an Edit link for each record. Clicking that link switches the contents of the ListView control to edit mode.

• OnItemUpdated: As the name suggests, this event allows you to perform a custom routine at the end of an update operation. In the preceding code, this event is used to inform users of the number of records affected.
• OnPagePropertiesChanged: The ListView fires this event when the page properties change. The code in Listing uses this event to clear out the text contained in the label control.

With the ListView configured, if you navigate to the page with a browser you should see an output similar to Figure 2:

When you click on the Edit hyperlink, the ListView uses the EditItemTemplate to display the textboxes where users can edit the selected item, as shown in Figure 3.

Figure 3. Edit Mode: In edit mode, the EditItemTemplate element generates the text boxes where users can enter updated values for the Name and GroupName fields.

Figure 4. Records Affected: At the end of the update process, the control displays the number of records affected by the update operation in a Label control.

Note the Update and Cancel links in the right column in Edit mode. When you click on the Update link to save the changes back to the database, the code uses the OnItemUpdated event to display the number of records affected (see Figure 4).

That completes the key features of ListView control. You've seen examples of using it to create a simple data-driven web page, and a more complex page that leverages the control's update functionality declaratively, by specifying appropriate edit and confirmation markup. Finally, you have seen how to handle events generated by the ListView control. As you can see, the ListView's extensible nature lets you customize the runtime behavior easily to suit your needs.

Previous Page