How to perform edit using DataList

In this article we are going to see how to perform edit using DataList control. We have to handle the EditCommand, UpdateCommand, CancelCommand events of the DataList to perform edit.

Step 1:After you bind the Data to the DataList control. You need to set the DataKeyField property of the DataList to the PrimaryKey of your database table. This DataKeyField value is used to identify the row which is in edit mode and needs to be updated.

Step 2:Create an ItemTemplate and then add a Button control to it. Set the CommandName property of this button to edit.

Step 3:Create an EditItemTemplate and add the following controls to it:
1.Controls for all of the database values that user can change. We need to use the Eval method to specify which database field each control is bound to. In the below example txtEmpName control is bound to EmpName field of the database table.
For Example:
<asp:TextBox ID="txtEmpName" runat="server"
Text='<%# Eval("EmpName") %>' />

2.Two Button controls with its Text property set to "Update" and "Cancel" respectively and its CommandName property set to "update" and "cancel" respectively.
The Update button will be used save any changes after editing is finished. The Cancel button will be used to cancel editing without saving any changes.

Step 4:Write the below code in code-behind file for the following functionaliy:
1.Handle the EditCommand event of the DataList. In this event set the EditItemIndex property of the DataList to ItemIndex property of the current Item which will be in edit mode Then call the DataList control's DataBind method.

2.Handle the CancelCommand event of the DataList. Here set the EditItemIndex property of the DataList to "-1". -1 specifies that the DataList is not in EditMode and then call DataList control's DataBind method.

3.Handle the UpdateCommand event of the DataList. Here, get the new values entered by the user from the controls in the current item which is being edited and pass them to the data source control for updating and saving it.

protected void DataList1_EditCommand(object source,DataListCommandEventArgs e)
{
    //Set the DataList in edit mode	
    DataList1.EditItemIndex = e.Item.ItemIndex;
    DataList1.DataBind();
}

protected void DataList1_CancelCommand(object source, 
    DataListCommandEventArgs e)
{
    //Cancel the Edit operation by setting "EditItemIndex" to -1.
    DataList1.EditItemIndex = -1;
    DataList1.DataBind();
}

protected void DataList1_UpdateCommand(object source, 
    DataListCommandEventArgs e)
{
    String empID = DataList1.DataKeys[e.Item.ItemIndex].ToString();
    String empName = ((TextBox)e.Item.FindControl("txtEName")).Text;
    decimal salary = Convert.ToDecimal(((TextBox) e.Item.FindControl("txtSal")).Text);

    SqlDataSource1.UpdateParameters["original_empID"].DefaultValue = empID;
    SqlDataSource1.UpdateParameters["empName"].DefaultValue = empName;
    SqlDataSource1.UpdateParameters["salary"].DefaultValue = salary;

    //Save the changes
    SqlDataSource1.Update();

    DataList1.EditItemIndex = -1;
    //Bind the DataList with the updated data.
    DataList1.DataBind();
}

        <asp:DataList runat="server" 
            DataKeyField="empID" 
            DataSourceID="SqlDataSource1" ID="DataList1"
            OnEditCommand="DataList1_EditCommand" 
            OnCancelCommand="DataList1_CancelCommand" 
            OnUpdateCommand="DataList1_UpdateCommand">
            <EditItemTemplate>
               Emp ID: <asp:Label ID="lblempID" runat="server" 
                         Text='<%# Eval("empID") %>'>
                    </asp:Label>
                <br />
               Emp Name: <asp:TextBox ID="textEName" runat="server" 
                         Text='<%# Eval("EmpName") %>'>
                      </asp:TextBox>
                <br />
                Salary: <asp:TextBox ID="txtSal" 
                                 runat="server" 
                        Text='<%# Eval("salary") %>'>
                     </asp:TextBox>
                <br />
                <asp:LinkButton ID="lnkbtnUpdate" runat="server" 
                    CommandName="update" >
                    Save
                </asp:LinkButton>
                 
                <asp:LinkButton ID="lnkbtnCancel" runat="server">
                    CommandName="cancel" 
                    Cancel
                </asp:LinkButton>
            </EditItemTemplate>
            <ItemTemplate>
                Emp ID:
                <asp:Label ID="lblEmpid" runat="server" 
                    Text='<%# Eval("empID") %>'>
                </asp:Label>
                <br />
                Emp Name:
                <asp:Label ID="lblEmpName" runat="server"
                     Text='<%# Eval("EmpName") %>'>
                </asp:Label>
                <br />
                Salary:
                <asp:Label ID="lblSalary" runat="server" 
                    Text='<%# Eval("salary") %>'>
                </asp:Label>
                <br />
                <asp:LinkButton runat="server" ID="lnkEdit" CommandName="edit" >Edit</asp:LinkButton><br />
            </ItemTemplate>
        </asp:DataList>

        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
              ConnectionString=
                 "<%$ ConnectionStrings:MSNETConnectionString %>"
            SelectCommand="SELECT [empID], [EmpName], 
                 [salary] FROM [Emp]"
            UpdateCommand="UPDATE [Emp] SET [EmpName] = @EmpName, [salary] = @salary 
                 WHERE [empID] = @original_empID">
            <UpdateParameters>
               <asp:Parameter Name="EmpName" Type="String" />
              <asp:Parameter Name="salary" Type="Decimal" />
              <asp:Parameter Name="original_empID" Type="Int32" />
            </UpdateParameters>
        </asp:SqlDataSource>