对于在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/