View Code :
@{
ViewBag.Title = "Index";
}
<link href="~/Content/bootstrap.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="control-label col-lg-4 col-md-4 col-sm-4 col-xs-4">EID</label>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<input type="text" class="form-control" ng-model="EMP.EID" id="tb" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4 col-md-4 col-sm-4 col-xs-4">NAME</label>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<input type="text" class="form-control" ng-model="EMP.NAME" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4 col-md-4 col-sm-4 col-xs-4">ADDRESS</label>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<textarea class="form-control" ng-model="EMP.ADDRESS"></textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4 col-md-4 col-sm-4 col-xs-4">PASSWORD</label>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<input type="password" class="form-control" ng-model="EMP.PASSWORD" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4 col-md-4 col-sm-4 col-xs-4">GENDER</label>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<input type="radio" ng-model="EMP.GENDER" value="Male" />Male
<input type="radio" ng-model="EMP.GENDER" value="Female" />Female
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4 col-md-4 col-sm-4 col-xs-4"></label>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<input type="checkbox" ng-model="EMP.ISMARRIED" />ISMARRIED
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4 col-md-4 col-sm-4 col-xs-4">COUNTRY</label>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<select ng-model="EMP.CNAME" id="ddl" ng-options="c for c in listc" ng-change="fillddl()" class="form-control"></select>
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4 col-md-4 col-sm-4 col-xs-4">STATE</label>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<select ng-model="EMP.SNAME" ng-options="c for c in lists" class="form-control"></select>
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4 col-md-4 col-sm-4 col-xs-4"></label>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-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>
<div class="form-group">
<label class="control-label col-lg-1 col-md-1 col-sm-1 col-xs-1">SEARCH</label>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<input type="text" ng-model="search" class="form-control" />
</div>
</div>
<div class="row">
<table class="table table-bordered 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">
angular.module("app", ['angularUtils.directives.dirPagination']).controller("ctr", function ($scope, $http) {
var m;
function clear() {
$scope.EMP = new emp();
$('#tb').focus();
} clear();
function fill() {
m = $http({
url: '/Home/Gets',
method: 'Get'
});
m.then(function (d) {
$scope.list = d.data;
});
} fill()
$scope.Reset = function ()
{
clear();
}
m = $http({
url: '/Home/Getc',
method: 'Get'
});
m.then(function (d) {
$scope.listc = d.data;
});
$scope.fillddl = function () {
fd($('#ddl :selected').text());
}
function fd(e) {
m = $http({
url: '/Home/Getst',
data: { s: e },
method: 'Post'
});
m.then(function (d) {
$scope.lists = d.data;
});
}
$scope.Save = function () {
m = $http({
url: '/Home/Post',
data: $scope.EMP,
method: 'Post'
});
m.then(function (d) {
alert(d.data);
clear();
fill();
});
}
$scope.Update = function () {
m = $http({
url: '/Home/Put',
data: $scope.EMP,
method: 'Post'
});
m.then(function (d) {
alert(d.data);
clear();
fill();
});
}
$scope.del = function (n) {
if (confirm('Do you want to delete it ?')) {
m = $http({
url: '/Home/Delete',
data: n,
method: 'Post'
});
m.then(function (d) {
alert(d.data);
fill();
}
)
}
}
$scope.order = function (p) {
$scope.reverse = ($scope.predicate === p) ? !$scope.reverse : false;
$scope.predicate = p;
}
$scope.edit = function (n) {
m = $http({
url: '/Home/Get',
data: { Id: n },
method: 'Post'
});
m.then(function (d) {
fd(d.data.CNAME);
$scope.EMP = d.data;
}
)
}
});
function emp() {
return {
EID: null,
NAME: null,
ADDRESS: null,
PASSWORD: null,
GENDER: null,
ISMARRIED: true,
CNAME: "X",
SNAME: null,
}
}
</script>
Controller Code :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcApplication3.Models;
using System.Data.Entity;
namespace MvcApplication3.Controllers
{
public class HomeController : Controller
{
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.SingleOrDefault(m=>m.EID==Id), JsonRequestBehavior.AllowGet);
}
}
public JsonResult Getc()
{
using (Database1Entities obj = new Database1Entities())
{
return Json(obj.COUNTRies.ToList().Select(m=>m.CNAME), JsonRequestBehavior.AllowGet);
}
}
public JsonResult Getst(string s)
{
using (Database1Entities obj = new Database1Entities())
{
int i = obj.COUNTRies.SingleOrDefault(m => m.CNAME == s).CID;
return Json(obj.STATEs.ToList().Where(m=>m.CID==i).Select(m=>m.SNAME), JsonRequestBehavior.AllowGet);
}
}
public string Post(EMP emp)
{
using (Database1Entities obj = new Database1Entities())
{
obj.Entry(emp).State = EntityState.Added;
obj.SaveChanges();
return "Data Saved";
}
}
public string Put(EMP emp)
{
using(Database1Entities obj=new Database1Entities())
{
obj.Entry(emp).State = EntityState.Modified;
obj.SaveChanges();
return "Data Updated";
}
}
public string Delete(EMP emp)
{
using (Database1Entities obj = new Database1Entities())
{
obj.Entry(emp).State = EntityState.Deleted;
obj.SaveChanges();
return "Data Deleted";
}
}
public JsonResult Getci(string s)
{
using (Database1Entities obj = new Database1Entities())
{
return Json(obj.COUNTRies.SingleOrDefault(m => m.CNAME == s).CID, JsonRequestBehavior.AllowGet);
}
}
public JsonResult Getsi(string s)
{
using (Database1Entities obj = new Database1Entities())
{
return Json(obj.STATEs.SingleOrDefault(m => m.SNAME == s).SID, JsonRequestBehavior.AllowGet);
}
}
}
}
