WebSurfer's Home

トップ > Blog 1   |   ログイン
APMLフィルター

ASP.NET Web API のバインディング (2)

by WebSurfer 2019年3月6日 14:47

ASP.NET Web API に、フォームデータ name=value の name に C# の識別子に使えない文字が含まれて POST されてくる場合、どのように vaue を取得するかを書きます。実際にそんなケースはなさそうなので、役に立たない情報かもしれませんが。(笑)

Web API のバインディング

一般的なバインディングの話は先の記事「ASP.NET Web API のバインディング」に書きました。その記事のコードの Post メソッドに "AAA:Id=6&AAA:Name=ガッチャマンの息子" という文字列がフォームデータとして送信されてくる場合を考えます。(注:当然、送信前に文字列は URL エンコードされます)

フォームデータが "AAA:Id=6" というように一つだけなら、例えば先の記事の Put の場合のように送信側で data:"=AAA:Id=6" として受信側で Put(int id, [FromBody] string name) の name に文字列として取得できますが、"AAA:Id=6&AAA:Name=ガッチャマンの息子" のように 2 つ以上あると組み込みのフォーマッター・モデルバインダーではむりそうです(何故か 1 つ目の "AAA:Id=6" しか取得できません)。

と言って、先の記事の例の Post(Hero postedHero) ようにアクションメソッドの引数をコンプレックス型にはできません。何故なら、コロン ':' は C# の識別子の文字としては使えませんので、AAA:Id や AAA:Name という名前のプロパティが定義できませんから。

ではどうするかと言うと、先の記事でも紹介した MSDN Blog「How WebAPI does Parameter Binding」の記事の最初のコードにあるように HttpRequestMessage を引数に持つメソッドで取得するのがよさそうです。

具体的には以下のコードのようにします。

public async Task<List<Hero>> Post(HttpRequestMessage request)
{
    HttpContent content = request.Content;
    string str = await content.ReadAsStringAsync();
    NameValueCollection formData = 
        await content.ReadAsFormDataAsync();
    string str1 = formData["AAA:Id"];
    string str2 = formData["AAA:Name"];
    Hero postedHero = 
        new Hero { Id = int.Parse(str1), Name = str2 };
    heroes.Add(postedHero);
    return heroes;
}

そうすれば、上の画像に示したように HttpContent.ReadAsFormDataAsync メソッドでフォームデータを取得できます。

クライアント側はボディに設定する文字列を URL エンコードすること、要求ヘッダに Content-Type: application/x-www-form-urlencoded; charset=UTF-8 を含めることを忘れないようにしてください。

Tags: , ,

Web API

ASP.NET Web API のバインディング

by WebSurfer 2018年9月11日 16:52

ASP.NET Web API でもクライアントから送信されてきたデータはアクションメソッドの引数にバインドされますが、その仕組みは ASP.NET MVC とは異なるということを書きます。

ASP.NET Web API

詳しくは MSDN Blog の記事「How WebAPI does Parameter Binding」に書いてありますのでそちらを読んでもらうとして、要点だけ書きますと以下の通りです。

  1. Model Binding または Formatters を利用するという 2 つの方法があって、Web API の場合は、クエリ文字列からパラメータを取得する場合は Model Binding を、ボディから取得する場合は Formatter を使う。
  2. string などのプリミティブ型をアクションメソッドの引数にした場合、引数に属性が付与されてなければクエリ文字列からパラメータを探してモデルバインディングする。
  3. コンプレックス型(例:記事の Customer クラス、下のコードの Hero クラス)の場合、デフォルトでは Formatter を使ってボディからパラメータを取得する。

上記の点を踏まえたサンプルコードを以下にアップしておきます。

Model

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Runtime.Serialization;

namespace WebAPI.Models
{
    public class Hero
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}

Api Controller

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using System.Web;
using WebAPI.Models;
 
namespace WebAPI.Controllers
{
    public class ValuesController : ApiController
    {
        private List<Hero> heroes = new List<Hero> {
              new Hero {Id = 1, Name = "スーパーマン"},
              new Hero {Id = 2, Name = "バットマン"},
              new Hero {Id = 3, Name = "ウェブマトリクスマン"},
              new Hero {Id = 4, Name = "チャッカマン"},
              new Hero {Id = 5, Name = "スライムマン"}
          };

        // GET api/values (Read...すべてのレコードを取得)
        public List<Hero> Get()
        {
            return heroes;
        }

        // GET api/values/5 (Read...id 指定のレコード取得)
        public Hero Get(int id)
        {
            return heroes[id - 1];
        }

        // POST api/values  (Create...レコード追加)
        public List<Hero> Post(Hero postedHero)
        {
            heroes.Add(postedHero);
            return heroes;
        }

        // PUT api/values/5 (Update...id 指定のレコード更新)
        public List<Hero> Put(int id, [FromBody] string name)
        {
            heroes[id - 1].Name = name;
            return heroes;
        }

        // DELETE api/values/5 (Delete...id 指定のレコード削除)
        public List<Hero> Delete(int id)
        {
            heroes.RemoveAt(id - 1);
            return heroes;
        }
    }
}

上の Api を呼び出すスクリプト

<input type="button" value="READ ALL"
       onclick="apiHeroesGet();" />
<input type="button" value="READ 5"
       onclick="apiHeroesGet5();" />
<input type="button" value="UPDATE 5"
       onclick="apiHeroesPut5();" />
<input type="button" value="DELETE 5"
       onclick="apiHeroesDelete5();" />
<input type="button" value="CREATE 6"
       onclick="apiHeroesPost();" />

<ul id="heroes"></ul>

@section Scripts {
  <script type="text/javascript">
  //<![CDATA[

    function apiHeroesGet() {
      $.ajax({
        type: "GET",
        url: "api/values",
        success: function (data, textStatus, jqXHR) {
          $('#heroes').empty();
          $.each(data, function (key, val) {
            var str = val.Id + ': ' + val.Name;
            $('<li/>', { html: str }).appendTo($('#heroes'));
          });
        },
        error: function (jqXHR, textStatus, errorThrown) {
          $('#heroes').empty();
          $('#heroes').text('textStatus: ' + textStatus +
              ', errorThrown: ' + errorThrown);
        }
      });
    }

    function apiHeroesGet5() {
      $.ajax({
        type: "GET",
        url: "api/values/5",
        success: function (data, textStatus, jqXHR) {
          $('#heroes').empty();
          var str = data.Id + ': ' + data.Name;
          $('<li/>', { html: str }).appendTo($('#heroes'));
        },
        error: function (jqXHR, textStatus, errorThrown) {
          $('#heroes').empty();
          $('#heroes').text('textStatus: ' + textStatus +
              ', errorThrown: ' + errorThrown);
        }
      });
    }

    function apiHeroesPut5() {
      $.ajax({
        type: "PUT",
        url: "api/values/5",
        data: encodeURI("=ガッチャマン"),

        // ���下のコードがあるとバインドできず null が渡される
        //contentType: "application/json; charset=utf-8",

        success: function (data) {
          $('#heroes').empty();
          $.each(data, function (key, val) {
            var str = val.Id + ': ' + val.Name;
            $('<li/>', { html: str }).appendTo($('#heroes'));
          });
        },
        error: function (jqXHR, textStatus, errorThrown) {
          $('#heroes').empty();
          $('#heroes').text('textStatus: ' + textStatus +
             ', errorThrown: ' + errorThrown);
        }
      });
    }

    function apiHeroesDelete5() {
      $.ajax({
        type: "DELETE",
        url: "api/values/5",
        success: function (data) {
          $('#heroes').empty();
          $.each(data, function (key, val) {
            var str = val.Id + ': ' + val.Name;
            $('<li/>', { html: str }).appendTo($('#heroes'));
          });
        },
        error: function (jqXHR, textStatus, errorThrown) {
          $('#heroes').empty();
          $('#heroes').text('textStatus: ' + textStatus +
              ', errorThrown: ' + errorThrown);
        }
      });
    }

    function apiHeroesPost() {
      var j = { Id: 6, Name: "ガッチャマンの息子" };
      var jsonString = JSON.stringify(j);
      $.ajax({
        type: "POST",
        url: "api/values",
        data: jsonString,
        contentType: "application/json; charset=utf-8",
        success: function (data) {
          $('#heroes').empty();
          $.each(data, function (key, val) {
            var str = val.Id + ': ' + val.Name;
            $('<li/>', { html: str }).appendTo($('#heroes'));
          });
        },
        error: function (jqXHR, textStatus, errorThrown) {
          $('#heroes').empty();
          $('#heroes').text('textStatus: ' + textStatus +
              ', errorThrown: ' + errorThrown);
        }
      });
    }

  //]]>
  </script>
}

特に注意すべき点は Put(int id, [FromBody] string name) メソッドとそれを呼び出すスクリプトです。

アクションメソッドの引数が string 型でボディからパラメータを得たい場合は [FromBody] 属性が必要です。

さらに、 name にバインドするのに Formatter がどういう動きをしているのか調べ切れてませんが、自分が試した限りでは送信するデータをスクリプトの data に "name=value" と設定してはダメで、上のサンプルコードのように "=value" というように設定しないと引数 name にはバインドされませんでした。

もう一つ、Content-Type に application/json を設定するとバインドできず null が渡されてしまいます。理由は、Web API は要求ヘッダの Content-Type を見て適切な Formatter を選択するそうですが、"=value" は JSON ではないからだと思われます。

jQuery ajax で contentType を設定しないと application/x-www-form-urlencoded (デフォルト) となりますが、その場合は期待通り引数 name に "value" がバインドされます。

上記のようなトラブルを避けるために、アクションメソッドの引数は Post(Hero postedHero) と同様にコンプレックス型(Hero クラス)とし、スクリプトのapiHeroesPost() のように JSON 文字列を送信するようにした方が良いかもしれません。

Tags: , ,

Web API

About this blog

2010年5月にこのブログを立ち上げました。その後 ブログ2 を追加し、ここは ASP.NET 関係のトピックス、ブログ2はそれ以外のトピックスに分けました。

Calendar

<<  2019年3月  >>
242526272812
3456789
10111213141516
17181920212223
24252627282930
31123456

View posts in large calendar