Starting with Asp.Net Core using Visual Studio to Delete Employee

In this post I will show you how to Delete Employee using Asp.Net Core 1.1, EntityFrameworkCore with Confirmation message. Previously I had shown how to...

• 01 - Starting with Asp.Net Core using Visual Studio
• 02 - Starting with Asp.Net Core using Visual Studio to Display Employee List
• 03 - Starting with Asp.Net Core using Visual Studio to Insert New Employee
• 04 - Starting with Asp.Net Core using Visual Studio to Edit Employee

Continuing the previous post  04 - Starting with Asp.Net Core using Visual Studio to Edit Employee
In Index.cshtml page replace @Html.ActionLink("Edit", "Edit", new { id = item.Id }) with

  

@Html.ActionLink("Edit", "Edit", new { id = item.Id })
| <button type="button" id="@item.Id" class="btn-link Delete">Delete</button>

Now at the bottom ADD Modal popup as shown

  

<div class="modal fade" id="MyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="myModalLabel">Employee Details</h4>
            </div>

            <div class="modal-body">
                <input type="hidden" id="hfEmpID" value="" />
                <div id="DivBody"></div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-danger" id="btnDelete">Delete</button>
            </div>
        </div>
    </div>
</div>

Now ADD Script for Confirmation Message with Employee Details & Delete method using Ajax Method.

  

@section Scripts{
    <script>
        $('.Delete').click(function (e) { 
            var DelId = $(this).attr("id");
            var getData = "Home/Edit"; // This is used to Get Employee Details

            $.ajax({
                url: getData,
                type: "GET",
                data: { ID: DelId },
                dataType: "json",
                success: function (result) { 
                    var table = $('<table>').width("100%"); // To display return data in Tabular Format.

                    var d = new Date(result.doj);
                    var dFormat = d.getDate() + "-" + (d.getMonth() + 1) + "-" + d.getFullYear();

                    table.append("<tr><td><b>Name</b></td><td>: " + result.firstName + " " + result.lastName + "</td></tr>");
                    table.append("<tr><td><b>Gender</b></td><td>: " + result.gender + "</td></tr>");
                    table.append("<tr><td><b>Salary</b></td><td>: " + result.salary + "</td></tr>");
                    table.append("<tr><td><b>Date of Join</b></td><td>: " + dFormat + "</td></tr>");;
                    table.append("<tr><td><b>Dept ID</b></td><td>: " + result.deptId + "</td></tr>");

                    $('#DivBody').html(table);
                    $('#hfEmpID').val(DelId);
                },
                error: function (result) {
                    $('#DivBody').html(result.statusText);
                }
            });

            // Show PopUp
            $('#MyModal').modal({
                backdrop: 'static',
                keyboard: false
            });
        });

        $('#btnDelete').click(function (e) {

            var DelId = $('#hfEmpID').val();
            var getData = "Home/DeleteConfirmed/";

            $.ajax({
                url: getData,
                type: "POST",
                data: { ID: DelId },
                dataType: "json",
                success: function (result) {
                    alert(result);
                    window.location.reload();
                },
                error: function (result) {
                    alert(result.statusText);
                }
            });

            $('#MyModal').modal('hide');
        });
    </script>
}

Go to Home Controller page and in the Edit method replace return View("ADD", emp); with

  

bool isAjaxCall = Request.Headers["x-requested-with"] == "XMLHttpRequest";
if (isAjaxCall)
 return Json(emp);
else
 return View("ADD", emp);

Now ADD DeleteConfirmed Method as shown

  

[HttpPost]
public IActionResult DeleteConfirmed(int ID)
{
 try
 {
  using (EmployeeDBContext ent = new EmployeeDBContext())
  {
   Employees emp = ent.Employees.FirstOrDefault(x => x.Id == ID);
   if (emp != null)
   {
    ent.Employees.Remove(emp);
    ent.SaveChanges();
    return Json("Deleted");
   }
   else
    return NotFound();
  }
 }
 catch (Exception ex)
 {
  string msg = ex.Message;
  return NotFound();
 }
}

Run the application by pressing F5