Saturday 30 July 2016

Multiple delete,date picker &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 WebApplication32.Models;

namespace WebApplication32.Controllers
{
 
    public class ValuesController : ApiController
    {
        public List<string> Getc()
        {
            using (Database1Entities obj = new Database1Entities())
            {
                return obj.COUNTRies.Select(m=>m.CNAME).ToList();
            }
        }
        public List<string> Gets(string CNAME)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                int cid = obj.COUNTRies.SingleOrDefault(m => m.CNAME == CNAME).CID;
                return obj.STATEs.Where(n=>n.CID==cid).Select(m => m.SNAME).ToList();
            }
        }
        public List<EMP> Gete(int i)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                return obj.EMPs.ToList();
            }
        }
        public EMP Get(int EID, 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(n => n.EID == emp.EID);
                emp1.NAME = emp.NAME;
                emp1.ADDRESS = emp.ADDRESS;
                emp1.DOB = emp.DOB;
                emp1.GENDER = emp.GENDER;
                emp1.ISMARRIED = emp.ISMARRIED;
                emp1.CNAME = emp.CNAME;
                emp1.SNAME = emp.SNAME;
                obj.SaveChanges();
                return "Data Updated.";
            }
        }
        [HttpPatch]
        public string Del(int EID)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                EMP emp1 = obj.EMPs.SingleOrDefault(n => n.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(n=>lst.Contains(n.EID)));
                obj.SaveChanges();
                return "Data Deleted.";
            }
        }
    }
}

Veiw Code :

@{
    ViewBag.Title = "Index";
}
<link href="~/Content/ng-grid.css" rel="stylesheet" />
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap-datepicker.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/bootstrap-datepicker.js"></script>
<script src="~/Scripts/ng-grid.js"></script>

<h2>Jay Jagannath...</h2><br /><br />
<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">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="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 ng-options="c for  c in listc" ng-change="fillddl()" class="form-control" ng-model="EMP.CNAME">
                   
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-lg-4 control-label">STATE</label>
            <div class="col-lg-4">
                <select ng-options="c for  c in  lists" class="form-control" ng-model="EMP.SNAME">
                    
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-lg-4 control-label"></label>
            <div class="col-lg-4">
                <input type="button" class="btn btn-primary" value="Delete All" ng-click="delall()" style="width:80px" />
                <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="gridStyle" ng-grid="gridOptions">

        </div>
    </form>
</div>
<style type="text/css">
    .gridStyle {
        border: 1px solid rgb(212,212,212);
        width: 900px;
        height: 300px;
    }
</style>
<script type="text/javascript">
    var k;
    $('.c').datepicker({ format: 'yyyy-mm-dd' }).on("change", function () {
       k=$(this).val();
    });
    angular.module("app", ['ngGrid']).controller("ctr", function ($scope, $http) {
        var m;
        $scope.n = [];
        function clr() {
            $scope.EMP = new emp();
            $('#tb').focus();
        } clr();
        $scope.save = function () {
            $scope.EMP.DOB = k;
            alert($scope.EMP.DOB);
            m = $http({
                url: 'http://localhost:59600/api/Values/Post',
                method: 'Post',
                data: $scope.EMP,
            });
            m.then(function (d) {
                alert(d.data);
                clr();
                fill();
            });
        }
        function filldl() {
            m = $http({
                url: 'http://localhost:59600/api/Values/Getc',
                method: 'Get'

            });
            m.then(function (d) {
                $scope.listc = d.data;

            });
        } filldl();
        $scope.fillddl = function () {
            fd($scope.EMP.CNAME);
        }
        function fd(s) {
            m = $http({
                url: 'http://localhost:59600/api/Values/Gets?CNAME=' + s,
                method: 'Get'

            });
            m.then(function (d) {
                $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();
                        $http.get('http://localhost:59600/api/Values/Gete?i=' + 1).success(function (largeLoad) {
                            data = largeLoad.filter(function (item) {
                                return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
                            });
                            $scope.setPagingData(data, page, pageSize);
                        });
                    } else {
                        $http.get('http://localhost:59600/api/Values/Gete?i=' + 2).success(function (largeLoad) {
                            $scope.setPagingData(largeLoad, 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)
        {
            m = $http({
                url: 'http://localhost:59600/api/Values/Get?EID=' + s.EID+'&j='+1,
                method: 'Get'

            });
            m.then(function (d) {
                fd(d.data.CNAME);
                $scope.EMP = d.data;
                $scope.EMP.DOB = d.data.DOB.substring(0, 10);
            });
        }
        $scope.update = function () {
            if(k!=undefined)
            $scope.EMP.DOB = k;
            m = $http({
                url: 'http://localhost:59600/api/Values/Put',
                method: 'Put',
                data: $scope.EMP,
            });
            m.then(function (d) {
                alert(d.data);
                clr();
                fill();
            });
        }
        $scope.Del = function (s)
        {
           
            if (confirm('Do you want to delete it ?'))
            {
                m = $http({
                    url: 'http://localhost:59600/api/Values/Del?EID='+s.EID,
                    method: 'Patch',
                   
                  
                });
                m.then(function (d) {
                    alert(d.data);
                    fill();
                });

            }
        }
        $scope.reset = function ()
        {
            clr();
        }
        var p = '';
        $scope.delall = 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('&'));
              
                m = $http({
                    url: 'http://localhost:59600/api/Values/Mdelete?' + p,
                    method: 'Delete'
                });
                m.then(function (d) {
                    alert(d.data);
                    fill();
                });
            }
        }

    });
   
    function emp() {
        return {
            EID: null,
            NAME: null,
            ADDRESS: null,
            DOB: null,
            GENDER: null,
            ISMARRIED: true,
            CNAME: null,
            SNAME: null

        }
    }
</script>

Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)