Data table with check box & CURD opration

PressMe

Mvc Code :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Test.Models;

namespace Test.Controllers
{
    public class DatatableController : Controller
    {
        // GET: Datatable
        public ActionResult Index()
        {
            return View();
        }
     
        public JsonResult Get()
        {
            using (Database1Entities obj = new Models.Database1Entities())
            {
                return Json( obj.EMPs.ToArray()   , JsonRequestBehavior.AllowGet);
            }
             
        }
        [HttpGet]
        public PartialViewResult Create()
        {
            return PartialView("Create");
        }
        [HttpPost]
        public ActionResult Create(EMPVM vm)
        {
            using (Database1Entities obj = new Models.Database1Entities())
            {
                if (ModelState.IsValid)
                {
                    EMP emp = new EMP();
                    emp.EID = vm.EID ?? 0;
                    emp.NAME = vm.NAME;
                    obj.EMPs.Add(emp);
                    obj.SaveChanges();
                    return RedirectToAction("Index");
                }
                else
                    return View(vm);
             
            }
               
        }
        [HttpGet]
        public PartialViewResult Edit(int eid)
        {
            using (Database1Entities obj = new Models.Database1Entities())
            {
                EMP emp = obj.EMPs.Find(eid);
                EMPVM vm = new EMPVM();
                vm.EID = emp.EID;
                vm.NAME = emp.NAME;
                return PartialView("Edit", vm);
            }
             
        }

        [HttpPost]
        public ActionResult Edit(EMPVM vm)
        {
            using (Database1Entities obj = new Models.Database1Entities())
            {
                if (ModelState.IsValid)
                {
                    EMP emp = obj.EMPs.Find(vm.EID);
                    emp.NAME = vm.NAME;
                    obj.SaveChanges();
                    return RedirectToAction("Index");

                }
                else
                    return View(vm);

             }

        }
        [HttpGet]
        public ActionResult Delete(int eid)
        {
            using (Database1Entities obj = new Models.Database1Entities())
            {
                EMP emp = obj.EMPs.Find(eid);
                obj.EMPs.Remove(emp);
                obj.SaveChanges();
                return RedirectToAction("Index");
            }

        }
        [HttpPost]
        public JsonResult DeleteAll(List<int> lst)
        {
            using (Database1Entities obj = new Models.Database1Entities())
            {
                obj.EMPs.RemoveRange(obj.EMPs.Where(m=>lst.Contains(m.EID)));
                obj.SaveChanges();
                return Json("Data Deleted", JsonRequestBehavior.AllowGet);
            }
        }


    }
}

Create Partial View Code :

@model Test.Models.EMPVM

@using (Html.BeginForm("Create", "Datatable",FormMethod.Post,new { @id= "myform" }))
{
    @Html.AntiForgeryToken()
 
    <div class="form-horizontal">
     
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.EID, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.EID, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.EID, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.NAME, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.NAME, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.NAME, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" id="btnCreate" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<script type="text/javascript" src="~/Scripts/jquery-1.12.4.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.validate.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.validate.unobtrusive.js"></script>

Index View Code :


@{
    ViewBag.Title = "Index";
    Layout = null;
}

<link rel="stylesheet" href="~/Content/bootstrap.css" />
<link rel="stylesheet" href="~/Content/DataTables/css/jquery.dataTables.css" />
<link rel="stylesheet" href="~/Content/themes/base/jquery-ui.css" />
<link  href="~/Content/dataTables.checkboxes.css" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/jquery-1.12.4.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-ui-1.12.1.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.validate.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script type="text/javascript" src="~/Scripts/DataTables/jquery.dataTables.js"></script>
<script type="text/javascript" src="~/Scripts/dataTables.checkboxes.min.js"></script>
<style>
    .ctb {
        border:solid 1px #000000;
        height:auto;
        width:auto;
        padding:3PX;
       
    }
</style>
<h2></h2>
<div class="container">
 
    <input type="button" value="Add New" id="btn"  class="btn btn-primary" style="width:80px"/>&nbsp;
    <input type="button" value="Delete All" id="btn1" class="btn btn-primary" style="width:80px" /><br /><br />
    <div class="ctb">
        <table id="datatable">
            <thead>
                <tr>
                    <th></th>
                    <th>EID</th>
                    <th>NAME</th>
                    <th>EDIT</th>
                    <th>DELETE</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
 
    <div id="createForm">
    </div>
    <div id="editForm">
   
    </div>
    <div id="delForm" style="display:none">
        <h1>Do you want to delete it ?</h1>
    </div>
</div>

<script type="text/javascript">
    var Editform = $('#editForm');
    Editform.dialog({
        autoOpen: false,
        modal: true,
        width: 550,
        title: "Update",
        show: { effect: 'blind', speed: 1000 },
        hide: { effect: 'blind', speed: 1000 }
    });


    var Createform = $("#createForm");
    Createform.dialog({
        autoOpen: false,
        modal: true,
        width: 550,
        title: "Add New",
        show: { effect: 'blind', speed: 1000 },
        hide: { effect: 'fold', speed: 1000 }
    });
    var Delform = $("#delForm");
 
 
    $(function () {
        Createform.hide();
     
        $('#btn').click(function () {
            $.ajax({
                "url": "/DataTable/Create",
                type: 'Get',
                datatype: 'json',
                cache: false,
                success: function (Data) {
                    Createform.empty();
                    Createform.append(Data);
                    Createform.dialog("open");
                }
            });
         
        });
        var table;
        function fill()
        {
            $.ajax({
                "url": "/DataTable/Get",
                type: 'Get',
                datatype: 'json',
                cache:false,
                success: function (Data) {
              table=$('#datatable').DataTable({
                        data: Data,
                        "pagingType": "full_numbers",
                        "lengthMenu": [2, 10, 20],
                        columns: [
                           {
                               data:"EID",
                               targets: 0,
                               checkboxes: {
                                   selectRow: true
                               }
                           },
                            { data: "EID"},
                            { data: "NAME" },
                            {
                                data:"EID",
                                render: function (eid)
                                {
                                    return '<a onClick="edit(' + eid + ')">Edit</a>';
                                   
                                }
                            },
                        {
                            data:"EID",
                            render: function (eid)
                            {
                                return '<a onClick="del(' + eid + ')">Delete</a>';
                                   
                            }

                        }
                        ],
                        select: {
                            style:'multi'
                        },
                        order:[[1,'asc']]

                    });

                }

            });
         
        } fill();
        $('#btn1').click(function () {
            Delform.dialog({
                autoOpen: false,
                modal: true,
                width: 550,
                title: "Delete",
                show: { effect: 'blind', speed: 1000 },
                hide: { effect: 'blind', speed: 1000 },

                buttons: {
                    Yes: function () {
                        deleteAll();

                    },
                    No: function () {
                        $(this).dialog("close");
                    }

                }

            });

            Delform.dialog("open");

        });
     
       function deleteAll()
        {
            var rows = table.column(0).checkboxes.selected();
            var Lst = new Array();
            $.each(rows, function (i, j) {
                Lst.push(j);
            });
                  $.ajax({
                    url: "/DataTable/DeleteAll",
                    type: "POST",
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    cache: false,
                    data: JSON.stringify({ lst:Lst }),
                    success: function (data)
                    {
                        alert(data);
                        window.location.reload(true);
                    }

                });

           

           
        }
    });
    function edit(s) {
        $.ajax({
            "url": "/DataTable/Edit",
            type: 'Get',
            datatype: 'json',
            cache: false,
            data: { eid: s },
            success: function (Data) {
                Editform.empty();
                Editform.append(Data);
                Editform.dialog("open");
            },
            error: function (t)
            {
                alert(t.responseText);
            }
        });


    }
      function del(s)
    {
          Delform.dialog({
              autoOpen: false,
              modal: true,
              width: 550,
              title: "Delete",
              show: { effect: 'blind', speed: 1000 },
              hide: { effect: 'blind', speed: 1000 },

              buttons: {
                  Yes: function () {
                      $.ajax({
                          "url": "/DataTable/Delete",
                          type: 'Get',
                          datatype: 'json',
                          cache: false,
                          data: { eid: s },
                          success: function (Data) {
                              Delform.dialog("close");
                              window.location.reload(true);
                           
                          },
                          error: function (t) {
                              alert(t.responseText);
                          }
                      });

                   
                   
                  },
                  No: function () {
                      $(this).dialog("close");
                  }

              }

          });

          Delform.dialog("open");

    }
</script>