Thursday, 14 July 2016

Multiple delete & CURD oration in 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 WebApplication26.Models;

namespace WebApplication26.Controllers
{
 
    public class ValuesController : ApiController
    {
        [HttpGet]
        public List<string> Get()
        {
            using (Database1Entities obj = new Database1Entities())
            {
                return obj.COUNTRies.Select(m => m.CNAME).ToList();
            }
        }
        [HttpGet]
        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(m=>m.CID==CID).Select(m => m.SNAME).ToList();
            }
        }
        [HttpGet]
        public List<EMP> Gete(int i)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                return obj.EMPs.ToList();
            }
        }
        [HttpGet]
        public EMP GetById(int EID)
        {
            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.GENDER = emp.GENDER;
                emp1.ISMARRIED = emp.ISMARRIED;
                emp1.PASSWORD = emp.PASSWORD;
                emp1.CNAME = emp.CNAME;
                emp1.SNAME = emp.SNAME;
                obj.SaveChanges();
                return "Data Updated.";
            }
        }
        [HttpPatch]
        public string Delete(EMP emp)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                EMP emp1 = obj.EMPs.SingleOrDefault(m => m.EID ==emp.EID);
                obj.EMPs.Remove(emp1);
                obj.SaveChanges();
                return "Data Deleted.";
            }
        }
        [HttpDelete]
        public string MDelete([FromUri]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";
}
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/ng-grid.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/ng-grid.js"></script>

<h2>Jay Jagannath.</h2>
<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 id="ddl" 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="control-label col-lg-4">STATE</label>
            <div class="col-lg-4">
                <select id="ddl1" ng-options="c for c in lists" ng-model="EMP.SNAME" class="form-control"></select>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-lg-4"></label>
            <div class="col-lg-4">
                <input type="button" value="Save" ng-click="save()" class="btn btn-primary" style="width:80px" />
                <input type="button" value="Update" ng-click="update()" class="btn btn-primary" style="width:80px" />
                <input type="button" value="Reset" ng-click="reset()" class="btn btn-primary" style="width:80px" />
                <input type="button" value="DeleteAll" ng-click="da()" class="btn btn-primary" style="width:80px" />
            </div>
        </div>
        <div class="row">
            <table class="table table-bordered table-condensed table-hover table-responsive table-striped">
                <thead class="bg-primary">
                    <tr>
                        <th><input type="checkbox" id="hcb" /></th>
                        <th>EID</th>
                        <th>NAME</th>
                        <th>ACTION</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="c in list">
                        <td><input type="checkbox" value="{{c.EID}}" class="cb" /></td>
                        <td>{{c.EID}}</td>
                        <td>{{c.NAME}}</td>
                        <td>
                            <a ng-click="Edit(c)">Edit</a> |
                            <a ng-click="Del(c)">Delete</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </form>
</div>
<script type="text/javascript">
    angular.module("app", []).controller("ctr", function ($scope, $http) {
        var m;
        function clr() {
            $scope.EMP = new emp();
            $('#tb').focus();
        } clr();
        $('#hcb').click(function () {
            if ($(this).is(':checked'))
                $('.cb').prop("checked", true);
            else
                $('.cb').prop("checked", false);
        });
        $scope.reset = function ()
        {
            clr();
        }
        $('body').on("click", '.cb', function () {
            if ($('.cb:checked').length == $('.cb').length)
                $('#hcb').prop("checked", true);
            else
                $('#hcb').prop("checked", false);
        });

        $scope.da = function () {
            var n='';
            if ($('.cb:checked').length == 0) {
                alert('Please select a item from the list.');
                return false;
            }
            else {
                $('.cb:checked').each(function (i, j) {
                    n = n + 'lst=' + $(j).val() + '&';
                });
                n = n.substring(0, n.lastIndexOf('&'));
                if (confirm('Do you want to delete it ?')) {
                    m = $http({
                        url: "http://localhost:51787/api/Values/MDelete?" + n,
                        method: "Delete",
                    });
                    m.then(function (d) {
                        alert(d.data);
                        fill();
                    });
                   

                }

            }
        }
        function fd() {
            m = $http({
                url: 'http://localhost:51787/api/Values',
                method: 'Get'
            });
            m.then(function (d) {
                $scope.listc = d.data;
            });
        } fd();
        $scope.fillddl = function () {
            fd1($('#ddl :selected').text());
        }
        function fd1(s) {
            m = $http({
                url: 'http://localhost:51787/api/Values/Gets?CNAME=' + s,
                method: 'Get'
            });
            m.then(function (d) {
                $scope.lists = d.data;
            });
        }
        $scope.save = function () {
            m = $http({
                url: 'http://localhost:51787/api/Values/Post',
                method: 'Post',
                data: $scope.EMP
            });
            m.then(function (d) {
                alert(d.data);
                clr();
                fill();
            });
        }
        $scope.update = function () {
            m = $http({
                url: 'http://localhost:51787/api/Values/Put',
                method: 'Put',
                data: $scope.EMP
            });
            m.then(function (d) {
                alert(d.data);
                clr();
                fill();
            });
        }
        function fill() {

            m = $http({
                url: 'http://localhost:51787/api/Values/Gete?i=' + 1,
                method: 'Get',

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

            });
        } fill();
        $scope.Edit = function (s) {
            m = $http({
                url: 'http://localhost:51787/api/Values/GetById?EID=' + s.EID,
                method: 'Get',
            });
            m.then(function (d) {
                fd1(d.data.CNAME);
                $scope.EMP = d.data;
            });
        }
        $scope.Del = function (s) {

            if (confirm('Do you want to delete it ?')) {

                m = $http({
                    url: 'http://localhost:51787/api/Values/Delete',
                    method: 'Patch',
                    data:s
                });
                m.then(function (d) {
                    alert(d.data);
                    fill();
                });

            }
        };
    });
    function emp() {
        return {
            EID: null,
            NAME: null,
            ADDRESS: null,
            PASSWORD: null,
            GENDER: null,
            ISMARRIED: true,
            CNAME: null,
            SNAME: null
        }
    }
</script>

No comments:

Post a Comment