Sunday 14 January 2018

CURD operation using MVC,jquery,jquery-datatable


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())
            {
                EMP emp = new EMP();
                emp.EID = vm.EID ?? 0;
                emp.NAME = vm.NAME;
                obj.EMPs.Add(emp);
                obj.SaveChanges();
                return RedirectToAction("Index");
            }
               
        }
        [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())
            {
                EMP emp = obj.EMPs.Find(vm.EID);
                emp.NAME = vm.NAME;
                obj.SaveChanges();
                return RedirectToAction("Index");
            }

        }
        [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");
            }

        }


    }
}

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" />
<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>
<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"/><br /><br />
    <div class="ctb">
        <table id="datatable">
            <thead>
                <tr>
                    <th>EID</th>
                    <th>NAME</th>
                    <th>EDIT</th>
                    <th>DELETE</th>
                </tr>
            </thead>
        </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");
                }
            });
         
        });
        function fill()
        {
            $.ajax({
                "url": "/DataTable/Get",
                type: 'Get',
                datatype: 'json',
                cache:false,
                success: function (Data) {
                    $('#datatable').DataTable({
                        data: Data,
                        "pagingType": "full_numbers",
                        "lengthMenu": [2, 10, 20],
                        columns: [
                            { 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>';
                                   
                            }

                        }
                        ]

                    });

                }

            });
         
        } fill();
     
     

    });
    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>

Reset jquery datatable :


var table = $('#datatable').DataTable();

            table
           .clear()
                .draw();

No comments:

Post a Comment