ASP.NET Web API の簡単な雛形を作ってみました。
クライアントサイドの実装:
ボタンをクリックして、Web API を呼び出しています。
<input type="button" id="apiButton" class="btn" value="Web Api Test"/> @section scripts{ <script> function asyncCall() { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if ((xhr.readyState === 4) && (xhr.status === 200)) { var json = xhr.response; console.log(json); } } xhr.open("GET", "/api/items/1", true); xhr.send(null); } var button1 = document.getElementById("apiButton"); button1.addEventListener("click", asyncCall, false); </script> }
サーバーサイドの実装:
ダミーデータからパラメーターとして渡される id からデータを割り出してクライアントへ返します。
using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Net.Http; using System.Web.Http; namespace WebApi.Controllers { public class ItemsController : ApiController { public IEnumerable<Item> getItem(int id) { var allItems = getAllItems(); var item = allItems.Where(x => x.Id == id); return item; } private IEnumerable<Item> getAllItems() { List<Item> items = new List<Item>(); items.Add(new Item { Id = 1, Name = "My Item 1", RegisteredOn = DateTime.Today.AddDays(-2), CategoryId = 1 }); items.Add(new Item { Id = 2, Name = "My Item 2", RegisteredOn = DateTime.Today.AddDays(-3), CategoryId = 2 }); return items; } } public class Item { public int Id { get; set; } public string Name { get; set; } public DateTime RegisteredOn { get; set; } public int CategoryId { get; set; } } }
実行結果: