Post
Ask Question

Use MVC Bind Data to AngularJS NgGrid

This section details how to bind ng Grid to a local data model. It should be fairly straight-forward, and will allow us to bind the model quickly To set up the basic ng Grid,
  1. public class HomeController: Controller  
  2. {  
  3.     public ActionResult NgGrid()  
  4.     {  
  5.         return View();  
  6.     }  
  7.     public JsonResult NgGridDetails()  
  8.     {  
  9.         List < Student > stdList = new List < Student > ();  
  10.         stdList.Add(new Student  
  11.         {  
  12.             Id = 1, FName = "Sachin", LName = "Tendulkar", Class = 1  
  13.         });  
  14.         stdList.Add(new Student  
  15.         {  
  16.             Id = 2, FName = "Saurav", LName = "Ganguly", Class = 2  
  17.         });  
  18.         stdList.Add(new Student  
  19.         {  
  20.             Id = 3, FName = "VVS", LName = "Laxman", Class = 3  
  21.         });  
  22.         stdList.Add(new Student  
  23.         {  
  24.             Id = 4, FName = "MS", LName = "Dhoni", Class = 4  
  25.         });  
  26.         return Json(stdList, JsonRequestBehavior.AllowGet);  
  27.     }  
  28. }  
  29. public class Student  
  30. {  
  31.     public int Id  
  32.     {  
  33.         get;  
  34.         set;  
  35.     }  
  36.     public string FName  
  37.     {  
  38.         get;  
  39.         set;  
  40.     }  
  41.     public string LName  
  42.     {  
  43.         get;  
  44.         set;  
  45.     }  
  46.     public int Class  
  47.     {  
  48.         get;  
  49.         set;  
  50.     }  
  51. }  
NgGrid View
  1. @{  
  2.     ViewBag.Title = "NgGrid";  
  3.     Layout = null;  
  4. }  
  5.   
  6. <h2>NgGrid</h2>  
  7.    <script src="~/Scripts/jquery-1.10.2.js"></script>  
  8.    <script src="~/Scripts/angular.js"></script>  
  9.    <script src="~/Scripts/ng-grid.min.js"></script>  
  10.    <script src="~/Scripts/Javascripts/Nggrid Ang.js"></script>  
  11.    <link href="~/Content/ng-grid.css" rel="stylesheet" />  
  12.    <style type="text/css">  
  13.     .gridStyle {  
  14.     border: 1px solid #d4d4d4;  
  15.     width: 400px;   
  16.     height: 300px  
  17. }  
  18. </style>  
  19. <div ng-app="Mygrid">  
  20.     <div ng-controller="gridCtrl">  
  21.         <strong>Filter:</strong><input type="text" ng-model="filterOptions.filterText" />  
  22.         <div class="gridStyle" ng-grid="ngGridView"></div>    
  23.   
  24.     </div>  
  25. </div>  
NggridAng.js 
  1. var MyApp = angular.module('Mygrid', ['ngGrid']);  
  2. MyApp.controller('gridCtrl', ['$scope', '$http', 'services', function (scope, http, ser)  
  3. {  
  4.     scope.filterOptions = {  
  5.         filterText: ''  
  6.     };  
  7.     ser.getStudentDetails()  
  8.         .success(function (response)  
  9.         {  
  10.             scope.persons = response;  
  11.         });  
  12.     scope.ngGridView = {  
  13.         data: 'persons',  
  14.         filterOptions: scope.filterOptions  
  15.     }  
  16. }])  
  17. MyApp.service('services', function ($http)  
  18. {  
  19.     this.getStudentDetails = function ()  
  20.     {  
  21.         var result = $http.get('Home/NgGridDetails');  
  22.         return result;  
  23.     };  
  24. });