delete operation in ajax datatable in asp.net mvc

 

 Overview:

    In this article, we are going to explain, how to Delete operations in employee information list ajax data table form design in asp.net MVC using bootstrap(Video Session-10). now we are going to create step by step in this article.  👇💗💙💚💛

delete operation in ajax data table in MVC

Step 1:  Create a Delete Store procedure

Table:

CREATE TABLE [dbo].[tblEmployee](

[ID] [int] IDENTITY(1,1) NOT NULL,

[Employee] [nvarchar](50) NULL,

[Designation] [nvarchar](50) NULL,

[Salary] [nvarchar](50) NULL,

[Address] [nvarchar](50) NULL,

 CONSTRAINT [PK_tblEmployee] PRIMARY KEY CLUSTERED 

(

[ID] ASC

)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON, OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF) ON [PRIMARY]

) ON [PRIMARY]

GO

 Store procedure:

create PROCEDURE [dbo].[prDeleteEmployee]

@Id int

AS

BEGIN

SET NOCOUNT ON;

delete from tblEmployee where ID=@Id

END

Step 2:  Add ActionMethod in Controller

 public ActionResult DeleteEmp(int empId)

        {

            try

            {

                using (SqlConnection con = new SqlConnection(constring))

                {

                    SqlCommand cmd = new SqlCommand();

                    cmd.CommandText = "[prDeleteEmployee]";

                    cmd.CommandType = CommandType.StoredProcedure;

                    cmd.Parameters.AddWithValue("@Id", empId);

                    cmd.Connection = con;

                    con.Open();

                    int affect = cmd.ExecuteNonQuery();

                   

                    con.Close();

                }

            }

            catch(Exception ex)

            {

                throw new Exception(ex.Message);

            }

            return Json(new { Status = "Success" });

        }

Step 3:  Add a modal popup on the employee view page

 <input type="hidden" id="hfid" />

    <div class="modal fade" id="myModal">

        <div class="modal-dialog">

            <div class="modal-content">

                <div class="modal-header">

                    <a href="#" class="close" data-dismiss="modal">&times;</a>

                    <h3 class="modal-title">Delete row <i class="glyphicon glyphicon-trash btn btn-danger"></i></h3>

                </div>

                <div class="modal-body">

                    <h4>Are you sure you want to Delete this row ?</h4>

                    ID:<b><input t ype="text" style="border:none;text-align:left;background-color:#fff;" disabled="disabled" id="txtid" /></b>

                </div>

                <div class="modal-footer">

                    <a href="#" class="btn btn-warning" data-dismiss="modal">Cancel</a>

                    <a href="#" class="btn btn-primary" onclick="DeleteRows()">Confirm</a>

                </div>

            </div>

        </div>

    </div>

Step 4:  Add delete operation javascript in an employee view page

 <script type="text/javascript">
        var ConfirmDelete = function (Id) {
            $("#hfid").val(Id);
            $("#txtid").val(Id);
            $("#myModal").modal('show');
        }
        var DeleteRows = function () {
            var rowsid = $("#hfid").val();
            $.ajax({
                type: "POST",
                url: "Home/DeleteEmp",
                data: { empId: rowsid },
                success: function (result) {
                    $("#myModal").modal("hide");
                    alert("Employee data deleted successfully.!");
                    $("#dataTables").DataTable().ajax.reload();
                }
            })
        }

    </script>

Step 5: Full View page of employee information

@model InsertUpdateMVC.Models.InsertUpdateModel

@{

    ViewBag.Title = "Employee";

}

<h2>Employee Information (Insert, Edit, Update, Delete and List)</h2>

@Scripts.Render("~/bundles/jquery")

@Scripts.Render("~/bundles/jqueryval")

@Styles.Render("~/Content/css")

<link href="~/Content/bootstrap.datatables.css" rel="stylesheet" />

<link href="~/Content/dataTables.bootstrap.css" rel="stylesheet" />

<style>

    .error {

        color: white;

        background-color: #f12e2e;

        font-weight: bold;

        font-size: 12px;

        font-family: 'Times New Roman';

        position: static;

        display: inline-block;

        z-index: 5;

    }

    .table-responsive {

        overflow-x: hidden;

    }

</style>

@using (Html.BeginForm("Employee", "Home", FormMethod.Post))

{

    @Html.HiddenFor(Model => Model.ID)

    <div class="container">

        @if (Model != null && Model.ID > 0)

        {

            <div class="row">

                <div class="col-lg-3">@Html.Label("Employee ID")</div>

                <div class="col-lg-3">@Html.TextBoxFor(Model => Model.ID, new { @class = "form-control", @disabled = true })</div>

            </div>

            <br />

        }

        <div class="row">

            <div class="col-lg-3">@Html.LabelFor(Model => Model.Employee)</div>

            <div class="col-lg-3">@Html.TextBoxFor(Model => Model.Employee, new { @class = "form-control" })</div>

            <div class="col-lg-1">

                @Html.ValidationMessageFor(Model => Model.Employee, "", new { @class = "error" })

            </div>

        </div>

        <br />

        <div class="row">

            <div class="col-lg-3">@Html.LabelFor(Model => Model.Designation)</div>

            <div class="col-lg-3">@Html.TextBoxFor(Model => Model.Designation, new { @class = "form-control" })</div>

            <div class="col-lg-1">

                @Html.ValidationMessageFor(Model => Model.Designation, "", new { @class = "error" })

            </div>

        </div>

        <br />

        <div class="row">

            <div class="col-lg-3">@Html.LabelFor(Model => Model.Salary)</div>

            <div class="col-lg-3">@Html.TextBoxFor(Model => Model.Salary, new { @class = "form-control" })</div>

            <div class="col-lg-1">

                @Html.ValidationMessageFor(Model => Model.Salary, "", new { @class = "error" })

            </div>

        </div>

        <br />

        <div class="row">

            <div class="col-lg-3">@Html.LabelFor(Model => Model.Address)</div>

            <div class="col-lg-3">@Html.TextBoxFor(Model => Model.Address, new { @class = "form-control" })</div>

            <div class="col-lg-1">

                @Html.ValidationMessageFor(Model => Model.Address, "", new { @class = "error" })

            </div>

        </div>

        <br />

        <div class="col-lg-offset-4">

            <button type="submit" class="btn btn-primary" value="Save">Save</button>

        </div>

    </div>

    <br />

}

<div class="row">

    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">

        <div class="panel panel-primary">

            <div class="panel-body">

                <div class="table-responsive">

                    <table class="table table-responsive table-bordered table-hover" id="dataTables">

                        <thead>

                            <tr>

                                <th>Action</th>

                                <th style="visibility:hidden">ID</th>

                                <th>S.No</th>

                                <th>Employee</th>

                                <th>Designation</th>

                                <th>Salary</th>

                                <th>Address</th>

                            </tr>

                        </thead>

                    </table>

                </div>

            </div>

        </div>

    </div>

</div>

@if (ViewBag.Message != null)

{

    <script type="text/javascript">

                  {

                        alert('@ViewBag.Message')

                    }

    </script>

}

@section scripts

{

    <script src="~/Scripts/jquery-3.4.1.js"></script>

    <script src="~/Scripts/jquery-3.4.1.min.js"></script>

    <script src="~/Scripts/bootstrap.js"></script>

    <script src="~/Scripts/jquery.dataTables.js"></script>

    <script src="~/Scripts/jquery.dataTables.min.js"></script>

    <script src="~/Scripts/dataTables.bootstrap.js"></script>

    <script src="~/Scripts/dataTables.bootstrap.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $("#dataTables").DataTable({

                "columnDefs": [

                    {

                        "targets": [1],

                        "visible": false

                    }

                ],

                "scrollX": false,

                "iDisplayLength": 4,

                "aLengthMenu": [4, 10, 25, 50, 100],

                "bprocessing": true,

                "bLengthchange": true,

                "language": {

                    Searchplaceholder: "Search Anything here"

                },

                "ajax": {

                    "url": "/Home/Jsonemployeelist",

                    "type": "Get",

                    "dataType": "json",

                },

                "columns": [

                    {

                        "data": "ID", "render": function (data) {

                            return '<a href="@Url.Action("Employee", "Home")?empid=' + data + '"><i class="btn btn-success glyphicon glyphicon-edit" title="Edit"></i></a> | <a href="#" title="Delete" onclick=ConfirmDelete('+data+')> <i class="btn btn-danger glyphicon glyphicon-trash" title="Delete this row"></i></a>'

                        },

                        orderable: false

                    },

                    { "data": "ID" },

                    { "data": "Sno" },

                    { "data": "Employee" },

                    { "data": "Designation" },

                    { "data": "Salary" },

                    { "data": "Address" },

                ]

            });

        });

    </script>

    <input type="hidden" id="hfid" />

    <div class="modal fade" id="myModal">

        <div class="modal-dialog">

            <div class="modal-content">

                <div class="modal-header">

                    <a href="#" class="close" data-dismiss="modal">&times;</a>

                    <h3 class="modal-title">Delete row <i class="glyphicon glyphicon-trash btn btn-danger"></i></h3>

                </div>

                <div class="modal-body">

                    <h4>Are you sure you want to Delete this row ?</h4>

                    ID:<b><input t ype="text" style="border:none;text-align:left;background-color:#fff;" disabled="disabled" id="txtid" /></b>

                </div>

                <div class="modal-footer">

                    <a href="#" class="btn btn-warning" data-dismiss="modal">Cancel</a>

                    <a href="#" class="btn btn-primary" onclick="DeleteRows()">Confirm</a>

                </div>

            </div>

        </div>

    </div>

    <script type="text/javascript">

        var ConfirmDelete = function (Id) {

            $("#hfid").val(Id);

            $("#txtid").val(Id);

            $("#myModal").modal('show');

        }

        var DeleteRows = function () {

            var rowsid = $("#hfid").val();

            $.ajax({

                type: "POST",

                url: "Home/DeleteEmp",

                data: { empId: rowsid },

                success: function (result) {

                    $("#myModal").modal("hide");

                    alert("Employee data deleted successfully.!");

                    $("#dataTables").DataTable().ajax.reload();

                }

            })

        }

    </script>

}

Step 6:  Run the Application Get Output Result 👏💖💙💚💛💜

 

delete operation in employee information in MVC

More Details:       👇

Full Video Link:  https://www.youtube.com/watch?v=up5Lm1OlgIA