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方法中设置
相关文章
- ASP.NET MVC之国际化(十一)
- WCF 无法激活服务,由于它不支持 ASP.NET 兼容性。已为此应用程序启用了 ASP.NET 兼容性
- ASP.NET 6 修改 WebRoot 路径
- NSwag在asp.net web api中的使用,基于Global.asax
- Authentication and Authorization in ASP.NET Web API
- C#编译器优化那点事 c# 如果一个对象的值为null,那么它调用扩展方法时为甚么不报错 webAPI 控制器(Controller)太多怎么办? .NET MVC项目设置包含Areas中的页面为默认启动页 (五)Net Core使用静态文件 学习ASP.NET Core Razor 编程系列八——并发处理
- Asp.Net配置Web.Config更改默认上传文件大小限制!(适用于win7win2003的IIS)
- asp.net请求流程
- 你需要知道的这几种 asp.net core 修改默认端口的方式
- ASP.NET Web API中的参数绑定总结
- ASP.NET Web API中通过URI显示实体中的部分字段
- 前端使用AngularJS的$resource,后端ASP.NET Web API,实现增删改查
- 对一个前端AngularJS,后端OData,ASP.NET Web API案例的理解
- 在ASP.NET MVC下限制同一个IP地址单位时间间隔内的请求次数
- 在ASP.NET MVC中通过勾选checkbox来更改select的内容
- 在ASP.NET MVC中使用Knockout实践05,基本验证
- ASP.NET MVC & Web API Brief Introduction
- 基于ASP.NET MVC+MySQL开发的一套(Web)图书管理系统【100010294】
- 合适么?现在学ASP.NET Core入门编程……
- 保护ASP.NET 应用免受 CSRF 攻击
- 怎么成为asp.net大神!!!!!!!!!!!!!!!!!!!怎么成为asp.net大神!!!!!!!!!!!!!!!!!!!
- Asp.net web form 动态生成控件的注意事项
- C#与.NET Framework c#编程语言,和java是一样的。(c#,java) -->javaweb,asp.net