Entity Framework - Editing, Updating and Deleting Data in the Form

STEP 1: Setting up the UI

Since this is a continuation of my previous example then I'm jus going to use the same layout and extend it a bit by adding some buttons on the form and a label control for displaying some message. Aside from that I have also moved the form fields inside a Panel control for validation purposes and removed the ReadOnly attribute for each TextBox. Here's the updated mark-up below:

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <asp:DropDownList ID="ddlUser" runat="server" AppendDataBoundItems="true" 
        AutoPostBack="true" onselectedindexchanged="ddlUser_SelectedIndexChanged">
        <asp:ListItem Value="0">--Select--</asp:ListItem>
    </asp:DropDownList>
    <asp:Panel ID="pnlUserDetail" runat="server" Enabled="false">
        <br />First Name:
        <br /><asp:TextBox ID="tbFirstName" runat="server" />
        <br />Last Name: 
        <br /><asp:TextBox ID="tbLastName" runat="server" />
        <br />Contact Number: 
        <br /><asp:TextBox ID="tbContactNumber" runat="server" />
        <br />
        <br />
    </asp:Panel>
    <asp:Label ID="lblMessage" runat="server" ForeColor="Green" />
    <br />
    <asp:Button ID="btnEdit" runat="server" Text="Edit" onclick="btnEdit_Click" />
    <asp:Button ID="btnUpdate" runat="server" Text="Update" Visible="false" onclick="btnUpdate_Click" />
    <asp:Button ID="btnCancel" runat="server" Text="Cancel" Visible="false" onclick="btnCancel_Click" />
    <asp:Button ID="btnDelete" runat="server" Text="Delete" onclick="btnDelete_Click" />
</asp:Content>

STEP 3: Editing and Updating the Form

Add the following method below in the UserManager class:

public void UpdateUser(UserDetail userDetail) {
            var user = (from o in dre.SysUsers
                        where o.SysUserID == userDetail.SysUserID
                        select o).First();
            user.FirstName = userDetail.FirstName;
            user.LastName = userDetail.LastName;
            user.ContactNumber = userDetail.ContactNumber;

            dre.SaveChanges();
        }

The UpdateUser() is a method that handles the updating of data. This method take the UserDetail as the parameter. If you can still remember in my previous example particularly in STEP 2, the UserDatail is a class that holds some properties such as the SysUserID, FirstName, LastName and ContactNumber.

The first line within the method is we queried the SysUser object based on the userID using LINQ syntax and assigned the result into a variable user. The FirstOrDefault function is an eager function which returns the first element of a sequence that satisfies a specified condition. Once the LINQ FirstOrDefault function is invoked then EF will autmatically issue a parameterize SQL query to the database in which the SQL Server can understand and then bring back the result to the Entity Model.

After querying the data we then assign a new value to each field and then call SaveChanges() method to update the database with the changes.

Now let's go to the code behind part of the webform and perform the update by calling the method UpdateUser() from the UserManager class. Here are the code blocks below:

private void ToggleButton(bool isEdit){
            if (isEdit) {
                btnEdit.Visible = false;
                btnDelete.Visible = false;
                btnUpdate.Visible = true;
                btnCancel.Visible = true;
            }
            else {
                btnEdit.Visible = true;
                btnDelete.Visible = true;
                btnUpdate.Visible = false;
                btnCancel.Visible = false;
            }

            pnlUserDetail.Enabled = isEdit;
        }

        private void UpdateUserDetail(UserDetail userDetail) {
            UserManager userMgr = new UserManager();
            userMgr.UpdateUser(userDetail);
        }

        protected void btnEdit_Click(object sender, EventArgs e) {
            if (ddlUser.SelectedItem.Value != "0") {
                ToggleButton(true);
                lblMessage.Text = string.Empty;
            }
            else {
                lblMessage.Text = "Please select name from the list first.";
                lblMessage.ForeColor = System.Drawing.Color.Red;
            }
        }

        protected void btnUpdate_Click(object sender, EventArgs e) {

            UserDetail userDetail = new UserDetail();
            userDetail.SysUserID = Convert.ToInt32(ddlUser.SelectedItem.Value);
            userDetail.FirstName = tbFirstName.Text.TrimEnd();
            userDetail.LastName = tbLastName.Text.TrimEnd();
            userDetail.ContactNumber = tbContactNumber.Text.TrimEnd();

            UpdateUserDetail(userDetail);
            lblMessage.Text = "Update Successful!";
            ToggleButton(false);
        }

        protected void btnCancel_Click(object sender, EventArgs e) {
            ToggleButton(false);
        }

The ToggleButton() method is a method that returns a boolean type which is responsible for toggling the visibility of each buttons in the form during Edit,Update,cancel and Delete mode.

The UpdateUserDetail() is a method that takes UserDetail as the parameter. This method is the one who calls the UpdateUser() method from the UserManager class.

At btnUpdate_Click event we create an instance of the UserDetail class and assign the values from the form to the corresponsing fields. After that we call the method UpdateUserDetail() and pass the UserDetail object as the parameter.

Here's the output below when running it on the browser:

On initial load:


After selecting an item from the DropDownList



On Edit Mode (after clicking the edit button)



After Update


STEP 4: Deleting data from the Form

Now lets implement the deletion part of the program. In the UserManager class add this method below:

public void DeleteUser(int userID) {
            var user = (from o in dre.SysUsers
                        where o.SysUserID == userID
                        select o).First();

            dre.DeleteObject(user);
            dre.SaveChanges();
        }

Just like the UpdateUser() method. We query the SysUser object based on the SysUserID and then assign the result in the variable user. After that we call the DeleteObject() to perform delete and then call the SaveChanges() method to reflect the changes to the database.

Here's the code in the code behind for the deletion:

protected void btnDelete_Click(object sender, EventArgs e) {
            if (ddlUser.SelectedItem.Value != "0") {

                //Perform the Delete
                UserManager userMgr = new UserManager();
                userMgr.DeleteUser(Convert.ToInt32(ddlUser.SelectedItem.Value));

                //Re-bind the DropDownList
                ddlUser.Items.Clear();
                BindUserNames();

                //Clear the form fields
                tbFirstName.Text = string.Empty;
                tbLastName.Text = string.Empty;
                tbContactNumber.Text = string.Empty;

                lblMessage.Text = "Delete Successful!";

            }
            else {
                lblMessage.Text = "Please select name from the list first.";
                lblMessage.ForeColor = System.Drawing.Color.Red;
            }
        }

Since we don’t want users to delete the information right away, we need to prompt them a confirmation message if they wish to continue the deletion or not. To do this we could simply hook up the javascript confirm function in the delete button. Take a look at the highlighted code below:

<asp:Button ID="btnDelete" runat="server" Text="Delete" onclick="btnDelete_Click" OnClientClick="return confirm('The selected user information will be deleted. Do you wish to continue?');return false;" />

Here's the output below when running the page and perform the delete:

On Deletion:



After Deletion:




That's it! I hope someone find this post useful! 
Thanks shibashish mohanty