?

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方法中設置

?

轉載于:https://www.cnblogs.com/darrenji/p/4916284.html

總結

以上是生活随笔為你收集整理的ASP.NET Web API接受AngualrJS的QueryString的两种方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。