Skip to content

Commit 4a684f4

Browse files
unicod3unicod3
committed
Implement Angular Crud for Product Controller
1 parent 8747957 commit 4a684f4

File tree

4 files changed

+191
-5
lines changed

4 files changed

+191
-5
lines changed

‎WebApiExcercise/Repository/ProductRepository.cs‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,18 @@ namespace WebApiExcercise.Repository
99
public class ProductRepository : IProductRepository
1010
{
1111

12-
private List<Product> _productTable;
12+
private List<Product> _productTable;
13+
private List<Supplier> _supplierTable;
14+
1315
public ProductRepository() {
1416
_productTable = TestDataHelper.GetMyProducts();
17+
_supplierTable = TestDataHelper.GetMySuppliers();
1518
}
1619

1720
public void Add(Product product)
1821
{
22+
product.Id = _productTable.LastOrDefault().Id + 1;
23+
product.Supplier = _supplierTable.Where(x => x.Id == product.SupplierId).SingleOrDefault();
1924
_productTable.Add(product);
2025
}
2126

@@ -45,6 +50,7 @@ public void Update(Product product)
4550
oldProduct.Name = product.Name;
4651
oldProduct.Price = product.Price;
4752
oldProduct.SupplierId = product.SupplierId;
53+
oldProduct.Supplier = _supplierTable.Where(x => x.Id == product.SupplierId).SingleOrDefault();
4854
}
4955
}
5056
}

‎WebApiExcercise/Views/Home/Product.cshtml‎

Lines changed: 59 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,62 @@
1-
2-
@{
3-
ViewBag.Title = "Product";
1+
@section Scripts{
2+
<script src="~/scripts/app/ProductClient.js"></script>
43
}
54

6-
<h2>Product</h2>
5+
<div class="container" ng-app="MyApp">
6+
<div ng-controller="ProductController">
7+
<h2>{{pageTitle}}</h2>
78

9+
<table class="table table-bordered table-striped table-responsive">
10+
<tr>
11+
<th>ID</th>
12+
<th>Name</th>
13+
<th>Supplier</th>
14+
<th>Price</th>
15+
<th> </th>
16+
</tr>
17+
<tr ng-repeat="supp in products">
18+
<td>{{supp.Id}}</td>
19+
<td>{{supp.Name}}</td>
20+
<td>{{supp.Supplier.Name}}</td>
21+
<td>R$ {{supp.Price}}</td>
22+
<td>
23+
<a class="text-primary" href="#" ng-click="edit(supp.Id)"><i class="glyphicon glyphicon-edit"></i> Edit</a>
24+
<a class="text-danger" href="#" ng-click="delete(supp.Id)"><i class="glyphicon glyphicon-remove"></i> Delete</a>
25+
</td>
26+
</tr>
27+
</table>
28+
29+
<h2>{{formTitle}}</h2>
30+
<form name="supplierForm" ng-submit="submitForm(Product)">
31+
<div class="row">
32+
<div class="form-group col-md-4">
33+
<label for="ID">ID</label>
34+
<input type="text" id="ID" class="form-control" placeholder="Product ID" ng-model="Product.Id" disabled>
35+
</div>
36+
</div>
37+
38+
<div class="row">
39+
<div class="form-group col-md-4">
40+
<label for="Name">Name</label>
41+
<input type="text" id="Name" class="form-control" placeholder="Product Name" ng-model="Product.Name" required>
42+
</div>
43+
</div>
44+
<div class="row">
45+
<div class="form-group col-md-4">
46+
<label for="Price">Price</label>
47+
<input type="text" id="Price" class="form-control" placeholder="Price" ng-model="Product.Price" required>
48+
</div>
49+
</div>
50+
<div class="row">
51+
<div class="form-group col-md-4">
52+
<label for="Supplier">Supplier</label>
53+
<select id="Supplier" class="form-control" ng-model="Product.SupplierId" ng-options="s.Id as s.Name for s in suppliers track by s.Id" required>
54+
<option value="">Choose Option</option>
55+
</select>
56+
</div>
57+
</div>
58+
<button type="submit" class="btn btn-default">Add/Update</button>
59+
<button type="reset" class="btn btn-default">Clear</button>
60+
</form>
61+
</div>
62+
</div>

‎WebApiExcercise/WebApiExcercise.csproj‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -173,6 +173,7 @@
173173
<Content Include="Content\bootstrap-theme.min.css.map" />
174174
<Content Include="Content\bootstrap-theme.css.map" />
175175
<None Include="scripts\jquery-1.10.2.intellisense.js" />
176+
<Content Include="scripts\app\ProductClient.js" />
176177
<Content Include="scripts\app\UserClient.js" />
177178
<Content Include="scripts\jquery-1.10.2.js" />
178179
<Content Include="scripts\jquery-1.10.2.min.js" />

‎WebApiExcercise/scripts/app/ProductClient.js‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
var MyModule = angular.module('MyApp', [])
2+
3+
4+
MyModule.controller('ProductController', ['$scope', 'ProductService', function ($scope, ProductService) {
5+
6+
$scope.pageTitle = "Product List";
7+
$scope.formTitle = "Product Form";
8+
9+
getAll();
10+
function getAll() {
11+
ProductService.getAll()
12+
.success(function (prods) {
13+
$scope.products = prods;
14+
ProductService.getAllSuppliers()
15+
.success(function (supps) {
16+
$scope.suppliers = supps;
17+
})
18+
.error(function (error) {
19+
$scope.status = 'Unable to load data: ' + error.message;
20+
console.log($scope.status);
21+
});
22+
})
23+
.error(function (error) {
24+
$scope.status = 'Unable to load data: ' + error.message;
25+
console.log($scope.status);
26+
});
27+
}
28+
29+
30+
31+
$scope.edit = function getSingle(Id) {
32+
ProductService.getSingle(Id)
33+
.success(function (supp) {
34+
$scope.Product = {};
35+
$scope.Product.Id = supp.Id;
36+
$scope.Product.Name = supp.Name;
37+
$scope.Product.Price = supp.Price;
38+
$scope.Product.SupplierId = supp.Supplier;
39+
})
40+
.error(function (error) {
41+
$scope.status = 'Unable to load data: ' + error.message;
42+
console.log($scope.status);
43+
});
44+
}
45+
46+
47+
$scope.delete = function deleteRecord(Id) {
48+
ProductService.delete(Id)
49+
.success(function () {
50+
alert("Deleted successfully!!");
51+
getAll();
52+
})
53+
.error(function (error) {
54+
$scope.status = 'Unable to load data: ' + error.message;
55+
console.log($scope.status);
56+
});
57+
}
58+
59+
$scope.submitForm = function submitForm(Product) {
60+
if (!Product.Id) {
61+
ProductService.add(Product)
62+
.success(function () {
63+
alert("Added successfully!!");
64+
getAll();
65+
resetForm();
66+
})
67+
.error(function (error) {
68+
$scope.status = 'Unable to load data: ' + error.message;
69+
console.log($scope.status);
70+
});
71+
} else {
72+
ProductService.update(Product)
73+
.success(function () {
74+
alert("Updated successfully!!");
75+
getAll();
76+
resetForm();
77+
})
78+
.error(function (error) {
79+
$scope.status = 'Unable to load data: ' + error.message;
80+
console.log($scope.status);
81+
});
82+
}
83+
}
84+
85+
function resetForm() {
86+
$scope.Product = {};
87+
$scope.Product.Id = '';
88+
$scope.Product.Name = '';
89+
$scope.Product.Price = '';
90+
$scope.Product.SupplierId = '';
91+
}
92+
}]);
93+
94+
95+
MyModule.factory('ProductService', ['$http', function ($http) {
96+
97+
var ProductService = {};
98+
ProductService.getAll = function () {
99+
return $http.get('/api/Product');
100+
}
101+
102+
ProductService.getAllSuppliers = function () {
103+
return $http.get('/api/Supplier');
104+
}
105+
106+
ProductService.getSingle = function (Id) {
107+
return $http.get('/api/Product/' + Id);
108+
}
109+
110+
ProductService.add = function (Product) {
111+
return $http.post('/api/Product', Product);
112+
}
113+
114+
ProductService.update = function (Product) {
115+
return $http.put('/api/Product', Product);
116+
}
117+
118+
ProductService.delete = function (Id) {
119+
return $http.delete('/api/Product/' + Id);
120+
}
121+
122+
return ProductService;
123+
124+
}]);

0 commit comments

Comments
 (0)