對於在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());
再創建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我們可以把他看成一個服務，所以我們可以這樣寫
//申明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) { }); };
//申明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; }]);
<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>
然後運行頁面，得到如下效果
增加Order
查詢Order
過濾Order
刪除ID爲1的Order
分頁查詢
源代碼下載
Demo1_20150708214657.rar
引用資源
http://www.asp.net/web-api
Supporting OData Query Options in ASP.NET Web API 2
轉載請註明出處
http://giantliu.com/