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