ASP.NET Web API接受AngualrJS的QueryString的两种方式

 

ASP.NET Web API如何接受来自AngualrJS的QueryString呢？本篇体验两种方式。

 

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

 

这种方式是QueryString原生的格式。

 

首先，把当前的域名和端口号放到一个自定义的module中去。

 

(function () {
    "use strict";

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

 

以上，依赖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方法中设置