Angular JS i Web API

Odpowiedz Nowy wątek
2015-09-17 09:24
0

Hej.

Chciałbym prosić Was o pomoc w rozwiązaniu kolejnego problemu. Zrobiłem sobie prosty Web API controller w ASP .NET MVC


public class ValuesController : ApiController
    {
        private NORTHWNDEntities _entites = new NORTHWNDEntities();

         //GET api/values
        // GET all products from selected entity
        public List<Product> Get()
        {
            // disable proxy creation
            _entites.Configuration.ProxyCreationEnabled = false;

            var getProductsList = _entites.Products.ToList();
            return getProductsList;
        }

        // GET api/values/5
        // GET one specific product by ID
        public Product Get(int id)
        {
            // disable proxy creation
            _entites.Configuration.ProxyCreationEnabled = false;

            var getProductsListByID = _entites.Products.ToList().Find(p => p.ProductID == id);
            return getProductsListByID;
        }

    }

Znajdują się tam tylko dwie metody:
a) GetAll()
b) GetByID()

Pobieram dane z bazy danych.

Dograłem sobie Angulara do projektu.

Stworzyłem:

Module.js


var app;
(function () {
    app = angular.module("crudModule", []);
})();

var app2;
(function () {
    app2 = angular.module("crudModule2", []);
})(); 

Service.js


app.service('crudService', function ($http) {

    //Get single product
    this.getOneProduct = function (prodID) {
        return $http.get("/api/values/:" + prodID);
    }

    //Get All products
    this.getAllProducts = function () {
        return $http.get("/api/values");
    }
});

Controller.js


app.controller('crudController', function ($scope, crudService) {

    loadRecords();

    //Function to load all products records
    function loadRecords() {
        var promiseGet = crudService.getAllProducts(); //The MEthod Call from service

        promiseGet.then(function (pl) { $scope.Products = pl.data },
              function (errorPl) {
                  $log.error('failure loading products', errorPl);
              });
    }

    //Clear the Scope models
    $scope.clear = function () {
        $scope.ProductID = 0;
        $scope.ProductName = "";
        $scope.QuantityPerUnit = 0;
        $scope.UnitPrice = 0;
        $scope.UnitsInStock = 0;
    }
});

app2.controller('crudController2', function ($scope, crudService, $routeParams) {

    var productID = $routeParams.ProductID; // get productID from URL

    loadOneRecord(productID);

    //Function to load one record
    function loadOneRecord(productID) {
        var promiseGet = crudService.getOneProduct(productID); //The MEthod Call from service

        promiseGet.then(function (pl) { $scope.Products = pl.data },
              function (errorPl) {
                  $log.error('failure loading products', errorPl);
              });
    }

    //Clear the Scope models
    $scope.clear = function () {
        $scope.ProductID = 0;
        $scope.ProductName = "";
        $scope.QuantityPerUnit = 0;
        $scope.UnitPrice = 0;
        $scope.UnitsInStock = 0;
    }
});

Widok w którym wyświetlam wszystkie produkty z bazy Angularem: ( tutaj dziala wszystko ok )


@{
    ViewBag.Title = "DisplayAngular";
}

@section scripts{
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/Custom/Module.js"></script>
    <script src="~/Scripts/Custom/Service.js"></script>
    <script src="~/Scripts/Custom/Controller.js"></script>
}

<html ng-app="crudModule">
@{
    ViewBag.Title = "Index";
}

<h2>Get All Products</h2>
<body>
    <table id="tblContainer" ng-controller="crudController">
        <tr>
            <td>
                <div id="dvcollection">
                    <table id="tblcollections" cellpadding="10" cellspacing="10">
                        <thead>
                            <tr>
                                <th>ProductID</th>
                                <th>ProductName</th>
                                <th>QuantityPerUnit</th>
                                <th>UnitPrice</th>
                                <th>UnitsInStock</th>
                            </tr>
                        </thead>
                        <tbody ng-repeat="prod in Products">
                            <tr ng-click="get(prod)">
                                <td> <span>{{prod.ProductID}}</span></td>
                                <td> <span>{{prod.ProductName}}</span></td>
                                <td> <span>{{prod.QuantityPerUnit}}</span></td>
                                <td> <span>{{prod.UnitPrice}}</span></td>
                                <td> <span>{{prod.UnitsInStock}}</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

Natomiast nie udaje mi się wyświetlić jakoś wybranego produktu po ID. Nie wiem jak to ID przekazać z widoku do controllera. Jak to zrobić?


Pozostało 580 znaków

2015-09-17 09:52
1

Rozumiem ze ta metoda get(prod) w widoku ma byc odpowiedzialna za wyswietlenie szczegolow pojedynczego produktu?
Wtedy musisz utworzysz sobie ta metode w kontrolerze crudController na scopie: $scope.get = function(prod) { ... }

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0