c# WebAPIにajaxでclassをPOSTする(RoutePrefix付き)

いつも忘れてしまって何故404？と悩むのでメモ。

まず、WebAPIの引数に渡したいクラスを定義する

適当に。EMail、Nameというプロパティを持ったクラスを用意する。
とりあえず、/Models/Users.csを追加。

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

namespace WebAPIPostSample.Models
{
    public class User
    {
        public string EMail { get; set; }
        public string Name { get; set; }
    }
}

WebAPIの中身

/Controllers/Api/UsersController.csを追加。
Userを受け取って、何か処理をするという想定。
RoutePrefixを使って、URLにバージョンを埋め込む。
HttpPostを付加しているので、Routeは""になる。
これで
/api/v1/users
にPOSTすると、Postが呼び出される。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using WebAPIPostSample.Models;

namespace WebAPIPostSample.Controllers.Api
{
    [RoutePrefix("api/v1/users")]
    public class UsersController : ApiController
    {
        [HttpPost]
        [Route("")]
        public void Post([FromBody]User value)
        {
            var inputEmail = value.EMail;
            var inputName = value.Name;

            /* Do Anything */
        }
    }
}

ajaxを使用するview

/Views/Home/Index.cshtml
を編集する。

@{
    ViewBag.Title = "Home Page";
}

<div class="row">
    <div class="col-md-12">
        <h2>Ajax Postサンプル</h2>
        <div class="form-group">
            <label for="email">Email address:</label>
            <input type="email" class="form-control" id="email">
        </div>
        <div class="form-group">
            <label for="name">Name:</label>
            <input type="text" class="form-control" id="name">
        </div>
        <div class="form-group">
            <button id="btnDoPost" class="btn btn-primary">送信</button>
        </div>
    </div>
</div>
@section scripts {

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnDoPost").on({
            click: function () {
                var user = { 'EMail': $("#email").val(), 'Name': $("#name").val() };
                $.ajax({
                    type: "post",
                    contentType: "application/json; charset=utf-8",
                    url: "/api/v1/users",
                    data: JSON.stringify(user),
                    cache: false,
                    async: true,
                });

                return false;
            },
        });
    });
</script>

}