ASP.NET Web API接受AngualrJS的QueryString的兩種方式

 

ASP.NET Web API如何接受來自AngualrJS的QueryString呢？本篇體驗兩種方式。

 

第一種方式：http://localhost:49705/api/products?search=GDN

 

這種方式是QueryString原生的格式。

 

首先，把當前的域名和端口號放到一個自定義的module中去。

 

1 (function () {
2     "use strict";
3 
4     angular.module("custommodule", ["ngResource"])
5         .constant("appSettings", {
6             serverPath: "http://localhost:49705/"
7         });
8 }());

 

以上，依賴ngResource這個module，這個module在angular-resource.js文件中，注意須要引用該文件。

 

接着，經過factory的方式爲custommodule建立一個自定義service。

 

(function () {
    "use strict";

    //經過工廠的方式建立了一個服務
    angular.module("custommodule")
        .factory("productResource", ["$resource", "appSettings", productResouce]);

    function productResouce($resource, appSettings) {
        return $resource(appSettings.serverPath + "/api/products");
    }
}());

 

以上，productResource這個服務返回的是經$resource封裝的完整的API請求路徑。

如今，某個controller須要使用productResource這個服務。

 

(function () {
    "use strict";
    angular
        .module("productManagement")
        .controller("ProductListCtrl",
                     ProductListCtrl);

    function ProductListCtrl(productResource) {
        var vm = this;

        vm.searchCriteria = "GDN";

        productResource.query({search: vm.searchCriteria},function (data) {
            vm.products = data;
        });
    }
}());

 

以上，從前端傳來名稱爲search的QueryString。

 

後端ASP.NET Web API中，action方法的形參名稱必須也是search。

 

public IEnumerable<Product> Get(string search)
{
    var productRepository = new ProductRepository();
    var products = productRepository.Retrieve();
    return products.Where(p => p.ProductCode.Contains(search));
}

 

WebApiConfig類對應的設置爲：

 

config.Routes.MapHttpRoute(
    name: "DefaultApi",
    routeTemplate: "api/{controller}/{id}",
    defaults: new { id = RouteParameter.Optional }
);

 

此時，前端是以http://localhost:49705/api/products?search=GDN這種方式請求數據的。

 

若是咱們想以http://localhost:49705/api/products/GDN這種方式請求數據呢？

 

 第二種方式：http://localhost:49705/api/products/GDN

 

這種方式須要作一些路由設置。

 

須要讓AngularJS知道，在products/後面的這個位置傳的值是賦值給search這個QueryString的。

 

也要讓ASP.NET Web API知道，當讀取products/後面的這個值後，是要賦值給路由中的search這個變量的。

 

如何讓AngularJS的路由符合格式呢？

 

function productResouce($resource, appSettings) {
    return $resource(appSettings.serverPath + "/api/products/:search");
}

 

如何讓ASP.NET Web API的路由同AngualrJS對應起來呢？

 

首先，要在路由中容許有search這個QueryString。

 

config.Routes.MapHttpRoute(
    name: "DefaultApi",
    routeTemplate: "api/{controller}/{search}",
    defaults: new { search = RouteParameter.Optional }
);

 

而後，在Action方法中接受search這個QueryString。

 

public IEnumerable<Product> Get(string search)
{
    var productRepository = new ProductRepository();
    var products = productRepository.Retrieve();
    return products.Where(p => p.ProductCode.Contains(search));
}

 

這時候，前端是以http://localhost:49705/api/products/GDN這種方式請求的。

總結：

 

● 若是是想獲取默認狀況下的QueryString，只須要保證先後段的查詢變量一致就行了，好比這裏的search
● 若是想獲取/等自定義格式下的QueryString,前端AngualrJS須要以相似/api/products/:search這樣的方式定義路由，後端ASP.NET Web API中也須要把search做爲路由中的一個變量，在config.Routes.MapHttpRoute方法中設置