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ć?