MVC CODE:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApplication1.Models;
namespace WebApplication1.Controllers
{
public class TestController : Controller
{
// GET: Test
public ActionResult Index()
{
return View();
}
public JsonResult Save(EMP emp)
{
using (Database1Entities obj = new Models.Database1Entities())
{
obj.Entry(emp).State = System.Data.Entity.EntityState.Added;
obj.SaveChanges();
return Json("Data Saved", JsonRequestBehavior.AllowGet);
}
}
public JsonResult Update(EMP emp)
{
using (Database1Entities obj = new Models.Database1Entities())
{
obj.Entry(emp).State = System.Data.Entity.EntityState.Modified;
obj.SaveChanges();
return Json("Data Updated", JsonRequestBehavior.AllowGet);
}
}
public JsonResult Delete(int EID)
{
using (Database1Entities obj = new Models.Database1Entities())
{
EMP emp = obj.EMPs.Find(EID);
obj.Entry(emp).State = System.Data.Entity.EntityState.Deleted;
obj.SaveChanges();
return Json("Data Deleted", JsonRequestBehavior.AllowGet);
}
}
[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);
}
}
[OutputCache(Duration =0)]
public JsonResult Gets()
{
using (Database1Entities obj = new Database1Entities())
{
return Json(obj.EMPs.ToList(), JsonRequestBehavior.AllowGet);
}
}
public JsonResult Get(int EID)
{
using (Database1Entities obj = new Database1Entities())
{
return Json(obj.EMPs.SingleOrDefault(m=>m.EID==EID), JsonRequestBehavior.AllowGet);
}
}
}
}
VIEW CODE :
@{
ViewBag.Title = "Index";
Layout = null;
}
<h2></h2>
<style>
.TBL {
border: solid 1px #000000;
height: auto;
width: auto;
}
</style>
<link type="text/css" rel="stylesheet" href="~/Content/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="~/Content/DataTables/css/jquery.dataTables.css" />
<link type="text/css" rel="stylesheet" href="~/Content/DataTables/css/jquery.dataTables_themeroller.css" />
<script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.dataTables.js"></script>
<script type="text/javascript" src="~/Scripts/angular.js"></script>
<script type="text/javascript" src="~/Scripts/angular-datatables.js"></script>
<div class="container" ng-app="app" ng-controller="Ctrl" style="margin-top:20px">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-lg-4">EID</label>
<div class="col-lg-4">
<input type="text" ng-model="EMP.EID" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">NAME</label>
<div class="col-lg-4">
<input type="text" ng-model="EMP.NAME" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">DID</label>
<div class="col-lg-4">
<input type="text" ng-model="EMP.DID" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4"></label>
<div class="col-lg-4">
<input type="button" class="btn btn-primary" value="Save" ng-click="save()" style="width:80px" />
<input type="button" class="btn btn-primary" value="Update" ng-click="update()" style="width:80px" />
<input type="button" class="btn btn-primary" value="Reset" ng-click="reset()" style="width:80px" />
<input type="button" class="btn btn-primary" value="Delete All" ng-click="delall()" style="width:80px" />
</div>
</div>
</form>
<div class="TBL">
<table id="dt" datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="table table-bordered table-hover table-condensed table-responsive table-striped"></table>
</div>
</div>
<script type="text/javascript">
var app = angular.module('app', ['datatables']);
app.controller('Ctrl',
function ($scope, $http, $compile,$window, DTOptionsBuilder, DTColumnBuilder) {
function CLR()
{
$scope.EMP = {
EID: null,
NAME: null,
DID:null
};
} CLR();
$scope.save = function ()
{
$http.post("/Test/Save", $scope.EMP).then(function (promise) {
alert(promise.data);
$window.location.reload();
});
}
$scope.update = function () {
$http.post("/Test/Update", $scope.EMP).then(function (promise) {
alert(promise.data);
$window.location.reload();
});
}
$scope.edit = function (s) {
$http.get("/Test/Get?EID="+s).then(function (promise) {
$scope.EMP= promise.data;
});
}
$scope.delete = function (s) {
if (confirm('Do you want to delete it ?'))
{
$http.get("/Test/Delete?EID=" + s).then(function (promise) {
alert(promise.data);
$window.location.reload();
});
}
}
$scope.reset = function () {
CLR();
}
$scope.selected = [];
$('.TBL').on("click", '.hcb', function () {
if ($(this).is(":checked")) {
$('#dt_paginate').css("display", "none");
$('#dt').find('.cb').prop("checked", true);
$('#dt').find('tr').find('td:first').next().each(function (i, j) {
$scope.selected.push($(j).html());
});
}
else {
$('#dt_paginate').css("display", "block");
$('#dt').find('.cb').prop("checked", false);
}
});
$('.TBL').on("click", '.cb', function () {
if ($('#dt .cb').length == $('#dt .cb:checked').length)
$('#dt .hcb').prop("checked", true);
else
$('#dt .hcb').prop("checked", false);
$scope.selected.push($(this).parents('tr:first').children('td:first').next().html());
});
$scope.delall = function ()
{
if ($('#dt .cb:checked').length == 0)
{
alert('Please select atleast one item from the gride.');
return;
}
if (confirm('Do you want to delete it ?'))
{
$http.post("/Test/DeleteAll", $scope.selected).then(function (promise) {
alert(promise.data);
$window.location.reload();
});
}
}
function fill()
{
$scope.dtColumns = [
DTColumnBuilder.newColumn("Select")
.withTitle('<input type="checkbox" class="hcb" />')
.notSortable()
.withOption("searchable", false)
.renderWith(function (data, type, full, meta) {
return '<input type="checkbox" class="cb" />';
}).withClass("text-center"),
DTColumnBuilder.newColumn('EID').withTitle('Eid'),
DTColumnBuilder.newColumn("NAME", "NAME"),
DTColumnBuilder.newColumn("DID", "DID").notVisible(),
DTColumnBuilder.newColumn(null).withTitle('ACTION').notSortable()
.renderWith(function (data, type, full, meta) {
return '<button class="glyphicon glyphicon-edit" ng-click="edit(' + data.EID + ')">' +
'</button> ' +
'<button class="glyphicon glyphicon-remove" ng-click="delete(' + data.EID + ')">' +
'</button>';
})
]
$scope.dtOptions = DTOptionsBuilder.newOptions()
.withOption('responsive', true)
.withOption("bProcessing", true)
.withOption('bFilter', true)
.withOption('ajax', {
url: "/Test/Gets",
type: "Get",
catch:false
})
.withOption('aLengthMenu', [2, 10, 20, 30, 50])
.withPaginationType('full_numbers')
.withDisplayLength(2)
.withOption('createdRow', function (row, data, dataIndex) {
$compile(angular.element(row).contents())($scope);
});
} fill();
});
</script>
No comments:
Post a Comment