Controller Code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcApplication4.Models;
using System.Data;
namespace MvcApplication4.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
[OutputCache(Duration=0)]
public JsonResult Gets()
{
using (Database1Entities obj = new Database1Entities())
{
return Json(obj.EMPs.ToList(), JsonRequestBehavior.AllowGet);
}
}
public JsonResult Get(int id)
{
using (Database1Entities obj = new Database1Entities())
{
return Json(obj.EMPs.Single(m=>m.EID==id), JsonRequestBehavior.AllowGet);
}
}
public string save(EMP emp)
{
using (Database1Entities obj = new Database1Entities())
{
obj.Entry(emp).State = EntityState.Added;
obj.SaveChanges();
return "Data Saved.";
}
}
public string update(EMP emp)
{
using (Database1Entities obj = new Database1Entities())
{
obj.Entry(emp).State = EntityState.Modified;
obj.SaveChanges();
return "Data Updated.";
}
}
public string delete(int id)
{
using (Database1Entities obj = new Database1Entities())
{
EMP emp = obj.EMPs.Single(m => m.EID == id);
obj.Entry(emp).State = EntityState.Deleted;
obj.SaveChanges();
return "Data Deleted.";
}
}
}
}
View Code:
<html>
<head>
<link href="~/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/css/bootstrap-theme.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<style>
.sp {
padding-top: 3px;
}
</style>
</head>
<body>
<div class="container" ng-app="app" ng-controller="ctr">
<div class="row sp">
<div class="col-lg-3">EID</div>
<div class="col-lg-9"><input type="text" id="tb" ng-model="EID" /></div>
</div>
<div class="row sp">
<div class="col-lg-3">NAME</div>
<div class="col-lg-9"><input type="text" ng-model="NAME" /></div>
</div>
<div class="row sp">
<div class="col-lg-3"></div>
<div class="col-lg-9">
<input type="button" value="Save" class="btn-primary" ng-click="save()" />
<input type="button" value="Update" class="btn-primary" ng-click="update()" />
<input type="button" value="Reset" class="btn-primary" ng-click="reset()" />
</div>
</div>
<div class="table-responsive sp">
<table class="table table-bordered table-hover table-striped">
<thead class="bg-primary">
<tr>
<th>EID</th>
<th>NAME</th>
<th>UPDATE</th>
<th>DELETE</th>
</tr>
</thead>
<tbody ng-repeat="emp in list">
<tr>
<td>{{emp.EID}}</td>
<td>{{emp.NAME}}</td>
<td><a href="#" ng-click="edit(emp)" >Edit</a></td>
<td><a href="#" ng-click="del(emp.EID)">Delete</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
<script type="text/javascript">
angular.module("app", []).controller("ctr", function ($scope, $http) {
function y()
{
var m = $http({
url: 'Home/Gets',
method: 'Get'
});
m.then(function (d) {
$scope.list = d.data;
});
}
y();
$scope.save = function ()
{
var m = $http({
url: 'Home/save',
data:{EID:$scope.EID,NAME:$scope.NAME},
method: 'post'
});
m.then(function (d) {
alert(d.data);
y();
clear();
});
}
$scope.reset = function ()
{
clear();
}
$scope.edit = function (vm)
{
var m = $http({
url: 'Home/Get',
data: { id: vm.EID},
method: 'post'
});
m.then(function (d) {
$scope.EID = d.data.EID;
$scope.NAME = d.data.NAME;
});
}
$scope.update = function ()
{
var m = $http({
url: 'Home/update',
data: { EID: $scope.EID, NAME: $scope.NAME },
method: 'post'
});
m.then(function (d) {
alert(d.data);
y();
clear();
});
}
$scope.del = function (vm) {
if(confirm('Do want to delete it ?'))
{
var m = $http({
url: 'Home/delete',
data: { id: vm },
method: 'post'
});
m.then(function (d) {
alert(d.data);
y();
});
}
}
function clear()
{
$scope.EID="";
$scope.NAME = "";
$('#tb').focus();
}
});
</script>
No comments:
Post a Comment