CODEWITHSUNDEEP
c#angularjsjsonasp.net-mvc
AT-2017
AT-2017

Reputation: 3149

Data Retrieval and Filering From Database Using AngularJs

I am trying to learn and work as well with AngularJs. Finally made a sample of it but unable to retrieve data from database. I am trying to filter product data and tried the following:

ASP.NET MVC Controller:

DemoEntities db = new DemoEntities();
public JsonResult GetProducts()
{
   var result = db.Products.ToList();
   return Json(result, JsonRequestBehavior.AllowGet);
}

ProductClient.js: Updated

var ProductApp = angular.module('ProductApp', []); //Created the module

ProductApp.controller('ProductController', function ($scope, ProductService) { //The controller here
    $scope.Product = null;

    ProductService.GetProducts().then(function (d) { //No parameter passed here
        $scope.Product = d.data; 
    }, function () {
        alert('Failed');
    });
});

ProductApp.factory('ProductService', function ($http) { //The product service
    var factory = {};

    factory.GetProducts = function () {
        return $http.get('/Products/GetProducts'); //The ASP.NET MVC controlled defined
    }
    return factory;
});

Index.cshtml:

@{
    ViewBag.Title = "Tutorial - AngularJs";
}

@section scripts{

    <script src="~/Scripts/angular.js"></script>
    <script src="~/AngularFile/ProductClient.js"></script>
}

<h2>Home</h2>
<div ng-app="ProductApp" class="container">
    <br />
    <br />
    <input type="text" class="input-lg" placeholder="Search Product" ng-model="searchProduct" />
    <br />
    <div ng-controller="ProductController">
        <table class="table">
            <tr>
                <td>{{ Product.ProductName }}</td>
                <td>{{ Product.Details }}</td>
                <td>{{ Product.Price }}</td>
                <td>{{ Product.Stock }}</td>
            </tr>
        </table>
    </div>
</div>

The below is a screenshot of the sample project and it doesn't show up anything. Am I missing something and unable to figure out?

Note: Apologies to ask this novice question and stuck with it for hours.

Sample AngularJs

Upvotes: 2

Views: 135

Answers (1)

AT-2017
AT-2017

Reputation: 3149

I was really silly enough to figure out that I missed the ng-repeat. The following solved it:

<div ng-controller="ProductController">
   <table class="table" ng-repeat="m in Product">
      <tr>
         <td>{{ m.ProductName }}</td>
         <td>{{ m.Details }}</td>
         <td>{{ m.Price }}</td>
         <td>{{ m.Stock }}</td>
      </tr>
   </table>
</div>

Upvotes: 1

Related Questions