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

前言

使用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)
{
    ....
}

不过很不幸，这样不行，接口被调用的时候并没有值传过来！

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

$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 合并了，那么这个问题是不是就不存在了呢？但愿如此，要不问题就更复杂了...