Tuesday 2 February 2016

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


View Code :
@{
    ViewBag.Title = "Index";
}
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/Paging.js"></script>
<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 col-md-4 col-sm-4 col-xs-4">EID</label>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-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 col-md-4 col-sm-4 col-xs-4">NAME</label>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                <input type="text" class="form-control" ng-model="EMP.NAME" />
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-lg-4 col-md-4 col-sm-4 col-xs-4">ADDRESS</label>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                <textarea class="form-control" ng-model="EMP.ADDRESS"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-lg-4 col-md-4 col-sm-4 col-xs-4">PASSWORD</label>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                <input type="password" class="form-control" ng-model="EMP.PASSWORD" />
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-lg-4 col-md-4 col-sm-4 col-xs-4">GENDER</label>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-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 col-md-4 col-sm-4 col-xs-4"></label>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                <input type="checkbox" ng-model="EMP.ISMARRIED" />ISMARRIED
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-lg-4 col-md-4 col-sm-4 col-xs-4">COUNTRY</label>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                <select ng-model="EMP.CNAME" id="ddl" ng-options="c for c in listc" ng-change="fillddl()" class="form-control"></select>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-lg-4 col-md-4 col-sm-4 col-xs-4">STATE</label>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                <select ng-model="EMP.SNAME" ng-options="c for c in lists" class="form-control"></select>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-lg-4 col-md-4 col-sm-4 col-xs-4"></label>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                <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="form-group">
            <label class="control-label col-lg-1 col-md-1 col-sm-1 col-xs-1">SEARCH</label>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                <input type="text" ng-model="search" class="form-control" />
            </div>
        </div>
        <div class="row">
            <table class="table table-bordered 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: '/Home/Gets',
                method: 'Get'
            });
            m.then(function (d) {
                $scope.list = d.data;
            });
        } fill()
        $scope.Reset = function ()
        {
            clear();
        }
        m = $http({
            url: '/Home/Getc',
            method: 'Get'
        });
        m.then(function (d) {
            $scope.listc = d.data;
        });
        $scope.fillddl = function () {
            fd($('#ddl :selected').text());
        }
        function fd(e) {
            m = $http({
                url: '/Home/Getst',
                data: { s: e },
                method: 'Post'
            });
            m.then(function (d) {
                $scope.lists = d.data;
            });
        }
        $scope.Save = function () {
            m = $http({
                url: '/Home/Post',
                data: $scope.EMP,
                method: 'Post'
            });
            m.then(function (d) {
                alert(d.data);
                clear();
                fill();
            });
        }
        $scope.Update = function () {
            m = $http({
                url: '/Home/Put',
                data: $scope.EMP,
                method: 'Post'
            });
            m.then(function (d) {
                alert(d.data);
                clear();
                fill();
            });
        }
        $scope.del = function (n) {
            if (confirm('Do you want to delete it ?')) {
                m = $http({
                    url: '/Home/Delete',
                    data: n,
                    method: 'Post'
                });
                m.then(function (d) {
                    alert(d.data);
                    fill();
                }
                )
            }
        }
        $scope.order = function (p) {
            $scope.reverse = ($scope.predicate === p) ? !$scope.reverse : false;
            $scope.predicate = p;
        }

        $scope.edit = function (n) {
            m = $http({
                url: '/Home/Get',
                data: { Id: n },
                method: 'Post'
            });
            m.then(function (d) {
                fd(d.data.CNAME);
                $scope.EMP = d.data;
            }
            )
        }
    });
    function emp() {
        return {
            EID: null,
            NAME: null,
            ADDRESS: null,
            PASSWORD: null,
            GENDER: null,
            ISMARRIED: true,
            CNAME: "X",
            SNAME: null,
        }
    }
</script>
Controller Code :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcApplication3.Models;
using System.Data.Entity;

namespace MvcApplication3.Controllers
{
    public class HomeController : Controller
    {
       
        public ActionResult Index()
        {
            return View();
        }
        [OutputCache(Duration = 0)]
        public JsonResult Gets()
        {
            using (Database1Entities obj = new Database1Entities())
            {
                return Json(obj.EMPs.ToList(), JsonRequestBehavior.AllowGet);
            }
        }
        public JsonResult Get(int Id)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                return Json(obj.EMPs.SingleOrDefault(m=>m.EID==Id), JsonRequestBehavior.AllowGet);
            }
        }
        public JsonResult Getc()
        {
            using (Database1Entities obj = new Database1Entities())
            {
                return Json(obj.COUNTRies.ToList().Select(m=>m.CNAME), JsonRequestBehavior.AllowGet);
            }
        }
        public JsonResult Getst(string s)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                int i = obj.COUNTRies.SingleOrDefault(m => m.CNAME == s).CID;
                return Json(obj.STATEs.ToList().Where(m=>m.CID==i).Select(m=>m.SNAME), JsonRequestBehavior.AllowGet);
            }
        }
        public string Post(EMP emp)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                obj.Entry(emp).State = EntityState.Added;
                obj.SaveChanges();
                return "Data Saved";
            }
        }
        public string Put(EMP emp)
        {
            using(Database1Entities obj=new Database1Entities())
            {
                obj.Entry(emp).State = EntityState.Modified;
                obj.SaveChanges();
                return "Data Updated";

            }
            
        }
        public string Delete(EMP emp)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                obj.Entry(emp).State = EntityState.Deleted;
                obj.SaveChanges();
                return "Data Deleted";

            }

        }
        public JsonResult Getci(string s)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                return Json(obj.COUNTRies.SingleOrDefault(m => m.CNAME == s).CID, JsonRequestBehavior.AllowGet);
            }
        }
        public JsonResult Getsi(string s)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                return Json(obj.STATEs.SingleOrDefault(m => m.SNAME == s).SID, JsonRequestBehavior.AllowGet);
            }
        }
    }
}



No comments:

Post a Comment