web api code :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using MvcApplication5.Models;
using System.Data.Entity;
namespace MvcApplication5.Controllers
{
public class ValuesController : ApiController
{
[HttpGet]
public List<EMP> Gets()
{
using(Database1Entities obj=new Database1Entities())
{
return obj.EMPs.ToList();
}
}
[HttpGet]
public EMP Get(int id)
{
using(Database1Entities obj=new Database1Entities())
{
return obj.EMPs.SingleOrDefault(m => m.EID == id);
}
}
[HttpPost]
public string Post(EMP emp)
{
using (Database1Entities obj = new Database1Entities())
{
obj.EMPs.Add(emp);
obj.SaveChanges();
return "Data Saved.";
}
}
[HttpPut]
public string Put(EMP emp1)
{
using (Database1Entities obj = new Database1Entities())
{
EMP emp = obj.EMPs.FirstOrDefault(m => m.EID == emp1.EID);
emp.NAME = emp1.NAME;
obj.SaveChanges();
return "Data Updated.";
}
}
[HttpPatch]
public string Delete(EMP emp)
{
using (Database1Entities obj = new Database1Entities())
{
EMP emp1 = obj.EMPs.FirstOrDefault(m => m.EID == emp.EID);
obj.EMPs.Remove(emp1);
obj.SaveChanges();
return "Data deleted.";
}
}
}
}
view code :
@{
ViewBag.Title = "Index";
}
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/Paging.js"></script>
<br /><br /><br />
<div class="container" ng-app="app" ng-controller="ctr">
<form class="form-horizontal" >
<div class="form-group">
<label class="col-lg-4 control-label">EID</label>
<div class="col-lg-4">
<input type="text" id="tb" class="form-control" ng-model="EMP.EID" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 control-label">NAME</label>
<div class="col-lg-4">
<input type="text" class="form-control" ng-model="EMP.NAME" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 control-label"></label>
<div class="col-lg-4">
<input type="button" class="btn btn-primary" value="Save" ng-click="Save()" />
<input type="button" class="btn btn-primary" value="Update" ng-click="Update()" />
<input type="button" class="btn btn-primary" value="Reset" ng-click="Reset()" />
</div>
</div>
<div class="form-group">
<label class="col-lg-1 control-label">SEARCH</label>
<div class="col-lg-2">
<input type="text" class="form-control" ng-model="search" />
</div>
</div>
<div class="row">
<table class="table table-bordered table-condensed table-hover table-responsive table-striped">
<thead class="bg-primary">
<tr>
<th ng-click="order('EID')">EID
<span class="glyphicon sort-icon" ng-show="sortKey=='EID'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th ng-click="order('NAME')">NAME
<span class="glyphicon sort-icon" ng-show="sortKey=='NAME'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th>UPDATE</th>
<th>DELETE</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="c in list|filter:search|orderBy:predicate:reverse|itemsPerPage:2">
<td>{{c.EID}}</td>
<td>{{c.NAME}}</td>
<td><a ng-click="edit(c.EID)">Edit</a></td>
<td><a ng-click="del(c)">Delete</a></td>
</tr>
<tr>
<td colspan="4">
<dir-pagination-controls max-size="2"
direction-links="true"
boundary-links="true">
</dir-pagination-controls>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
<script type="text/javascript">
function emp()
{
return {
EID: null,
NAME:null
}
}
angular.module("app", ['angularUtils.directives.dirPagination']).controller("ctr", function ($scope, $http) {
function fill()
{
var m = $http({
url: 'http://localhost:61521/api/Values',
method: 'Get',
});
m.then(function (d) {
$scope.list = d.data;
});
} fill();
function Clear()
{
$scope.EMP = new emp();
$('#tb').focus();
}
$scope.Save = function ()
{
var m = $http({
url: 'http://localhost:61521/api/Values/Post',
method: 'Post',
data: $scope.EMP,
});
m.then(function (d) {
alert(d.data);
fill();
Clear();
});
}
$scope.Update = function () {
var m = $http({
url: 'http://localhost:61521/api/Values/Put',
method: 'Put',
data: $scope.EMP,
});
m.then(function (d) {
alert(d.data);
fill();
Clear();
});
}
$scope.del = function (n) {
if (confirm('Do you want to delete it ?'))
{
var m = $http({
url: 'http://localhost:61521/api/Values/Delete',
method: 'Patch',
data: n,
});
m.then(function (d) {
alert(d.data);
fill();
});
}
}
$scope.edit = function (n) {
var m = $http({
url: 'http://localhost:61521/api/Values/Get?id='+n,
method: 'Get'
});
m.then(function (d) {
$scope.EMP= d.data;
});
}
$scope.Reset = function () {
Clear();
}
$scope.order = function (p) {
$scope.reverse = ($scope.predicate === p) ? !$scope.reverse : false;
$scope.predicate = p;
}
});
</script>
No comments:
Post a Comment