An DataList can be set up to operate in editing mode much like the Repeater. The major difference is in the fact that a DataList has an EditItemTemplate that is activated when a record is placed in edit mode. The following is one example of using a DataList for record editing. Like the Repeater, it is problematic in using a DataList for editing since the lack of a paging mechanism limits the DataList to editing databases of relatively modest sizes.

Note that making actual changes to the BooksDB.mdb database is not permitted in these tutorials; however, all other functions work as expected.

The DataList displays all fields in all Books records of the BooksDB.mdb database. The header row displays blank input areas along with an "Insert" button for creating a new product record. Item rows display records with "Edit" and "Delete" buttons. The "Edit" button switches the fields to input areas for changing records and displays "Update" and "Cancel" buttons. The "Delete" button removes the record from the table.

Coding the DataList

Code for the DataList is shown below along with its AccessDataSource. A second AccessDataSource is needed to populate DropDownLists of book types during record insertion and updating.

<asp:AccessDataSource id="BookSource" Runat="Server"
  DataFile="../Databases/BooksDB.mdb"
  SelectCommand = "SELECT * FROM Books ORDER BY BookID"/>

<asp:AccessDataSource id="TypeSource" Runat="Server"
  DataFile="../Databases/BooksDB.mdb"
  SelectCommand = "SELECT DISTINCT BookType FROM Books ORDER BY BookType"/>

<h3>Book Edit</h3>
	
<asp:Label id="EditMessage" Text=" " ForeColor="#FF0000" 
EnableViewState="False" Runat="Server"/>

<asp:DataList id="DataListEdit" DataSourceID="BookSource" Runat="Server"
  OnItemCommand="Edit_Record"
  CellSpacing="0"
  CellPadding="3"
  RepeatColumns="3"
  RepeatDirection="Horizontal"
  GridLines="Both"
  BorderWidth="1">
  
  <HeaderTemplate>
  <table id="Add"  border="1">
  <tr>
    <th>ID</th>
    <th>Type</th>
    <th>Title</th>
    <th>Author</th>
    <th>Description</th>
    <th>Price</th>
    <th>Qty</th>
    <th>Sale</th>
    <th>Edit</th>
  </tr>
  <tr>
    <td><asp:TextBox id="BookID" Runat="Server"
          Font-Size="8pt" Width="45px"/></td>
    <td><asp:DropDownList id="BookType"
          DataSourceID="TypeSource" Runat="Server"
          DataTextField="BookType"
          DataValueField="BookType"
          Font-Size="8pt"/></td>
    <td><asp:TextBox id="BookTitle" Runat="Server"
          Font-Size="8pt" Width="80px"/></td>
    <td><asp:TextBox id="BookAuthor" Runat="Server"
          Font-Size="8pt" Width="90px"/></td>
    <td><asp:TextBox id="BookDescription" Runat="Server"
          TextMode="MultiLine" Width="150" Rows="2"
          Font-Name="Arial" Font-Size="7pt"/></td>
    <td><asp:TextBox id="BookPrice" Runat="Server"
          Font-Size="8pt" Width="50px"
          Style="text-align:right"/></td>
    <td><asp:TextBox id="BookQty" Runat="Server"
          Font-Size="8pt" Width="25px"
          Style="text-align:right"/></td>
    <td><asp:CheckBox id="BookSale" Runat="Server"/></td>
    <td nowrap>
        <asp:Button Text="Insert" CommandName="Insert" Runat="Server"
          Font-Size="7pt" Width="45"/></td>
  </tr>
  <tr>
    <td colspan="9" style="border-bottom:solid 1 black"></td>
  </tr>	
  </table>
  </HeaderTemplate>
  
  <ItemTemplate>
  <table id="Display" border="0" cellpadding="1">
  <tr>
    <th><b>ID: </b></th>
    <td><asp:Label id="BookIDDelete" Runat="Server"
          Text='<%# Eval("BookID") %>'/></td>
  </tr>
  <tr>
    <th><b>Type: </b></th>
    <td><asp:Label Runat="Server"
          Text='<%# Eval("BookType") %>'/></td>
  </tr>
  <tr>
    <th><b>Title: </b></th>
    <td><asp:Label Runat="Server"
          Text='<%# Eval("BookTitle") %>'/></td>
  </tr>
  <tr>
    <th><b>Author: </b></th>
    <td><asp:Label Runat="Server"
          Text='<%# Eval("BookAuthor") %>'/></td>
  </tr>
  <tr style="vertical-align:top">
    <th><b>Description: </b></th>
    <td><asp:Panel Width="150" Height="100" ScrollBars="Vertical" 
        Runat="Server">
          <asp:Label Runat="Server"
          Text='<%# Eval("BookDescription") %>'/>
      </asp:Panel></td>
  <tr>
  <th><b>Price: </b></th>
    <td><asp:Label Runat="Server"
          Text='<%# Eval("BookPrice") %>'/></td>
  </tr>
  <tr>
    <th><b>Quantity: </b></th>
    <td><asp:Label Runat="Server"
          Text='<%# Eval("BookQty") %>'/></td>
  </tr>
  <tr>
    <th><b>Sale: </b></th>
    <td><asp:CheckBox Runat="Server"
          Checked='<%# Eval("BookSale") %>'/></td>
  </tr>
  </table>
  <asp:Button Text="Edit" CommandName="Edit" Runat="Server"
    Font-Size="7pt" Width="45"/>
  <asp:Button Text="Delete" CommandName="Delete" Runat="Server"
    Font-Size="7pt" Width="45"/>
  </ItemTemplate>
  
  <EditItemTemplate>
  <table id="Edit" border="0" cellpadding="0">
  <tr>
    <th>ID:</th>
    <td><asp:TextBox id="BookID" Runat="Server" ReadOnly="True"
          Text='<%# Eval("BookID") %>'
          Font-Size="8pt" Width="45px"/></td>
  </tr>
  <tr>
    <th>Type:</th>
    <td><asp:DropDownList id="BookType" Runat="Server"
          DataSourceID="TypeSource"
          DataTextField="BookType"
          DataValueField="BookType"
          SelectedValue='<%# Eval("BookType") %>'
          Font-Size="8pt"/></td>
  </tr>
  <tr>
    <th>Title:</th>
    <td><asp:TextBox id="BookTitle" Runat="Server"
          Text='<%# Eval("BookTitle") %>'
          Font-Size="8pt" Width="145px"/></td>
  </tr>
  <tr>
    <th>Author:</th>
    <td><asp:TextBox id="BookAuthor" Runat="Server"
          Text='<%# Eval("BookAuthor") %>'
          Font-Size="8pt" Width="145px"/></td>
  </tr>
  <tr style="vertical-align:top">
    <th>Description:</th>
    <td><asp:TextBox id="BookDescription" Runat="Server"
          Text='<%# Eval("BookDescription") %>'
          TextMode="MultiLine"
          Font-Name="Arial" Font-Size="8pt" 
          Width="145" Rows="5"/></td>
  <tr>
    <th>Price:</th>
    <td><asp:TextBox id="BookPrice" Runat="Server"
          Text='<%# Eval("BookPRice") %>'
          Font-Size="8pt" Width="50px"
          Style="text-align:right"/></td>
  </tr>
  <tr>
    <th>Qty:</th>
    <td><asp:TextBox id="BookQty" Runat="Server"
          Text='<%# Eval("BookQty") %>'
          Font-Size="8pt" Width="25px" 
          Style="text-align:right"/></td>
  </tr>
  <tr>
    <th>Sale:</th>
    <td><asp:CheckBox id="BookSale" Runat="Server"
          Checked='<%# Eval("BookSale") %>'/></td>
  </tr>
  </table>
  <asp:Button Text="Update" CommandName="Update" Runat="Server"
    Font-Size="7pt" Width="45"/>
  <asp:Button Text="Cancel" CommandName="Cancel" Runat="Server"
    Font-Size="7pt" Width="45"/>
  </EditItemTemplate>

</asp:DataList>

As in the case with the Repeater, data binding expressions are in the format <%# Eval("field") %>. It is not necessary to use the Bind() method that is needed when working with a GridView, DetailsView, or FormView.

Like a Repeater, a DataList recognizes an ItemCommand event when an enclosed command button is clicked. Its OnItemCommand event handler calls a subprogram for this event. The DataList also recognizes OnItemEdit, OnItemUpdate, OnItemDelete, and OnItemCancel events for scripting them separately. In this example, the general-purpose OnItemCommand handler calls the Edit_Record subprogram to handle all command events.

A <HeaderTemplate> is defined to contain the input areas for adding a new record. It is formatted as a table to control formatting of the items. An insert button is defined as a command button with the CommandName "Insert".

The <ItemTemplate>, as well, is formatted as a table to align items appearing in the cells. Each record has accompanying edit and delete command buttons with "Edit" and "Delete" command names that call the Edit_Record subprogram through the OnItemCommand event handler. The edit button causes display of the <EditItemTemplate> and associated "Update" and "Cancel" buttons for updating the record.

DataList Editing

The script for the DataList is similar to the one used for the previous Repeater. The Edit_Record subprogram, being called from a DataList, has the argument DataListCommandEventArgs. The subprogram's first task is to locate controls for the selected record in the same manner as is done for the Repeater. These data input controls appear in the HeaderTemplate and EditItemTemplate when the "Edit" button is clicked. Then the subprogram performs activities depending on the CommandName of the button that is clicked.

Sub Edit_Record (Src As Object, Args As DataListCommandEventArgs)
  
  Dim BookID As TextBox = Args.Item.FindControl("BookID")
  Dim BookType As DropDownList = Args.Item.FindControl("BookType")
  Dim BookTitle As TextBox = Args.Item.FindControl("BookTitle")
  Dim BookAuthor As TextBox = Args.Item.FindControl("BookAuthor")
  Dim BookDescription As TextBox = Args.Item.FindControl("BookDescription")
  Dim BookPrice As TextBox = Args.Item.FindControl("BookPrice")
  Dim BookQty As TextBox = Args.Item.FindControl("BookQty")
  Dim BookSale As CheckBox = Args.Item.FindControl("BookSale")
  
  If Args.CommandName = "Edit" Then
    
    DataListEdit.EditItemIndex = Args.Item.ItemIndex
    DataListEdit.DataBind()
  
  End If
  
  If Args.CommandName = "Cancel" Then
    
    ' Set the EditItemIndex property to -1 to exit editing mode. Be sure
    ' to rebind the DataList to the data source to refresh the control.
    DataListEdit.EditItemIndex = -1
    DataListEdit.DataBind()
    
  End If
  
  If Args.CommandName = "Insert" Then
    
    Dim SQLString As String = "INSERT INTO Books " & _
      "(BookID, BookType, BookTitle, BookAuthor, BookDescription, " & _
      "BookPrice, BookQty, BookSale) VALUES (" & _
      "'" & BookID.Text            & "', " & _
      "'" & BookType.SelectedValue & "', " & _
      "'" & BookTitle.Text         & "', " & _
      "'" & BookAuthor.Text        & "', " & _
      "'" & BookDescription.Text   & "', " & _
      "'" & BookPrice.Text         & "', " & _
      "'" & BookQty.Text           & "', " & _
      BookSale.Checked             & ")"
    BookSource.InsertCommand = SQLString
    BookSource.Insert()
    EditMessage.Text = "Record " & BookID.Text & " inserted"
    
  End If
  
  If Args.CommandName = "Update" Then
    
    Dim SQLString As String = "UPDATE Books SET " & _
      "BookType = '"         & BookType.SelectedValue & "', " & _
      "BookTitle = '"        & BookTitle.Text         & "', " & _
      "BookAuthor = '"       & BookAuthor.Text        & "', " & _
      "BookDescription = '"  & BookDescription.Text   & "', " & _
      "BookPrice = '"        & BookPrice.Text         & "', " & _
      "BookQty = '"          & BookQty.Text           & "', " & _
      "BookSale = "          & BookSale.Checked       & " "   & _
      "WHERE BookID = '" & BookID.Text & "'"
    BookSource.UpdateCommand = SQLString
    BookSource.Update()
    DataListEdit.EditItemIndex = -1
    DataListEdit.DataBind()
    EditMessage.Text = "Record " & BookID.Text & " updated"
    
  End If
  
  If Args.CommandName = "Delete" Then
    
    Dim BookIDDelete As Label = Args.Item.FindControl("BookIDDelete")
    Dim SQLString As String = "DELETE FROM Books " & _
                               "WHERE BookID = '" & BookIDDelete.Text & "'"
    BookSource.DeleteCommand = SQLString
    BookSource.Delete()
    EditMessage.Text = "Record " & BookIDDelete.Text & " deleted"
    
  End If

End Sub

When an "Edit" button is clicked, a record's EditItemTemplate is revealed as a set of input controls for changing data values. This switch from the ItemTemplate is activated by setting the EditItemIndex property of the record. This portion of the script is repeated below.

If Args.CommandName = "Edit" Then

  DataListEdit.EditItemIndex = Args.Item.ItemIndex
  DataListEdit.DataBind()

End If

The current ItemIndex of the selected item is the DataList's index number for the record, numbered beginning with 0 for the HeaderTemplate. This index number is passed to the subprogram through its argument list. It identifies the ItemTemplate that should be replaced by its EditItemTemplate by setting the DataList's EditItemIndex to the same value. Then the DataList is re-bound to its AccessDataSource.

The reverse process is following when the "Cancel" button is clicked. The currently displayed EditItemTemplate is replaced by its ItemTemplate. Setting the EditItemIndex to -1 displays the ItemTemplate for any item currently in edit mode.

If Args.CommandName = "Cancel" Then

  DataListEdit.EditItemIndex = -1
  DataListEdit.DataBind()

End If

The remainder of the scripts are virtually the same as for the Repeater when the "Insert," "Update," and "Delete" buttons are clicked. One difference is in the delete routine. Deletion takes place with the ItemTemplate displayed. Within this template, the BookID required to identify the record is displayed in a Label control, not with a TextBox as occurs when the EditItemTemplate is being displayed. Therefore, the FindControl() method must find a Label.

If Args.CommandName = "Delete" Then
  
  Dim BookIDDelete As Label = Args.Item.FindControl("BookIDDelete")
  Dim SQLString As String = "DELETE FROM Books " & _
                            "WHERE BookID = '" & BookIDDelete.Text & "'"
  BookSource.DeleteCommand = SQLString
  BookSource.Delete()
  EditMessage.Text = "Record " & BookIDDelete.Text & " deleted"
  
End If

This Edit_Record subprogram does not perform data validation. Routines can be easily added as described for the Repeater.