DOTNET POINT: January 2016

View

@{

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>

<style>

.sort-icon {

font-size: 9px;

margin-left: 5px;

}

　

th {

cursor: pointer;

}

</style>

　

<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-sm-4 col-md-4 col-xs-4">EID</label>

<div class="col-lg-4 col-sm-4 col-md-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-sm-4 col-md-4 col-xs-4">NAME</label>

<div class="col-lg-4 col-sm-4 col-md-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-sm-4 col-md-4 col-xs-4">ADDRESS</label>

<div class="col-lg-4 col-sm-4 col-md-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-sm-4 col-md-4 col-xs-4">PASSWORD</label>

<div class="col-lg-4 col-sm-4 col-md-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-sm-4 col-md-4 col-xs-4">GENDER</label>

<div class="col-lg-4 col-sm-4 col-md-4 col-xs-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="control-label col-lg-4 col-sm-4 col-md-4 col-xs-4">DEPARTMENT</label>

<div class="col-lg-4 col-sm-4 col-md-4 col-xs-4">

<select class="form-control" ng-model="EMP.DNAME" ng-options="c for c in listd" ></select>

</div>

</div>

<div class="form-group">

<label class="control-label col-lg-4 col-sm-4 col-md-4 col-xs-4"></label>

<div class="col-lg-4 col-sm-4 col-md-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-sm-4 col-md-4 col-xs-4"></label>

<div class="col-lg-4 col-sm-4 col-md-4 col-xs-4">

<input type="button" value="Save" class="btn btn-primary" style="width:80px" ng-click="save()" />

<input type="button" value="Update" class="btn btn-primary" style="width:80px" ng-click="update()" />

<input type="button" value="Reset" class="btn btn-primary" style="width:80px" ng-click="reset()" />

</div>

</div>

<div class="form-group">

<label class="control-label col-lg-1 col-sm-1 col-md-1 col-xs-1">SEARCH</label>

<div class="col-lg-2 col-sm-2 col-md-2 col-xs-2">

<input type="text" class="form-control" ng-model="search" />

</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">

function emp()

{

return {

EID: null,

NAME: null,

ADDRESS: null,

PASSWORD: null,

GENDER: null,

DNAME: "X",

ISMARRIED:false

}

}

angular.module("app", ['angularUtils.directives.dirPagination']).controller("ctr", function ($scope, $http) {

function clear()

{

$scope.EMP = new emp();

$('#tb').focus();

} clear();

var m;

function fill()

{

m = $http({

url: '/Home/Gets',

method:'Get'

});

m.then(function (d) {

$scope.list = d.data;

});

} fill();

m = $http({

url: '/Home/Getd',

method: 'Get'

});

m.then(function (d) {

$scope.listd = d.data;

});

$scope.save = function ()

{

m = $http({

url: '/Home/Save',

method: 'Post',

data:$scope.EMP

});

m.then(function (d) {

alert(d.data);

clear();

fill();

});

}

$scope.update = function () {

m = $http({

url: '/Home/Update',

method: 'Post',

data: $scope.EMP

});

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',

method: 'Post',

data: n

});

m.then(function (d) {

alert(d.data);

fill();

});

}

}

$scope.edit = function (n) {

m = $http({

url: '/Home/Get',

method: 'Post',

data: {Id:n}

});

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>

Controller

using System;

using System.Collections.Generic;

using System.Data.Entity;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using WebApplication4.Models;

namespace WebApplication4.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.SingleOrDefault(m=>m.EID==Id), JsonRequestBehavior.AllowGet);

}

}

public JsonResult Getd()

{

using (Database1Entities obj = new Database1Entities())

{

return Json(obj.DEPTs.Select(m=>m.DNAME).ToList(), 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())

{

EMP emp1 = obj.EMPs.SingleOrDefault(m => m.EID == emp.EID);

emp1.NAME = emp.NAME;

emp1.ADDRESS = emp.ADDRESS;

emp1.GENDER = emp.GENDER;

emp1.DNAME = emp.DNAME;

emp1.ISMARRIED = emp.ISMARRIED;

obj.Entry(emp1).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.";

}

}

}

}

DOTNET POINT

Wednesday 20 January 2016

CURD opration and Search,Sort and Pagination using anguraljs,MVC & MVVM with all control