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);
}
}
[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);
}
}
}
}
Angular Js 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" />
</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();
}
function fill()
{
$scope.dtColumns = [
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>
IT's very informative blog and useful article thank you for sharing with us , keep posting learn more about aws and Microsoft do net
ReplyDeleteDot NET Online Course Hyderabad