How to bind grid using angularjs in asp.net mvc?

How to bind grid using angularjs in asp.net mvc?, someone asked me to explain?

In this article we will discuss how to bind the grid using angularjs in asp.net mvc c#. On the page load bind the data from database and display using angular ui datagrid.

Create a controller in a project named as product and create a json method Get data(GetProdut() ). 

Here I am using Northwind database. You can download it from following link.

Download Northwind Database

Open Microsoft sql management studio and right click on the database and attach it.

Step 1: Create an ado.net entity data model using table Product and generate entity for that.

Step 2: Right click on the "Controllers" folder and add "Product" controller. Copy and paste the following code.

  public class ProductController : Controller
    {
        // GET:/Product/
        models db = new models();
        public ActionResult Index()
        {
            return View();
        }

       public JsonResult GetProduct()
       {
            var products = (from product in db.Products.AsEnumerable()
                            select new
                            {
                                Name = product.ProductName,
                                UnitPrice =product.UnitPrice,
                                QuantityPerUnit= product.QuantityPerUnit
                           }).Distinct().ToList();

           return Json(products, JsonRequestBehavior.AllowGet);
        }
    }

Step 3:  Copy and paste the following code in the design page index.cshtml. I used cdn for angularjs and jQuery ui datagrid.

@{
    ViewBag.Title = "Angular UI Grid Tutorial";
}
<style>
    .grid {
        width: 50%;
    }
</style>
<h2>Angular UI Grid</h2>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<script type="text/javascript">
    var app = angular.module('mvcapp', ['ngTouch', 'ui.grid']);
    app.controller('DemoController', function ($scope, $http) {
        $scope.gridOptions = {
            enableSorting: true,
            rowHeight: 100,
            columnDefs: [
              { field: 'Name' },
              { field: 'UnitPrice' },
              { field: 'QuantityPerUnit' }
                          ]
        };
        $http.get('/Product/GetProduct').success(function (data) {
            $scope.gridOptions.data = data;
        });
    });
</script>

<div ng-app="mvcapp" ng-controller="DemoController">
    <div id="grid1" ui-grid="gridOptions" class="grid"></div>
</div> 

Output:

angular ui datagrid

Post your comments / questions