Thursday 4 August 2016

Multiple delete,all controls &CURD oration in NG GRIDE, MVC ,WEB API, & ANGULARJS

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
    }
}

Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)