基於Angular+WebAPI+OData的增刪改查

時間 2019-11-10

標籤基於 angular+webapi+odata angular webapi odata 增刪欄目 AngularJS 简体版

原文原文鏈接

對於在ASP.NET WebAPI中怎麼使用OData,
已經在我前面的日誌中的說明，前端

在ASP.NET Web API中使用OData

在這個示例中。我新建了一個Order的實體，
在前端使用Angular進行增長，刪除，修改，查詢，分頁

下面是Order的實體結構，有No,Total,Data3個屬性
public class Order
{
    public int Id { get; set; }
    public string No { get; set; }
    public decimal Total { get; set; }
    public DateTime Date { get; set; }
}
而後咱們對其進行OData路由進行註冊
ODataModelBuilder builder = new ODataConventionModelBuilder();
builder.EntitySet<Order>("Orders");
config.MapODataServiceRoute("ODataRoute", null, builder.GetEdmModel());
web

再建立OData的WebAPI Controller
數據庫

而後咱們用Code First生成到數據庫
這樣。咱們就能夠對基進行測試，(這裏測試用的是Postman工具)
1。增長一個Order

查詢這個Order

修改這個Order

刪除這個Order

一切都是正常運行

接下來咱們構建前端AngularJS
開始咱們在頁面引用AngularJS
<script src="Scripts/angular.js"></script>
而後申明一個Module
var mainModule = angular.module("MainApp", []);
由於WebAPI咱們能夠把他當作一個服務，因此咱們能夠這樣寫
api

//申明Module

var mainModule = angular.module("MainApp", []);

//建立Order的增刪改查Angular服務

mainModule.service("Order", ["$rootScope", "$http", function ($rootScope, $http) {

//page:當前頁碼

//filter：查詢條件

var service = { orders: [], page: 1, filter: "" };

//根據頁碼，查詢條件，拿到當前的Orders集合

service.getOrders = function () {

//OData能夠經過odata/Orders?$skip=分頁跳過的記錄數&$filter=查詢條件

//經過這樣的GET請求，能夠拿到當前查詢條件下的第幾頁數據

$http.get("odata/Orders?$skip=" + ((this.page - 1) * 3).toString() + this.filter)

.success(function (data, status, headers, config) {

service.orders = data.value;

//setvice.nextLink = data["@odata.nextLink"];

$rootScope.$broadcast('orders.update');

})

.error(function (data, status, headers, config) { });

};

//增長Order,傳入Order對象Post到odata/Orders

service.addOrder = function (order) {

$http.post("odata/Orders", order)

.success(function (data, status, headers, config) {

service.orders.push(data);

})

.error(function (data, status, headers, config) { });

};

//刪除Order,用Delete請求odata/Orders(id)

service.deleteOrder = function (id) {

$http.delete("odata/Orders(" + id + ")")

.success(function (data, status, headers, config) {

service.getOrders();

})

.error(function (data, status, headers, config) { });

};

接下來聲明Controller

//申明Order Controller,注入Order服務

mainModule.controller("orderList", ["$scope", "Order", function ($scope, Order) {

$scope.$on("orders.update", function (event) {

$scope.orders = Order.orders;

})

//增長的order對象

$scope.order = {};

//修改的order對象

$scope.uOrder = {};

//對列表進行查詢的對象

$scope.whereOrder = {};

//上一頁

$scope.goBefore = function () {

if (Order.page > 1) {

Order.page -= 1;

Order.filter = $scope.getFilterString();

Order.getOrders();

}

}

//下一頁

$scope.goNext = function () {

Order.page += 1;

Order.filter = $scope.getFilterString();

Order.getOrders();

}

//獲得根據查詢條件拿到Order

$scope.getOrders = function () {

Order.filter = $scope.getFilterString();

Order.getOrders();

}

//生成查詢條件字符串

$scope.getFilterString = function () {

var filterString = "&$filter=";

var filterArray = [];

if ($scope.whereOrder.No != undefined && $scope.whereOrder.No!="") filterArray.push("No eq '" + $scope.whereOrder.No + "'");

if ($scope.whereOrder.geTotal != undefined && $scope.whereOrder.geTotal.toString() != "") filterArray.push("Total ge " + $scope.whereOrder.geTotal);

if ($scope.whereOrder.leTotal != undefined && $scope.whereOrder.leTotal.toString() != "") filterArray.push("Total le " + $scope.whereOrder.leTotal);

filterString += filterArray.join(" and ");

if (filterString == "&$filter=") filterString = "";

console.log(filterString);

return filterString;

}

//增長Order，調用上面的Order Service

$scope.addOrder = function () {

Order.addOrder($scope.order);

}

//刪除order，調用上面的Order Service

$scope.deleteOrder = function (id) {

Order.deleteOrder(id);

}

//修改order

$scope.editOrder = function (order) {

$scope.uOrder = order;

}

//把修改的Order更新到服務器，調用上面的Order Service

$scope.putOrder = function () {

Order.putOrder($scope.uOrder)

}

Order.getOrders();

$scope.page = Order.page;

$scope.orders = Order.orders;

}]);

對應的HTML Templater,因爲使用純HTML寫，因此CSS就沒有了

<body ng-app="MainApp">

<div ng-controller="orderList">

<fieldset>

<legend>List Orders</legend>

<div>

<span>查詢條件</span>

No:<input type="text" ng-model="whereOrder.No" />

Total:<input type="number" ng-model="whereOrder.geTotal" />

<input type="number" ng-model="whereOrder.leTotal" />

<input type="button" value="Search" ng-click="getOrders()" />

</div>

<table border="1">

<thead>

<tr>

<th>ID</th>

<th>No</th>

<th>Total</th>

<th>Date</th>

<th colspan="2">Action</th>

</tr>

</thead>

<tbody>

<tr ng-repeat="item in orders">

<td>{{item.Id}}</td>

<td>{{item.No}}</td>

<td>{{item.Total}}</td>

<td>{{item.Date | date : 'yyyy-MM-dd'}}</td>

<td><a href="#nogo" ng-click="editOrder(item)">Edit</a></td>

<td><a href="#nogo" ng-click="deleteOrder(item.Id)">Delete</a></td>

</tr>

</tbody>

</table>

<div>

<input type="button" ng-click="goBefore()" value="上一頁" />

<input type="button" ng-disabled="orders.length<3" ng-click="goNext()" value="下一頁" />

</div>

</fieldset>

<fieldset>

<legend>Add Order</legend>

<div>

<span>No:</span><input type="text" ng-model="order.No" /><br />

<span>Total:</span><input type="number" ng-model="order.Total" /><br />

<span>Date:</span><input type="date" ng-model="order.Date" /><br />

<input type="button" ng-click="addOrder()" value="Add Order" />

</div>

</fieldset>

<fieldset>

<legend>Update Order</legend>

<div>

<input type="hidden" ng-model="uOrder.Id" />

<span>No:</span><input type="text" ng-model="uOrder.No" /><br />

<span>Total:</span><input type="number" ng-model="uOrder.Total" /><br />

<span>Date:</span><input type="date" ng-model="uOrder.Date" /><br />

<input type="button" ng-click="putOrder()" value="Update Order" />

</div>

</fieldset>

</div>

</body>