Tuesday 23 February 2016

CURD opration and Search,Sort and Pagination using anguraljs,MVC,WEB API & MVVM with all control and cascading dropdown



WEB API code :

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

namespace MvcApplication1.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.SingleOrDefault(m => m.CNAME == CNAME).CID;
                return obj.STATEs.Where(n => n.CID == i).Select(m=>m.SNAME).ToList();
            }
        }
        public List<EMP> GetAll(int i)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                return obj.EMPs.ToList();
            }
        }
        public EMP GetById(int t, int Id)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                return obj.EMPs.SingleOrDefault(m => m.EID == Id);
            }
        }
        [HttpPost]
        public string Save(EMP emp)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                obj.EMPs.Add(emp);
                obj.SaveChanges();
                return "Data Saved.";
            }
         
        }
        [HttpPut]
        public string Update(EMP emp1)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                EMP emp = obj.EMPs.SingleOrDefault(m => m.EID == emp1.EID);
                emp.NAME = emp1.NAME;
                emp.ADDRESS= emp1.ADDRESS;
                emp.PASSWORD = emp1.PASSWORD;
                emp.GENDER = emp1.GENDER;
                emp.ISMARRIED = emp1.ISMARRIED;
                emp.CNAME = emp1.CNAME;
                emp.SNAME = emp1.SNAME;
                obj.SaveChanges();
                return "Data Updated.";
            }

        }
        [HttpPatch]
        public string Delete(EMP emp1)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                EMP emp = obj.EMPs.SingleOrDefault(m => m.EID == emp1.EID);
                obj.EMPs.Remove(emp);
                obj.SaveChanges();
                return "Data Deleted.";
            }

        }
    }
   
}


HTML VIEW CODE :

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

<h2></h2>
<br /><br /><br />
<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"  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="control-label col-lg-4"></label>
            <div class="col-lg-4">
                <input type="checkbox" ng-model="EMP.ISMARRIED"  />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="fill()" ng-options="c for c in listc"></select>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-lg-4">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="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" />
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-lg-1">SEARCH</label>
            <div class="col-lg-2">
                <input type="text" class="form-control" ng-model="search" />
            </div>
        </div>
        <div class="row">
            <table class="table table-bordered table-condensed table-hover table-responsive table-striped">
                <thead class="bg-primary">
                    <tr>
                        <th ng-click="order('EID')">EID
                            <span class="glyphicon sort-icon" ng-show="sortKey=='EID'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
                        </th>
                        <th ng-click="order('NAME')">NAME
                            <span class="glyphicon sort-icon" ng-show="sortKey=='NAME'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
                        </th>
                        <th>UPDATE</th>
                        <th>DELETE</th>
                    </tr>
                </thead>
                <tbody>
                    <tr dir-paginate="c in list|filter:search|orderBy:predicate:reverse|itemsPerPage:2">
                        <td>{{c.EID}}</td>
                        <td>{{c.NAME}}</td>
                        <td><a ng-click="edit(c.EID)">Edit</a></td>
                        <td><a ng-click="del(c)">Delete</a></td>
                    </tr>
                    <tr>
                        <td colspan="4">
                            <dir-pagination-controls max-size="2"
                                                     direction-links="true"
                                                     boundary-links="true">
                            </dir-pagination-controls>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </form>
</div>
<script type="text/javascript">
    angular.module("app", ['angularUtils.directives.dirPagination']).controller("ctr", function ($scope, $http) {
        var m;
        function clear()
        {
            $scope.EMP = new emp();
            $('#tb').focus();
        } clear();
        function fill()
        {
            m = $http({
                url: 'http://localhost:50293/api/Values/GetAll?i=1',
                method:'Get'
            });
            m.then(function (d) {
                $scope.list = d.data;
            });
        } fill();
        m = $http({
            url: 'http://localhost:50293/api/Values/Getc',
            method: 'Get'
        });
        m.then(function (d) {
            $scope.listc = d.data;
        });
        $scope.fill = function ()
        {
            fillddl($('#ddl :selected').text());
        }
        $scope.save = function () {
         
            m = $http({
                url: 'http://localhost:50293/api/Values/Save',
                method: 'Post',
                data: $scope.EMP
            });
            m.then(function (d) {
                alert(d.data);
                clear();
                fill();
            });
        }
        $scope.update = function () {

            m = $http({
                url: 'http://localhost:50293/api/Values/Update',
                method: 'Put',
                data: $scope.EMP
            });
            m.then(function (d) {
                alert(d.data);
                clear();
                fill();
            });
        }
        $scope.del = function (n)
        {
            if (confirm('Do you want to delete it ?'))
            {
                m = $http({
                    url: "http://localhost:50293/api/Values/Delete",
                    data:n,
                    method: 'Patch'
                });
                m.then(function (d) {
                    alert(d.data);
                    fill();
                });
            }
        }
        $scope.reset = function ()
        {
            clear();
        }
        $scope.edit = function (n)
        {
         
            m = $http({
                url: "http://localhost:50293/api/Values/GetById?t=" + n + "&Id="+n,
                method: 'Get'
            });
            m.then(function (d) {
                fillddl(d.data.CNAME);
                $scope.EMP = d.data;
            });
        }
        function fillddl(s)
        {
            m = $http({
                url: 'http://localhost:50293/api/Values/Gets?CNAME='+s,
                method: 'Get'
            });
            m.then(function (d) {
                $scope.lists= d.data;
            });
        }
        $scope.order = function (p) {
            $scope.reverse = ($scope.predicate === p) ? !$scope.reverse : false;
            $scope.predicate = p;
        }
    });
    function emp()
    {
        return {
            EID: null,
            NAME: null,
            ADDRESS: null,
            PASSWORD: null,
            GENDER: null,
            ISMARRIED: true,
            CNAME: "X",
            SNAME:null
        }
    }
</script>

No comments:

Post a Comment