Using jQuery to POST [FromBody] parameters to Web API

时间2013-04-04 00:28:17 Encosia原文 http://encosia.com/using-jquery-to-post-frombody-parameters-to-web-api/

ASP.NET Web API has been one of my favorite recent additions to ASP.NET. Whether you prefer a RESTful approach or something more RPC-oriented, Web API will do just about anything you need . Even if you’re still using ASP.NET WebForms, Web API still has you covered  – a nice example of the “One ASP.NET” philosophy that’s finally beginning to come together.

However, ASP.NET Web API throws an unintuitive curveball at you when you want to accept simple primitive types as parameters to POST methods. Figuring this issue out is particularly confusing because it’s one of the rare parts of Web API that violates the principle of least astonishment .

Because of that, using jQuery to interact with those methods requires a slight contortion that seems strange at first, but makes sense once you understand why it’s necessary. In this post, I’ll briefly describe the underlying issue and show you how jQuery can be convinced to work around the issue.

POSTing primitive parameters to Web API

There are three things you need to know about Web API if you want to go the route of POSTing a primitive type (e.g. string, int, or bool) to a method. For example, say you’re working with this straightforward POST method in a Web API controller named ValuesController :

// POST api/values
public string Post(string value) {
return value;
}

You might try POSTing a value into that Web API method using a standard jQuery$.post , like this:

$.post('/api/values', { value: 'Dave' });

If you inspect the server’s response to that request, you’ll be greeted with a bewildering 404 error:

Confronted with that response, it’s only natural to treat the problem as an issue with your routing configuration and debug from there, but that’s not the issue.

1. Parameters must be marked as [FromBody]

As it turns out, the reason for that 404 error isn’t a routing problem. ASP.NET correctly identifies our  ValuesController as the controller to handle a POST to/api/values , but it can’t locate an acceptable method to process the request.

The reason for that is a twofold mismatch between the required parameter that Web API expects to accompany requests to our Post  method and what we sent. The first of those mismatches is that the method’s parameter must be decorated with the[FromBody] attribute.

[FromBody] directs Web API to search for the parameter’s value in the body of a POST request. Adding that directive to our method is easy enough:

// POST api/values
public string Post([FromBody]string value) {
return value;
}

I can’t say that I understand why this extra hassle is necessary, especially since it wasn’t required in WCF Web API and preliminary versions of ASP.NET Web API , but it’s easy enough as long as you’re aware that it needs to be present.

Adding [FromBody] fixes our 404 error, but things unfortunately still aren’t working quite right. Making the same request to it again works, but the value parameter is coming back as null now instead of the provided value:

2. Only one parameter per method

Speaking of the parameters to our method, another potentially confusing thing about accepting [FromBody] parameters is that there can be only one .

Attempting to accept multiple parameters from the POST body will result in a (refreshingly decipherable) server-side error along these lines:

Can’t bind multiple parameters (‘foo’ and ‘bar’) to the request’s content.

It’s possible to circumvent this limitation by using manual parsing techniques, but that seems antithetical to Web API and model binding to me. If you want Web API to automatically convert POST data to your [FromBody] input parameter, you have to limit yourself to only a single parameter.

I believe the thinking here is that, especially in a RESTful API, you’ll want to bind data to the single  resource  that a particular method deals with. So, pushing data into several loose parameters isn’t the sort of usage that Web API caters to.

This limitation can be a bit confusing when you’re coming from WebForms or MVC though, and trying work around it feels like going against the grain of the framework. So, if I need to accept more than one POST parameter, I just define a quick view model.

In other words, don’t try to do this:

public string Post([FromBody]string FirstName,
[FromBody]string LastName) {
return FirstName + " " + LastName;
}

Instead, work with the framework and do something like this if you need to accept more than a single parameter:

// DTO or ViewModel? Potato or potato, IMO.
public class PersonDTO {
public string FirstName { get; set; }
public string LastName { get; set; }
}   public string Post(PersonDTO Person) {
return Person.FirstName + " " + Person.LastName;
}
3. [FromBody] parameters must be encoded as =value

The final hurdle remaining is that Web API requires you to pass  [FromBody]parameters in a particular format. That’s the reason why our value parameter was null in the previous example even after we decorated the method’s parameter with[FromBody] .

Instead of the fairly standard key=value encoding that most client- and server-side frameworks expect, Web API’s model binder expects to find the [FromBody]values in the POST body without a key name at all. In other words, instead ofkey=value , it’s looking for =value .

This part is, by far, the most confusing part of sending primitive types into a Web API POST method. Not too bad once you understand it, but terribly unintuitive and not discoverable.

What not to do

Now that we’ve covered what you need to know about the server-side code, let’s talk about using jQuery to POST data to [FromBody] parameters. Again, here’s the Web API method that we’re trying to POST data into:

// POST api/values
public string Post([FromBody]string value) {
return value;
}

You’ll have a hard time finding a  jQuery $.post (or $.ajax ) example that conforms to the =value  encoding approach. Typically, platform-agnostic jQuery documentation and tutorials suggest that one of these two approaches should work:

// Value will be null.
$.post('api/values', value);   // Value will be null.
$.post('api/values', { key: value });

Unfortunately, neither of those work with Web API in the case of [FromBody]parameters (the latter would work to send an object, rather than a single primitive value). In both cases, our method will be invoked, but the model binder won’t assign anything to  value and it will be null .

Making it work

There are two ways to make jQuery satisfy Web API’s encoding requirement. First, you can hard code the = in front of your value, like this:

$.post('api/values', "=" + value);

Personally, I’m not a fan of that approach. Aside from just plain looking kludgy, playing fast and loose with JavaScript’s type coercsion is a good way to find yourself debugging a “wat” situation .

Instead, you can take advantage of how jQuery encodes object parameters to$.ajax , by using this syntax:

$.post('api/values', { '': value });

If the data parameter has properties with empty string keys, jQuery serializes those properties in the form of =value . And, that’s exactly what we need to make Web API happy:

相关主题
如果你感兴趣

喜 欢 收 藏

分享该文章

分享到

该来源最新文章

asp.net web api [FromBody]参数的更多相关文章

  1. ASP.NET Web API 通过参数控制返回类型(JSON|XML)

    一个很实用的技巧,可以在访问web api服务的时候指定返回数据的格式类型,比如 json 或者 xml. 因为 web api 默认返回的是XML格式,但是现在json 比较流行,同时网上也有其他的 ...

  2. Asp.Net Web API 2第十六课——Parameter Binding in ASP.NET Web API(参数绑定)

    导航 阅读本文之前,您也可以到Asp.Net Web API 2 系列导航进行查看 http://www.cnblogs.com/aehyok/p/3446289.html. 本文主要来讲解以下内容: ...

  3. ASP.NET Web API中的参数绑定总结

    ASP.NET Web API中的action参数类型可以分为简单类型和复杂类型. HttpResponseMessage Put(int id, Product item) id是int类型,是简单 ...

  4. Parameter Binding in ASP.NET Web API(参数绑定)

    Parameter Binding in ASP.NET Web API(参数绑定) 导航 阅读本文之前,您也可以到Asp.Net Web API 2 系列导航进行查看 http://www.cnbl ...

  5. ASP.NET Web API 2 之参数验证

    Ø  前言 目前 C# 比较流行使用 ASP.NET Web API 来承载 Web 接口,提供与客户端之间的数据交互,现在的版本已经是 2.0 了.既然是接口就少不了对输入参数的验证,所以本文主要探 ...

  6. 让ASP.NET Web API支持$format参数的方法

    在不使用OData的情况下,也可以让ASP.NET Web API支持$format参数,只要在WebApiConfig里添加如下三行红色粗体代码即可: using System; using Sys ...

  7. [转]让ASP.NET Web API支持$format参数的方法

    本文转自:http://www.cnblogs.com/liuzhendong/p/4228592.html 在不使用OData的情况下,也可以让ASP.NET Web API支持$format参数, ...

  8. ASP.NET Core 中文文档 第二章 指南 (09) 使用 Swagger 生成 ASP.NET Web API 在线帮助测试文档

    原文:ASP.NET Web API Help Pages using Swagger 作者:Shayne Boyer 翻译:谢炀(kiler) 翻译:许登洋(Seay) 对于开发人员来说,构建一个消 ...

  9. ASP.NET Web API - ASP.NET MVC 4 系列

           Web API 项目是 Windows 通信接口(Windows Communication Foundation,WCF)团队及其用户激情下的产物,他们想与 HTTP 深度整合.WCF ...

随机推荐

  1. 如何实现标准TCODE的屏幕增强

    如何实现标准TCODE的屏幕增强(HOWTO:Implement a screen exit to a standard SAP transaction) Introduction SAP provi ...

  2. 玩转无线电 -- GPS Hacking (上)

    0x00 序 GPS Hacking 在过去几年的安全会议上一直都是很受关注的议题. 但往往因为内容太过学术化, 所需设备成本太高. 让许多感兴趣的朋友苦于无法入门. 直到GPS-SDR-SIM 这类 ...

  3. ubuntu系统安装mongodb

    安装mongodb sudo apt-get install mongodb ... ... 设置客户端连接 打开文件/etc/mongodb.conf  注意权限 修改 bind_ip=127.0. ...

  4. nno_setup制作升级包必须面临的几个问题 2

    这两天的时间一直在制作应用程序的升级包,期间碰到一些问题这里一并记录下来,相信这是制作升级包必须面临和解决的问题: 1. 升级包安装程序如何不再产生新的安装.卸载程序 Inno_setup中AppId ...

  5. Makefile学习(1) arm-linux-ld arm-linux-objcopy arm-linux-objdump

    记录自己所学的点点滴滴O(∩_∩)O哈哈~ makefile: link.bin: start.o main.o arm-linux-ld -Tlink.lds -o link.elf $^ arm- ...

  6. nginx php-cgi php

    /*************************************************************************** * nginx php-cgi php * 说 ...

  7. java zip文件的解压缩(支持中文文件名)

    用的apache的ant包,下载导入即可.由于过程比较简单,直接上代码. 代码可直接复制使用. 如果想在android上使用,记得要在AndroidManifest.xml里添加权限: <use ...

  8. (实用篇)PHP JSON数组与对象的理解

    在PHP后端和客户端数据交互的过程中,JSON数据中有时格式不定,一会儿是数组,一会儿是对象,弄得客户端开发人员要崩溃的感觉. 因此,前后端相关人员先对PHP的json_encode函数原理有必要的了 ...

  9. hexo —— 简单、快速、强大的Node.js静态博客框架

    hexo是一款基于Node.js的静态博客框架.目前在GitHub上已有1375 star 和 219 fork. 特性 风一般的速度 Hexo基于Node.js,支持多进程,几百篇文章也可以秒生成. ...

  10. ubuntu Virtualbox菜单栏不见

    ubuntu 装了Virtualbox 后,不知道怎么操作的导致顶部菜单栏不见啦, 网上查了下,我们看到开启/关闭 Scale Mode的快捷键都是 Ctrl C ,注意Ctrl是右边的那个不是左边那 ...