ASP.NET Web API

ASP.Net Web API adalah sebuah framework untuk membangun Web Service(HTTP services). Pada umumnya sebuah web service ASP.NET Web API melayani client dengan menyediakan berbagai layanan dan data untuk web page, desktop maupun mobile aplikasi. ASP.Net Web API adalah sebuah platform ideal untuk membangun RESTful aplikasi pada .NET Framework.

Pada session kali ini, kita akan belajar membuat sebuah Web API project dan cara memanggilnya menggunakan Javascript dan JQuery. Web API yang kita buat akan mengembalikan sebuah list produk dengan tampilan web seperti gambar berikut ini.

Siapkan Visual Studio anda, saya menggunakan Visual Studio 2013. Start Visual Studio dan pilih New Project dari Start page. atau, dari File menu, pilih New dan kemudian Project.

Pada panel Templates, pilih Installed Templates dan expand node Visual C#. Dibawah Visual C#, pilih Web. Pada list project template, pilih ASP.NET Web Application. Beri nama project "ProductsApp" dan click OK.

Pada jendela dialog New ASP.NET Project, pilih Empty template. Dibawah "Add folders and core references for", check Web API kemudian Click OK.

Setelah project dibuat saatnya membuat Model untuk merepresentasikan sebuah product. Tentang apa itu Model, akan saya jelaskan di session yang berbeda diblog ini. Pada solution explorer klik kanan models folder, dari context menu, pilih Add kemudian pilih Class.

Pada class product tambahkan property class product sebagai berikut ini

namespace ProductsApp.Models
{
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Category { get; set; }
        public decimal Price { get; set; }
    }
}

Pada Web API, sebuah controller adalah sebuah object yang menangani HTTP requests. Kita akan menambahkan sebuah controller yang bisa mengembalikan data list product maupun sebuah single product yang dispesipikasikan oleh sebuah ID.

Pada Solution Explorer, klik kanan folder Controllers. Pilih Add dan kemudian pilih Controller.

Pada jendela dialog Add Scaffold, pilih Web API Controller - Empty. Kemudian click Add.

Pada jendela Add Controller, beri nama controller "ProductsController". Kemudian click Add.

Buka file ProductController.cs dengan double click, copas script code dibawah ini.

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

namespace ProductsApp.Controllers
{
  public class ProductsController : ApiController
  {
   Product[] products = new Product[] 
   { 
     new Product {Id=1,Name="Tomato Soup",Category="Groceries",Price=1}, 
     new Product {Id=2,Name="Yo-yo",Category="Toys",Price=3.75M}, 
     new Product {Id=3,Name="Hammer",Category="Hardware",Price=16.99M} 
   };

   public IEnumerable GetAllProducts()
   {
     return products;
   }

   public IHttpActionResult GetProduct(int id)
   {
     var product = products.FirstOrDefault((p) => p.Id == id);
     if (product == null)
      {
        return NotFound();
      }
        return Ok(product);
   }
 }
}

Pada contoh script di atas produk diisi dengan menggunakan fix array, tentunya ini hanyalah sebuah latihan. Pada aplikasi sesungguhnya kita bisa menggunakan query database atau menggunakan beberapa external sumber data.

Sekarang mari kita lanjutkan, controller mendefinisikan dua buah metode yaitu GetAllProducts yang mengembalikan list product sebagai type IEnumerable, dan GetProduct yang mengembalikan single data product yang dispesipikasikan oleh sebuah parameter ID.

That's it! anda mempunyai sebuah WEB API. Masing-masing metode dalam sebuah controller berkorespondensi pada satu atau lebih URIs.

Controller Method	URI
GetAllProducts	/api/products
GetProduct	/api/products/id

Untuk metode GetProduct, id adalah sebuah placeholder. Contoh anda dapat memperoleh product dengan ID=5, dengan memanggil URI api/products/5.

Setelah Web API dibuat, selanjutnya adalah bagaimana cara memanggil Web API menggunakan Javascript dan JQuery. Kita akan menambahkan sebuah halaman HTML yang menggunakan JQuery untuk membuat AJAX yang memanggil dan juga mengupdate halaman web dengan hasilnya.

Pada Solution Explorer, klik kanan project dan pilih Add, kemudian pilih New Item.

Pada dialog Add New Item, pilih node Web dibawah Visual C#, dan kemudian pilih item HTML Page. Beri nama page "index.html".

Copas script dibawah ini kedalam halaman code index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Product App</title>
</head>
<body>
  <div>
    <h2>All Products</h2>
    <ul id="products" />
  </div>
  <div>
    <h2>Search by ID</h2>
    <input type="text" id="prodId" size="5" />
    <input type="button" value="Search" onclick="find();" />
    <p id="product" />
  </div>

 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
  <script>
    var uri = 'api/products';
    $(document).ready(function () {
      // Send an AJAX request
      $.getJSON(uri)
          .done(function (data) {
            // On success, 'data' contains a list of products.
            $.each(data, function (key, item) {
              // Add a list item for the product.
              $('<li>', { text: formatItem(item) }).appendTo($('#products'));
            });
          });
    });

    function formatItem(item) {
      return item.Name + ': $' + item.Price;
    }
    function find() {
      var id = $('#prodId').val();
      $.getJSON(uri + '/' + id)
          .done(function (data) {            
           $('#product').text(formatItem(data));
          });
          .fail(function (jqXHR, textStatus, err) {
            $('#product').text('Error: ' + err);
          });
    }
  </script>
</body>
</html>

Ada banyak cara untuk memperoleh JQuery library. Pada contoh diatas saya menggunakan Microsoft Ajax CDN. Anda bisa juga mendownloadnya dari http://jquery.com/. Pada project template ASP.Net JQuery sudah dimasukan didalamnya.

Untuk memperoleh daftar produk, fungsi getJSON mengirim sebuah Ajax Request melalui HTTP GET. Dimana apiUrl pada parameter getJSON adalah string “/api/products” yang mewakili method GetAllProducts di Controller method. Request ini akan mengembalikan response object yang berisi array JSON. Fungsi done menangani response jika sukses, yang akan mengupdate object DOM di HTML dengan informasi product.

$(document).ready(function () {
    // Send an AJAX request
    $.getJSON(apiUrl)
        .done(function (data) {
            // On success, 'data' contains a list of products.
            $.each(data, function (key, item) {
                // Add a list item for the product.
                $('<li>', { text: formatItem(item) }).appendTo($('#products'));
            });
        });
});

Untuk memperoleh produk dengan spesifikasi id, fungsi getJSON akan mengirimkan request dengan apiUrl "/api/products/id", yang mewakili GetProduct pada Controller Method. “id” pada apiUrl adalah id dari produk yang akan direquest.

function find() {
    var id = $('#prodId').val();
    $.getJSON(apiUrl + '/' + id)
        .done(function (data) {
            $('#product').text(formatItem(data));
        });
        .fail(function (jqXHR, textStatus, err) {
            $('#product').text('Error: ' + err);
        });
}

Sekarang jalankan aplikasi anda dengan menekan F5. Halaman web page akan tampil di IE browser anda dengan tampilan seperti berikut.

Untuk memperoleh Produk dengan spesifikasi id, masukan id kemudian tekan tombol Search.

Jika id tidak valid maka server akan mengembalikan respon dengan http error sebagai berikut.

Untuk melihat HTTP request dan response tekan F12. Pada tab Network pilih Start Capturing, kemudian kembali ke IE Browser anda reload page anda dengan menekan F5. Maka IE akan menangkap HTTP traffic antara browser dan web server.

Klik tombol Go to detailed view pilih tab Request Header disitu anda dapat melihat client merequest Application/json di baris Accept. Klik tombol Response body disitu anda akan melihat bagaimana daftar product di serialized ke dalam object array JSON.