web api code :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using WebApplication36.Models;
namespace WebApplication36.Controllers
{
public class ValuesController : ApiController
{
[HttpGet]
public List<COUNTRY> Getc()
{
using (Database1Entities obj = new Database1Entities())
{
return obj.COUNTRies.ToList();
}
}
[HttpGet]
public List<STATE> Gets(int CID)
{
using (Database1Entities obj = new Database1Entities())
{
return obj.STATEs.Where(m=>m.CID==CID).ToList();
}
}
[HttpGet]
public List<EMP> Gete(int i,int j)
{
using (Database1Entities obj = new Database1Entities())
{
return obj.EMPs.ToList();
}
}
[HttpGet]
public EMP Get(int EID,int i, int j)
{
using (Database1Entities obj = new Database1Entities())
{
return obj.EMPs.SingleOrDefault(m=>m.EID==EID);
}
}
[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 emp)
{
using (Database1Entities obj = new Database1Entities())
{
EMP emp1 = obj.EMPs.SingleOrDefault(m => m.EID == emp.EID);
emp1.NAME = emp.NAME;
emp1.ADDRESS = emp.ADDRESS;
emp1.PASSWORD = emp.PASSWORD;
emp1.DOB = emp.DOB;
emp1.GENDER = emp.GENDER;
emp1.ISMARRIED = emp.ISMARRIED;
emp1.CID = emp.CID;
emp1.SID = emp.SID;
obj.SaveChanges();
return "Data Updated.";
}
}
[HttpGet]
public string Delete(int EID)
{
using (Database1Entities obj = new Database1Entities())
{
EMP emp1 = obj.EMPs.SingleOrDefault(m => m.EID == EID);
obj.EMPs.Remove(emp1);
obj.SaveChanges();
return "Data Deleted.";
}
}
[HttpDelete]
public string Mdelete([FromUri]List<int> lst)
{
using (Database1Entities obj = new Database1Entities())
{
obj.EMPs.RemoveRange(obj.EMPs.Where(m=>lst.Contains(m.EID)));
obj.SaveChanges();
return "Data Deleted.";
}
}
}
}
View Code :
@{
ViewBag.Title = "Index";
}
<h2>Jay Jagannath</h2>
<style type="text/css">
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 900px;
height: 300px;
}
</style>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/ng-grid.css" rel="stylesheet" />
<link href="~/Content/bootstrap-datepicker.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/ng-grid.js"></script>
<script src="~/Scripts/bootstrap-datepicker.js"></script>
<script src="~/Scripts/Service.js"></script>
<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" class="form-control" ng-model="EMP.EID" id="tb"/>
</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">ADDRESS</label>
<div class="col-lg-4">
<textarea class="form-control" ng-model="EMP.ADDRESS" ></textarea>
</div>
</div>
<div class="form-group">
<label class="col-lg-4 control-label">PASSWORD</label>
<div class="col-lg-4">
<input type="password" class="form-control" ng-model="EMP.PASSWORD" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 control-label">DOB</label>
<div class="col-lg-4">
<input type="text" class="form-control" ng-model="EMP.DOB" id="dob" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 control-label">GENDER</label>
<div class="col-lg-4">
<input type="radio" value="Male" ng-model="EMP.GENDER" />Male
<input type="radio" value="Female" ng-model="EMP.GENDER" />Female
</div>
</div>
<div class="form-group">
<label class="col-lg-4 control-label">ARE YOU MARRIED?</label>
<div class="col-lg-4">
<input type="checkbox" ng-model="EMP.ISMARRIED" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4 control-label">COUNTRY</label>
<div class="col-lg-4">
<select class="form-control" ng-model="EMP.CID" ng-options="c.CID as c.CNAME for c in listc" ng-change="fillddl()" >
<option value="">Select</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-lg-4 control-label">STATE</label>
<div class="col-lg-4">
<select class="form-control" ng-model="EMP.SID" ng-options="c.SID as c.SNAME for c in lists">
<option value="">{{text}}</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-lg-4 control-label"></label>
<div class="col-lg-4">
<input type="button" value="Delete All" style="width:80px" class="btn btn-primary" ng-click="da()" />
<input type="button" value="Save" style="width:80px" class="btn btn-primary" ng-click="save()" />
<input type="button" value="Update" style="width:80px" class="btn btn-primary" ng-click="updates()" />
<input type="button" value="Reset" style="width:80px" class="btn btn-primary" ng-click="reset()" />
</div>
</div>
<div class="gridStyle" ng-grid="gridOptions">
</div>
</form>
</div>
Angular code :(//Service.js file code)
/// <reference path="jquery-1.9.1.js" />
/// <reference path="angular.js" />
/// <reference path="ng-grid.js" />
/// <reference path="bootstrap-datepicker.js" />
var k;
$(function () {
$('#dob').datepicker({ format: 'yyyy-mm-dd' }).on("change", function () {
k = $(this).val();
});
});
angular.module("app", ['ngGrid'])
.controller("ctr", function ($scope, EmpService) {
var p = '';
$scope.listc = null;
$scope.lists = null;
$scope.n = [];
$scope.save = function ()
{
$scope.EMP.DOB = k;
EmpService.Save($scope.EMP).then(function (d) {
alert(d.data);
clr();
fill();
});
}
$scope.updates = function ()
{
if (k != undefined)
$scope.EMP.DOB = k;
EmpService.Update($scope.EMP).then(function (d) {
alert(d.data);
clr();
fill();
});
}
$scope.Del = function (s) {
if (confirm('Do you want to delete it ?')) {
EmpService.Delete(s.EID).then(function (d) {
alert(d.data);
fill();
});
}
}
$scope.da = function ()
{
if (confirm('Do you want to delete it ?'))
{
angular.forEach($scope.n, function (i, j) {
p = p + 'lst=' + i.EID + '&';
});
p = p.substring(0, p.lastIndexOf('&'));
EmpService.Mdelete(p).then(function (d) {
alert(d.data);
fill();
});
}
}
$scope.reset = function ()
{
clr();
$scope.lists = null;
$scope.text = null;
}
function clr()
{
$scope.EMP = new empVM();
$('#tb').focus();
} clr();
EmpService.GetCountries().then(function (d) {
$scope.listc = d.data;
});
$scope.fillddl = function () {
fd($scope.EMP.CID);
}
function fd(s)
{
EmpService.GetStates(s).then(function (d) {
$scope.text = "Select";
$scope.lists = d.data;
});
}
function fill() {
$scope.filterOptions = {
filterText: "",
useExternalFilter: false
};
$scope.totalServerItems = 0;
$scope.pagingOptions = {
pageSizes: ['5', '10', '20'],
pageSize: '5',
currentPage: 1
};
$scope.setPagingData = function (data, page, pageSize) {
var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
$scope.DataSource = pagedData;
$scope.totalServerItems = data.length;
if (!$scope.$$phase) {
$scope.$apply();
}
};
$scope.getPagedDataAsync = function (pageSize, page, searchText) {
setTimeout(function () {
var data;
if (searchText) {
var ft = searchText.toLowerCase();
EmpService.GetEmps().then(function (d) {
data = d.data.filter(function (item) {
return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
});
$scope.setPagingData(data, page, pageSize);
});
} else {
EmpService.GetEmps().then(function (d) {
$scope.setPagingData(d.data, page, pageSize);
});
}
}, 100);
};
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);
$scope.$watch('pagingOptions', function (newVal, oldVal) {
if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
}
}, true);
$scope.$watch('filterOptions', function (newVal, oldVal) {
if (newVal !== oldVal) {
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
}
}, true);
$scope.gridOptions = {
data: 'DataSource',
multiSelect: true,
showSelectionCheckbox: true,
enableCellEdit: false,
enableRowSelection: true,
enableColumnResize: false,
enableCellSelection: true,
enablePaging: true,
showFooter: true,
selectedItems: $scope.n,
totalServerItems: 'totalServerItems',
pagingOptions: $scope.pagingOptions,
filterOptions: $scope.filterOptions,
showFilter: true,
columnDefs:
[
{ field: 'EID', displayName: 'Eid', width: '250px', resizable: true },
{ field: 'NAME', displayName: 'Name', width: '250px' },
{ field: "DOB", displayName: "DOB", width: "200px", cellTemplate: "<span>{{row.entity.DOB | date:'dd-MMM-yyyy'}}</span>" },
{
displayName: 'Actions', cellTemplate:
'<div class="grid-action-cell">' +
'<a ng-click="Edit(row.entity);" >Edit</a>' + ' | ' +
'<a ng-click="Del(row.entity);" >Delete</a>' +
'</div>'
}
],
};
} fill();
$scope.Edit = function (s)
{
EmpService.GetEmp(s.EID).then(function (d) {
fd(d.data.CID);
$scope.EMP = d.data;
$scope.EMP.DOB = $scope.EMP.DOB.substring(0, 10);
});
}
})
.factory("EmpService", function ($http) {
var fac = {};
fac.GetCountries = function () {
return $http.get("http://localhost:50611/api/Values");
}
fac.GetStates = function (CID)
{
return $http.get("http://localhost:50611/api/Values/Gets?CID="+CID);
}
fac.GetEmps = function ()
{
return $http.get("http://localhost:50611/api/Values/Gete?i=" +1+"&j="+2);
}
fac.GetEmp = function (EID) {
return $http.get("http://localhost:50611/api/Values/Get?EID="+EID+"&i=" + 1 + "&j=" + 2);
}
fac.Save = function (EMP)
{
return $http.post("http://localhost:50611/api/Values/Post", EMP);
}
fac.Update = function (EMP) {
return $http.put("http://localhost:50611/api/Values/Put", EMP);
}
fac.Delete = function (EID) {
return $http.get("http://localhost:50611/api/Values/Delete?EID=" +EID);
}
fac.Mdelete = function (lst) {
return $http.delete("http://localhost:50611/api/Values/Mdelete?" + lst);
}
return fac;
});
function empVM() {
return {
EID:null,
NAME: null,
ADDRESS: null,
PASSWORD: null,
DOB: null,
GENDER: null,
ISMARRIED: true,
CID: null,
SID: null
}
}
