你的位置:首页 > ASP.net教程

[ASP.net教程]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方法中设置