Monday, 20 June 2016

CURD oration in ng grid using angular js,MVC,web API

web api Code :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using WebApplication21.Models;

namespace WebApplication21.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 i=obj.COUNTRies.FirstOrDefault(m=>m.CNAME==CNAME).CID;
                return obj.STATEs.Where(m => m.CID == i).Select(n => n.SNAME).ToList();
            }
        }
        public List<EMP> Gete(int i, int j)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                return obj.EMPs.ToList();
            }
        }
        public EMP GetById(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.GENDER = emp.GENDER;
                emp1.ISMARRIED = emp.ISMARRIED;
                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.";
            }
        }

    }
}

View code
@{
    ViewBag.Title = "Index";
}
<style type="text/css">
    .gridStyle {
        border: 1px solid rgb(212,212,212);
        width: 900px;
        height: 300px;
    }
</style>
<h2>JAY JAGANNATH...</h2>
<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>

<script type="text/javascript">
    var app = angular.module('App', ['ngGrid']);
    app.controller('Ctr', function ($scope, $http) {
        var m;
        function CLR() {
            $scope.EMP = new emp();
            $('#tb').focus();
        } CLR();
        function fill() {
            m = $http({
                url: 'http://localhost:64633/api/values/Gete?i=' + 1 + '&j=' + 2,
                method: 'Get'
            });
            m.then(function (d) {
                $scope.DataSource = d.data;
            });
            
           
          
            $scope.gridOptions = {
                multiSelect: false,
                enableCellEdit: false,
                enableRowSelection: true,
                enableColumnResize: false,
                enableCellSelection: false,
                showFilter: true,
                columnDefs:
                    [
             { field: 'EID', displayName: 'Eid', width: '250px', visible: false, resizable: true },
             { field: 'NAME', displayName: 'Name', width: '250px' },
             { field: 'ADDRESS', displayName: 'Address', width: '350px' },
              { field: 'GENDER', displayName: 'Gender', width: '100px' },
          {
              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>'
          }
                    ],
                data: 'DataSource',

            };
        } fill();

        $scope.save = function () {
            m = $http({
                url: 'http://localhost:64633/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:64633/api/values/Put',
                method: 'Put',
                data: $scope.EMP
            });
            m.then(function (d) {
                alert(d.data);
                CLR();
                fill();
            });
        }
        $scope.reset = function () {
            CLR();
        }
        $scope.Del = function (s) {
            if (confirm('Do you want to delete it ?')) {
                m = $http({
                    url: 'http://localhost:64633/api/values/Delete',
                    method: 'Patch',
                    data: s
                });
                m.then(function (d) {
                    alert(d.data);
                    fill();
                });
            }
        };
        m = $http({
            url: 'http://localhost:64633/api/values',
            method: 'Get'
        });
        m.then(function (d) {
            $scope.listc = d.data;
        });


        $scope.fillddl = function () {
            fd($('#ddl :selected').text());
        }
        function fd(s) {

            m = $http({
                url: 'http://localhost:64633/api/values/Gets?CNAME=' + s,
                method: 'Get'
            });
            m.then(function (d) {

                $scope.lists = d.data;
            });
        }
        $scope.Edit = function (s) {
            fd(s.CNAME);
            $scope.EMP = s;
        }
    });
    function emp() {
        return {
            EID: null,
            NAME: null,
            ADDRESS: null,
            PASSWORD: null,
            GENDER: null,
            ISMARRIED: true,
            CNAME: null,
            SNAME: null
        }
    }
</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">GENDER</label>
            <div class="col-lg-4">
                <input type="radio" ng-model="EMP.GENDER" value="Male" />Male
                <input type="radio" ng-model="EMP.GENDER" value="Female" />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="control-label col-lg-4">COUNTRY</label>
            <div class="col-lg-4">
                <select class="form-control" id="ddl" ng-model="EMP.CNAME" ng-change="fillddl()" ng-options="c for c in listc"></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.SNAME" ng-options="c for c in lists"></select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-lg-4 control-label"></label>
            <div class="col-lg-4">
                <input type="button" value="Save" style="width:80px" ng-click="save()" class="btn btn-primary" />
                <input type="button" value="Update" style="width:80px" ng-click="update()" class="btn btn-primary" />
                <input type="button" value="Reset" style="width:80px" ng-click="reset()" class="btn btn-primary" />
            </div>
        </div>
        <div class="gridStyle " ng-grid="gridOptions">
        </div>
    </form>
</div>



No comments:

Post a Comment