RealPath:
WebPath:
2017/05/21 19:13 (JST) 更新
REST API >>

CRUDアクションを持つAPIひな型

Contents

CRUDアクションをサポートするAPIひな型を、ウィザードにより簡単に作れます。

作成手順

  1. Solution Explorer 上でプロジェクト配下の Controllers フォルダを右クリック - [Add] - [Controller...] を選択。
  2. [Web API 2 Controller with read/write actions] を選択して [Add] を押下。
  3. Controller name は適宜適当に。

出来上がるクラス例

今回は ItemsController という名前のコントローラを作成してみました。

public class ItemsController : ApiController
{
    // GET: api/Items
    public IEnumerable<string> Get()
    {
        return new string[] { "value1", "value2" };
    }

    // GET: api/Items/5
    public string Get(int id)
    {
        return "value";
    }

    // POST: api/Items
    public void Post([FromBody]string value)
    {
    }

    // PUT: api/Items/5
    public void Put(int id, [FromBody]string value)
    {
    }

    // DELETE: api/Items/5
    public void Delete(int id)
    {
    }
}

それぞれの C# メソッド(アクション)が HTTP メソッドにおける GET/POST/PUT/DELETE にそれぞれ対応しています。

JavaScript による API 呼び出し例

GET (リストデータ取得)

fetch('/api/Items', {
    method: 'GET',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    }
}).then(function (response) {
    return response.json();
}).then(function (jsonobj) {
    console.log(jsonobj[0]);
    console.log(jsonobj[1]);
});
結果
value1
value2

GET (単体データ取得)

fetch('/api/Items/10', {
    method: 'GET',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    }
}).then(function (response) {
    return response.json();
}).then(function (jsonobj) {
    console.log(jsonobj);
});
結果
value

POST

fetch('/api/Items', {
    method: 'POST',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    },
    body: JSON.stringify('hello')
}).then(function (response) {
    console.log("done.");
});
結果
done.

PUT

fetch('/api/Items/10', {
    method: 'PUT',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    },
    body: JSON.stringify('hello2')
}).then(function (response) {
    console.log("done.");
});
結果
done.

DELETE

fetch('/api/Items/10', {
    method: 'DELETE',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    }
}).then(function (response) {
    console.log("done.");
});
結果
done.