Friday, 16 September 2016

example of all the filters in angular js & CURD opration

Service Code :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using MvcApplication4.Models;

namespace MvcApplication4.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(string s)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                return obj.EMPs.ToList();
            }
        }
        [HttpGet]
        public EMP Get(int EID,int i)
        {
            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.GENDER = emp.GENDER;
                emp1.ISMARRIED = emp.ISMARRIED;
                emp1.CID = emp.CID;
                emp1.SID = emp.SID;
                emp1.DOB = emp.DOB;
                emp1.SALARY = emp.SALARY;
                obj.SaveChanges();
                return "Data Updated.";
            }
        }
        [HttpDelete]
        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.";
            }
        }
    }
}

Angular js code:

/// <reference path="angular.js" />
angular.module("app", [])
    .filter("Cfilter", function ()
    {
        return function (EID)
        {
            switch (EID)
            {
                case 1:
                    return "Jay Jagannath";
                 
                case 2:
                    return "Balram";
                 
                case 3:
                    return "Ram";
                   
                default:
                    return "Balram";

            }
        }
    })
.controller("ctr", function ($scope, EMPService) {
    var k;
    $('.c').datepicker({ format: 'yyyy-mm-dd' }).on("change", function () {
        k = $(this).val();
    });
 
    function CLR()
    {
        $scope.EMP = new emp();
        $scope.lists = null;
        $scope.caption = null;
        $('#tb').focus();
    } CLR();
    function fill()
    {
        EMPService.Gete().then(function (d) {
            $scope.list = d.data;
         
        });
    } fill();
    function ddl()
    {
        EMPService.Getc().then(function (d) {
            $scope.listc = d.data;
        });
    } ddl();
    $scope.fillddl = function ()
    {
        fd($scope.EMP.CID);
    }
    function fd(s)
    {
        EMPService.Gets(s).then(function (d) {
            $scope.caption = "Select";
            $scope.lists = d.data;
        });
    }
    $scope.save = function ()
    {
        $scope.EMP.DOB = k;
        EMPService.Save($scope.EMP).then(function (d) {
            alert(d.data);
            CLR();
            fill();
        });
    }
    $scope.edit = function (t)
    {
        EMPService.Get(t).then(function (d) {
            fd(d.data.CID);
            $scope.EMP = d.data;
            $scope.EMP.DOB = d.data.DOB.substring(0, 10);
         
        });
    }
    $scope.update = function () {
        if(k!=null)
        $scope.EMP.DOB = k;
        EMPService.Update($scope.EMP).then(function (d) {
            alert(d.data);
            CLR();
            fill();
        });
    }
    $scope.del = function (u) {
        if (confirm('Do you want to delte it ?'))
        {
            EMPService.Delete(u).then(function (d) {
                alert(d.data);
                fill();
            });
        }
    }
    $scope.reset = function ()
    {
        CLR();
    }


})
.factory("EMPService", function ($http) {
    var fac = {};
    fac.Getc = function () {
        return $http.get('http://localhost:65047/api/Values');
    }
    fac.Gets = function (CID) {
        return $http.get('http://localhost:65047/api/Values/Gets?CID='+CID);
    }
    fac.Gete = function () {
        return $http.get('http://localhost:65047/api/Values/Gete?s='+'S');
    }
    fac.Get = function (EID) {
        return $http.get('http://localhost:65047/api/Values/Get?EID='+EID+'&i='+1);
    }
    fac.Save = function (EMP) {
        return $http.post('http://localhost:65047/api/Values/Post',EMP);
    }
    fac.Update = function (EMP) {
        return $http.put('http://localhost:65047/api/Values/Put', EMP);
    }
    fac.Delete = function (EID) {
        return $http.delete('http://localhost:65047/api/Values/Delete?EID='+EID);
    }
    return fac;
});
function emp()
{
    return {
        EID: null,
        NAME: null,
        ADDRESS: null,
        PASSWORD: null,
        GENDER: null,
        ISMARRIED: true,
        CID: null,
        SID: null,
        DOB: null,
        SALARY:null
    }
}

View Code :

@{
    ViewBag.Title = "Index";
}
<h2>Jay Jagannath...</h2>

<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap-theme.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/EmpService.js"></script>
<script src="~/Scripts/bootstrap-datepicker.js"></script>

<div class="container" ng-app="app" ng-controller="ctr">
    <form class="form-horizontal">
        <div class="form-group">
            <label class="control-label col-lg-4">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="control-label col-lg-4">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="control-label col-lg-4">ADDRESS</label>
            <div class="col-lg-4">
                <textarea class="form-control" ng-model="EMP.ADDRESS"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-lg-4">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="control-label col-lg-4">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="control-label col-lg-4">ARE YOU MARRIED ?</label>
            <div class="col-lg-4">
                <input type="checkbox" ng-model="EMP.ISMARRIED" />
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-lg-4">COUNTRY</label>
            <div class="col-lg-4">
                <select ng-model="EMP.CID" class="form-control" 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="control-label col-lg-4">STATE</label>
            <div class="col-lg-4">
                <select ng-model="EMP.SID" class="form-control" ng-options="C.SID as C.SNAME for C in lists">
                    <option value="">{{caption}}</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-lg-4">DOB</label>
            <div class="col-lg-4">
                <input type="text" class="form-control c" ng-model="EMP.DOB" />
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-lg-4">SALARY</label>
            <div class="col-lg-4">
                <input type="text" class="form-control " ng-model="EMP.SALARY" />
            </div>
        </div>
       
        <div class="form-group">
            <label class="control-label col-lg-4"></label>
            <div class="col-lg-4">
                <input type="button" class="btn btn-primary" style="width:80px" value="Save" ng-click="save()" />
                <input type="button" class="btn btn-primary" style="width:80px" value="Update" ng-click="update()" />
                <input type="button" class="btn btn-primary" style="width:80px" value="Reset" ng-click="reset()" />

            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-lg-4">Select To Show</label>
            <div class="col-lg-4">
                <select class="form-control" ng-model="row">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-lg-4">Search</label>
            <div class="col-lg-4">
               <input type="text" ng-model="search" placeholder="Search" class="form-control"/>
            </div>
        </div>
        <div class="row">
            <table class="table table-bordered table-condensed table-hover table-responsive table-striped">
                <thead class="bg-primary">
                    <tr>
                        <th>EID</th>
                        <th>NAME</th>
                        <th>GENDER</th>
                        <th>DOB</th>
                        <th>SALARY(Number)</th>
                        <th>SALARY(Currency)</th>
                        <th>UPDATE</th>
                        <th>DELETE</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="c in list|limitTo:row|filter:search|orderBy:NAME:true">
                        <td>{{c.EID|Cfilter}}</td>
                        <td>{{c.NAME|uppercase}}</td>
                        <td>{{c.GENDER|lowercase}}</td>
                        <td>{{c.DOB|date:"dd-MMM-yyyy"}}</td>
                        <td>{{c.SALARY|number:2}}</td>
                        <td>{{c.SALARY|currency:"$":1}}</td>
                        <td><a ng-click="edit(c.EID)">Edit</a></td>
                        <td><a ng-click="del(c.EID)">Delete</a></td>
                    </tr>
                </tbody>

            </table>
        </div>
    </form>
</div>

No comments:

Post a Comment