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