AngularJS使用OData請求ASP.NET Web API資源的思路

標籤：

 

本篇整理AngularJS使用OData請求ASP.NET Web API資源的思路。

 

首先給ASP.NET Web API插上OData的翅膀，通過NuGet安裝OData.

 

然後，給controller中需要使用OData的Action加上EnableQuery特性，並讓Action方法返回IQueryable<T>類型。

 

public class ProductsController : ApiController{    // GET: api/Products    [EnableQuery()]    public IQueryable<Product> Get()    {        var productRepository = new ProductRepository();        return productRepository.Retrieve().AsQueryable();    }        ...}

 

以上，EnableQuery特性還可以做出很多配置，比如：

 

[EnableQuery(PageSize=50)]
[EnableQuery(AllowedQueryOptons=AllowedQueryOptions.Skip | AllowedQueryOptions.Top)]

在前端，可能先要自訂一個module，把uri路徑作為這個module的一個常量。

 

(function () {    "use strict";    angular.module("custommodule", ["ngResource"])        .constant("appSettings", {            serverPath: "http://localhost:49705/"        });}());

 

ngResource這個module來自於angular-resource.js檔案，需要引用。

 

接著可能要通過factory的方式，為custommodule這個module添加一個自訂service。

 

function () {    "use strict";    //通過工廠的方式建立了一個服務    angular.module("custommodule")        .factory("productResource", ["$resource", "appSettings", productResouce]);    function productResouce($resource, appSettings) {        return $resource(appSettings.serverPath + "/api/products/:search");    }}());

 

以上，productResource這個service返回一個完整的api請求路徑。

 

接著需要把productResource這個service注入到某個controller中去。這時候就可以把OData的文法放在一個object對象傳遞給服務端。

 

(function () {    "use strict";    angular        .module("productManagement")        .controller("ProductListCtrl",                     ProductListCtrl);    function ProductListCtrl(productResource) {        var vm = this;        vm.searchCriteria = "GDN";        productResource.query({ $orderby: "Price desc" }, function (data) {            vm.products = data;        });    }}());

 

最終呈現出的OData相關uri大致是這樣：http://localhost:52293/api/products?$filter=Price+gt+5&$orderby=Price

 

基本就是這個思路

 

有關OData的Operation:

 

$top
$skip
$orderby
$filter
$select

$filter的一些操作符：

 

$filter: "Price eq 10"
$filter: "Price ne 10"
$filter: "Price gt 10"
$filter: "Price ge 10" 大於等於
$filter: "Price lt 10"
$filter: "Price le 10" 小於或等於
$filter: "Price gt 10 and Price lt 20"
$filter: "Price eq 10 or Price eq 20"
$filter: "(Price lt 10) and not (Price eq 0)"

$filter的一些函數：

 

$filter: "Starswith(ProductCode,‘GDN‘)"
$filter: "endswith(ProductCode, ‘001‘)"
$filter: "contains(ProductCode, ‘GDN‘)"
$filter: "tolower(ProductCode) eq ‘001a‘"
$filter: "toupper(ProductCode) eq ‘001B‘"

 

$filter其它：

 

運算子：Additon, subtraction
日期：year, month, day, now, etc
運算：round, floor, etc
位置：distance, length, etc
Lamda:any, all
可空：null, etc

 

AngularJS使用OData請求ASP.NET Web API資源的思路