美文网首页
使用AngularJS向Web API提交多项复杂参数的解决方案

使用AngularJS向Web API提交多项复杂参数的解决方案

作者: 显卡84du | 来源:发表于2016-08-23 21:37 被阅读485次

    前言

    使用AngularJS的 $http 组件向 ASP.NET MVC 的 Web API 交互数据还是挺方便的,一般来说,使用$http向后台 post 一个数据可以像这样写:

    $http.post(url, product);
    

    对应的后台:

    public IHttpActionResult PostProduct(Product product)
    {
        ....
    }
    

    API 的后台会自动将(对象)参数中的值自动对应,供后续使用。

    遇到的问题

    不过今天遇到了一个稍显复杂的场景,后台需要接收另外一个参数,而原有 Product 对应的类又不能修改,怎么办呢?第一时间想到的是把接口改为这样:

    public IHttpActionResult PostProduct(Product product, Category category)
    {
        ....
    }
    

    不过很不幸,这样不行,接口被调用的时候并没有值传过来!
    <br />

    对了,补充一点,前端相应的要这么修改一下:

    $http.post(url, { product: product, category: category });
    

    好了,问题说明白了,同样的场景,在 ViewController 中是可以正常的工作的,也就是接受多个参数,而到了 Web API中就不好使了。

    尝试的方案

    其实这样的问题场景应该很常见,所以Google一下,Stackoverflow中有很多解决方案,简单看了一下,不外乎以下几种:

    • 使用 JSON 序列化
    • 使用 [FromBody][FromUri] 注解 (参考1参考2
    • 其他

    不过以上的方案代码显得不那么优雅,甚至有些ugly了,代码就不贴了,感兴趣可以自行搜索。

    问题根源和解决方案

    其实,回过头来思考一下,这个问题产生的原因其实很简单:

    ASP.NET Web API 遵循的是RESTful Web API 设计风格,也就是实现了 CRUD 语义的接口。从设计实现上来说微软本身就是这么支持和实现的。

    既然如此,那我们就从这点上来考虑。
    最基本的用法上,后台接口是能接收复杂对象的,那么,将多个参数放在一个对象里就解决了,在不修改原有哪些基础类的前提下,定义一个 Model 类,把几个需要接受的参数类扔进去就完事儿了,代码风格也和原来相近,还是熟悉的味道。

    public class Model
    {
        public Product product { get; set; }
        public Category category { get; set; }
    }
    

    后台代码:

    public IHttpActionResult PostProduct(Model model)
    {
        ....
    }
    

    好了,问题解决,我认为这是一种比较科学的方案,本身也符合 Web API 的常规使用习惯,代码写起来也不啰嗦。
    最后的疑问,在新版的 ASP.NET MVC 中, Web API 貌似和 ViewController 合并了,那么这个问题是不是就不存在了呢?但愿如此,要不问题就更复杂了...

    相关文章

      网友评论

          本文标题:使用AngularJS向Web API提交多项复杂参数的解决方案

          本文链接:https://www.haomeiwen.com/subject/jjensttx.html