MVC and Angular Js Code helper

Friday, July 10, 2015

ng grid with multiple column filter

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
    <meta charset="utf-8">
    <title>ng grid paging</title>
    <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
    <style>
        .gridStyle {
            border: 1px solid rgb(212,212,212);
            width: 600px;
            height: 300px;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
    <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
    <script type="text/javascript">
        var app = angular.module('myApp', ['ngGrid']);
        app.controller('MyCtrl', function ($scope, $http) {
            $scope.filterOptions = {};
            var myHeaderCellTemplate = '<div>{{col.displayName}}</div>'
               + '<input type="text" ng-model="gridOptions.filterOptions[col.displayName]"/>';


            $scope.totalServerItems = 0;
            $scope.pagingOptions = {
                pageSizes: [250, 500, 1000],
                pageSize: 250,
                currentPage: 1
            };

            $scope.getPagedDataAsync = function (pageSize, page, filterOptions) {
                var searchStr = JSON.stringify(filterOptions);
                setTimeout(function () {
                    $http.get('/api/home/getJson?pageSize=' + pageSize + '&page=' + page + '&searchStr=' + searchStr).success(function (largeLoad) {
                        $scope.myData = largeLoad.data;
                        $scope.totalServerItems = largeLoad.count;
                        if (!$scope.$$phase) {
                            $scope.$apply();
                        }
                    });

                }, 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);
                }
            }, true);
            $scope.$watch('filterOptions', function (newVal, oldVal) {
                if (newVal !== oldVal) {
                    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions);
                }
            }, true);

            $scope.gridOptions = {
                data: 'myData',
                enablePaging: true,
                rowHeight: 36,
                headerRowHeight: 60,
                showFooter: true,
                totalServerItems: 'totalServerItems',
                pagingOptions: $scope.pagingOptions,
                filterOptions: $scope.filterOptions,
                columnDefs: [{ field: 'name', displayName: 'name', headerCellTemplate: myHeaderCellTemplate },
                             { field: 'allowance', displayName: 'allowance', headerCellTemplate: myHeaderCellTemplate },
                             { field: 'paid', displayName: 'paid', headerCellTemplate: myHeaderCellTemplate }]
            };
        });
    </script>
</head>
<body ng-controller="MyCtrl">
    <div class="gridStyle" ng-grid="gridOptions"></div>
</body>
</html>





public class test
    {
        [Key, DatabaseGenerated(DatabaseGeneratedOption.Identity)]
        public string name { get; set; }
        public decimal? allowance { get; set; }
        public bool paid { get; set; }
    }
    public class HomeController : ApiController
    {
        [HttpGet]
        public HttpResponseMessage getJson(int pageSize, int page, string searchStr)
        {

            test searchParms = searchStr == "undefined" ? new test() : new JavaScriptSerializer().Deserialize<test>(searchStr);

            string jsonstr = "[{ \"name\": \"Moroni\", \"allowance\": 505050505050505050, \"paid\": true },{ \"name\": \"Tiancum\", \"allowance\": 53, \"paid\": false },{ \"name\": \"Jacob\", \"allowance\": 27, \"paid\": false },{ \"name\": \"Nephi\", \"allowance\": 29, \"paid\": false },{ \"name\": \"Enos\", \"allowance\": 34, \"paid\": false },{ \"name\": \"Ether\", \"allowance\": 42, \"paid\": false },{ \"name\": \"Alma\", \"allowance\": 43, \"paid\": true },{ \"name\": \"Jared\", \"allowance\": 21, \"paid\": true },{ \"name\": \"Moroni\", \"allowance\": 50, \"paid\": true },{ \"name\": \"Tiancum\", \"allowance\": 53, \"paid\": false },{ \"name\": \"Jacob\", \"allowance\": 27, \"paid\": false },{ \"name\": \"Nephi\", \"allowance\": 29, \"paid\": false },{ \"name\": \"Enos\", \"allowance\": 34, \"paid\": false },{ \"name\": \"Ether\", \"allowance\": 42, \"paid\": false },{ \"name\": \"Alma\", \"allowance\": 43, \"paid\": true },{ \"name\": \"Jared\", \"allowance\": 21, \"paid\": true },{ \"name\": \"Moroni\", \"allowance\": 50, \"paid\": true },{ \"name\": \"Tiancum\", \"allowance\": 53, \"paid\": false },{ \"name\": \"Jacob\", \"allowance\": 27, \"paid\": false },{ \"name\": \"Nephi\", \"allowance\": 29, \"paid\": false },{ \"name\": \"Enos\", \"allowance\": 34, \"paid\": false },{ \"name\": \"Ether\", \"allowance\": 42, \"paid\": false },{ \"name\": \"Alma\", \"allowance\": 43, \"paid\": true },{ \"name\": \"Jared\", \"allowance\": 21, \"paid\": true },{ \"name\": \"Moroni\", \"allowance\": 50, \"paid\": true },{ \"name\": \"Tiancum\", \"allowance\": 53, \"paid\": false },{ \"name\": \"Jacob\", \"allowance\": 27, \"paid\": false },{ \"name\": \"Nephi\", \"allowance\": 29, \"paid\": false },{ \"name\": \"Enos\", \"allowance\": 34, \"paid\": false },{ \"name\": \"Ether\", \"allowance\": 42, \"paid\": false },{ \"name\": \"Alma\", \"allowance\": 43, \"paid\": true },{ \"name\": \"Jared\", \"allowance\": 21, \"paid\": true },{ \"name\": \"Moroni\", \"allowance\": 50, \"paid\": true },{ \"name\": \"Tiancum\", \"allowance\": 53, \"paid\": false }]";


            List<test> jsonList = new List<test>();
            jsonList = new JavaScriptSerializer().Deserialize<List<test>>(jsonstr);


            var result1 = searchParms.name == "" || searchParms.name == null ? jsonList : jsonList.Where(x => x.name.Contains(searchParms.name));


            var result2 = searchParms.allowance == 0 || searchParms.allowance == null ? result1 : result1.Where(x => x.allowance.Equals(searchParms.allowance));

            //result = searchParms.paid == null ? jsonList : result.Where(x => x.paid.Equals(searchParms.paid));

            var totalcount = result2.Count();

           var finalresult = result2.Skip((page - 1) * pageSize).Take(pageSize);
           string jsonstr2 = new JavaScriptSerializer().Serialize(finalresult);


            StringBuilder sb = new StringBuilder();

            sb.Append("{\"data\":").Append(jsonstr2).Append(", \"count\":").Append(totalcount).Append("}");

            //dynamic stuff = JObject.Parse("{ 'name': 'Moroni', 'allowance': 505050505050505050, 'paid': true }");
            return new HttpResponseMessage
            {
                Content = new StringContent(sb.ToString(),
                                       System.Text.Encoding.UTF8, "application/json")
            };
        }
    }

Wednesday, July 8, 2015

ng grid with paging

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
    <meta charset="utf-8">
    <title>ng grid paging</title>
    <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
    <style>
        .gridStyle {
            border: 1px solid rgb(212,212,212);
            width: 600px;
            height: 300px;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
    <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
    <script type="text/javascript">
        var app = angular.module('myApp', ['ngGrid']);
        app.controller('MyCtrl', function ($scope, $http) {

            $scope.totalServerItems = 0;
            $scope.pagingOptions = {
                pageSizes: [5, 10, 20],
                pageSize: 5,
                currentPage: 1
            };
            $scope.getPagedDataAsync = function (pageSize, page) {
                setTimeout(function () {
                        $http.get('/api/home/getJson?page=' + page + '&pageSize=' + pageSize + '').success(function (largeLoad) {

                            $scope.myData = largeLoad.data;
                            $scope.totalServerItems = largeLoad.count;
                            if (!$scope.$$phase) {
                                $scope.$apply();
                            }
                        });
                }, 1000);
            };

            $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);
                }
            }, true);

            $scope.gridOptions = {
                data: 'myData',
                enablePaging: true,
                showFooter: true,
                totalServerItems: 'totalServerItems',
                pagingOptions: $scope.pagingOptions
            };
        });
    </script>
</head>
<body ng-controller="MyCtrl">
    <div class="gridStyle" ng-grid="gridOptions"></div>
</body>
</html>




 public class test
    {
        [Key, DatabaseGenerated(DatabaseGeneratedOption.Identity)]
        public string name { get; set; }
        public decimal allowance { get; set; }
        public bool paid { get; set; }
    }
    public class HomeController : ApiController
    {
        public HttpResponseMessage getJson(int page, int pageSize)
        {
            string jsonstr = "[{ \"name\": \"Moroni\", \"allowance\": 505050505050505050, \"paid\": true },{ \"name\": \"Tiancum\", \"allowance\": 53, \"paid\": false },{ \"name\": \"Jacob\", \"allowance\": 27, \"paid\": false },{ \"name\": \"Nephi\", \"allowance\": 29, \"paid\": false },{ \"name\": \"Enos\", \"allowance\": 34, \"paid\": false },{ \"name\": \"Ether\", \"allowance\": 42, \"paid\": false },{ \"name\": \"Alma\", \"allowance\": 43, \"paid\": true },{ \"name\": \"Jared\", \"allowance\": 21, \"paid\": true },{ \"name\": \"Moroni\", \"allowance\": 50, \"paid\": true },{ \"name\": \"Tiancum\", \"allowance\": 53, \"paid\": false },{ \"name\": \"Jacob\", \"allowance\": 27, \"paid\": false },{ \"name\": \"Nephi\", \"allowance\": 29, \"paid\": false },{ \"name\": \"Enos\", \"allowance\": 34, \"paid\": false },{ \"name\": \"Ether\", \"allowance\": 42, \"paid\": false },{ \"name\": \"Alma\", \"allowance\": 43, \"paid\": true },{ \"name\": \"Jared\", \"allowance\": 21, \"paid\": true },{ \"name\": \"Moroni\", \"allowance\": 50, \"paid\": true },{ \"name\": \"Tiancum\", \"allowance\": 53, \"paid\": false },{ \"name\": \"Jacob\", \"allowance\": 27, \"paid\": false },{ \"name\": \"Nephi\", \"allowance\": 29, \"paid\": false },{ \"name\": \"Enos\", \"allowance\": 34, \"paid\": false },{ \"name\": \"Ether\", \"allowance\": 42, \"paid\": false },{ \"name\": \"Alma\", \"allowance\": 43, \"paid\": true },{ \"name\": \"Jared\", \"allowance\": 21, \"paid\": true },{ \"name\": \"Moroni\", \"allowance\": 50, \"paid\": true },{ \"name\": \"Tiancum\", \"allowance\": 53, \"paid\": false },{ \"name\": \"Jacob\", \"allowance\": 27, \"paid\": false },{ \"name\": \"Nephi\", \"allowance\": 29, \"paid\": false },{ \"name\": \"Enos\", \"allowance\": 34, \"paid\": false },{ \"name\": \"Ether\", \"allowance\": 42, \"paid\": false },{ \"name\": \"Alma\", \"allowance\": 43, \"paid\": true },{ \"name\": \"Jared\", \"allowance\": 21, \"paid\": true },{ \"name\": \"Moroni\", \"allowance\": 50, \"paid\": true },{ \"name\": \"Tiancum\", \"allowance\": 53, \"paid\": false }]";


            List<test> jsonList = new List<test>();
            jsonList = new JavaScriptSerializer().Deserialize<List<test>>(jsonstr);

            var totalcount = jsonList.Count();

            var result = jsonList.Skip((page - 1) * pageSize).Take(pageSize);
            string jsonstr2 = new JavaScriptSerializer().Serialize(result);


            StringBuilder sb = new StringBuilder();

            sb.Append("{\"data\":").Append(jsonstr2).Append(", \"count\":").Append(totalcount).Append("}");

            //dynamic stuff = JObject.Parse("{ 'name': 'Moroni', 'allowance': 505050505050505050, 'paid': true }");
            return new HttpResponseMessage
            {
                Content = new StringContent(sb.ToString(),
                                       System.Text.Encoding.UTF8, "application/json")
            };
        }
    }

Friday, July 3, 2015

Angular Js Scope and rootScope

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example - scope and rootscope</title>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular-route.js"></script>
    <script>


        angular.module('ngRouteExample', ['ngRoute'])
            .run(function ($rootScope) {
                $rootScope.test = "from on execute run";
            })
         .controller('RootControllerCreate', function ($scope, $rootScope) {
           
             $scope.test = "from create control";
            
         })

         .controller('RootControllerDetail', function ($scope, $rootScope) {
 
             $rootScope.test = "from detail control";
            
         })

         .controller('RootControllerUpdate', function ($scope, $rootScope) {
   
             //$rootScope.test = "from update control";
            
         })

        .config(function ($routeProvider, $locationProvider) {
            $routeProvider
             .when('/Routing/Detail', {
                 templateUrl: 'Routing/Detail',
                 controller: 'RootControllerDetail'
             })
            .when('/Routing/Create', {
                templateUrl: 'Routing/Create',
                controller: 'RootControllerCreate'
            })
           .when('/Routing/Update', {
               templateUrl: 'Routing/Update',
               controller: 'RootControllerUpdate'
           })
            .otherwise({
                redirectTo: 'Routing/Index'
            });

            // configure html5 to get links working on jsfiddle
            // $locationProvider.html5Mode(true);
        });

    </script>

</head>
<body ng-app="ngRouteExample">
    Choose:
    <a href="/#/Routing/Create">Create</a> |
    <a href="/#/Routing/Detail">Detail</a> |
    <a href="/#/Routing/Update">Update</a> |
    <h3>{{test}}</h3>
    <div ng-view></div>

</body>
</html>

Thursday, July 2, 2015

Angular Js Routing with multiple controllers

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example - example-$route-service-production</title>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular-route.js"></script>
    <script>


        angular.module('ngRouteExample', ['ngRoute'])

         .controller('RootControllerCreate', function ($scope) {

             $scope.title = "Create";
            
         })

         .controller('RootControllerDetail', function ($scope) {
 
             $scope.title = "Detail";
            
         })

         .controller('RootControllerUpdate', function ($scope) {
   
             $scope.title = "Update";
            
         })

        .config(function ($routeProvider, $locationProvider) {
            $routeProvider
             .when('/Routing/Detail', {
                 templateUrl: 'Routing/Detail',
                 controller: 'RootControllerDetail'
             })
            .when('/Routing/Create', {
                templateUrl: 'Routing/Create',
                controller: 'RootControllerCreate'
            })
           .when('/Routing/Update', {
               templateUrl: 'Routing/Update',
               controller: 'RootControllerUpdate'
           })
            .otherwise({
                redirectTo: 'Routing/Index'
            });

            // configure html5 to get links working on jsfiddle
            // $locationProvider.html5Mode(true);
        });

    </script>

</head>
<body ng-app="ngRouteExample">
    Choose:
    <a href="/#/Routing/Create">Create</a> |
    <a href="/#/Routing/Detail">Detail</a> |
    <a href="/#/Routing/Update">Update</a> |
    <div ng-view></div>

</body>
</html>


c#

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcAngularJs.Controllers
{
    public class RoutingController : Controller
    {
        // GET: Routing
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult Create()
        {
            return View();
        }
        public ActionResult Detail()
        {
            return View();
        }
        public ActionResult Update()
        {
            return View();
        }

       
    }
}

MVC and Angular Js Code helper

Latest Posts

Friday, July 10, 2015

ng grid with multiple column filter

Wednesday, July 8, 2015

ng grid with paging

Friday, July 3, 2015

Angular Js Scope and rootScope

Thursday, July 2, 2015

Angular Js Routing with multiple controllers

Blog Archive

Popular Posts

Category