Mulai menggunakan ASP.NET Web API 2 (C#)

oleh Mike Wasson

Unduh Proyek yang Selesai

Dalam tutorial ini, Anda akan menggunakan ASP.NET Web API untuk membuat API web yang mengembalikan daftar produk.

HTTP bukan hanya untuk menyajikan halaman web. HTTP juga merupakan platform yang kuat untuk membangun API yang mengekspos layanan dan data. HTTP sederhana, fleksibel, dan di mana-mana. Hampir semua platform yang dapat Anda anggap memiliki pustaka HTTP, sehingga layanan HTTP dapat menjangkau berbagai klien, termasuk browser, perangkat seluler, dan aplikasi desktop tradisional.

ASP.NET Web API adalah kerangka kerja untuk membangun API web di atas .NET Framework.

Versi perangkat lunak yang digunakan dalam tutorial

• Visual Studio 2017
• WEB API 2

Lihat Membuat API web dengan ASP.NET Core dan Visual Studio untuk Windows untuk versi tutorial yang lebih baru.

Membuat Proyek API Web

Dalam tutorial ini, Anda akan menggunakan ASP.NET Web API untuk membuat API web yang mengembalikan daftar produk. Halaman web front-end menggunakan jQuery untuk menampilkan hasilnya.

Mulai Visual Studio dan pilih Proyek Baru dari halaman Mulai . Atau, dari menu File , pilih Baru lalu Proyek.

Di panel Templat , pilih Templat terinstal dan perluas simpul Visual C# . Di bawah Visual C#, pilih Web. Dalam daftar templat proyek, pilih ASP.NET Aplikasi Web. Beri nama proyek "ProductsApp" dan klik OK.

Dalam dialog Proyek ASP.NET Baru , pilih templat Kosong . Di bagian "Tambahkan folder dan referensi inti untuk", centang API Web. Klik OK.

Catatan

Anda juga dapat membuat proyek API Web menggunakan templat "API Web". Templat API Web menggunakan ASP.NET MVC untuk menyediakan halaman bantuan API. Saya menggunakan templat Kosong untuk tutorial ini karena saya ingin menampilkan API Web tanpa MVC. Secara umum, Anda tidak perlu tahu ASP.NET MVC untuk menggunakan Web API.

Menambahkan Model

Model adalah objek yang mewakili data dalam aplikasi Anda. ASP.NET Web API dapat secara otomatis membuat serial model Anda ke JSON, XML, atau beberapa format lainnya, lalu menulis data berseri ke dalam isi pesan respons HTTP. Selama klien dapat membaca format serialisasi, klien dapat mendeserialisasi objek. Sebagian besar klien dapat mengurai XML atau JSON. Selain itu, klien dapat menunjukkan format mana yang diinginkannya dengan mengatur header Terima di pesan permintaan HTTP.

Mari kita mulai dengan membuat model sederhana yang mewakili produk.

Jika Penjelajah Solusi belum terlihat, klik menu Tampilan dan pilih Penjelajah Solusi. Di Penjelajah Solusi, klik kanan folder Model. Dari menu konteks, pilih Tambahkan lalu pilih Kelas.

Beri nama kelas "Produk". Tambahkan properti berikut ke Product kelas .

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; }
    }
}

Menambahkan Pengontrol

Di Web API, pengontrol adalah objek yang menangani permintaan HTTP. Kami akan menambahkan pengontrol yang dapat mengembalikan daftar produk atau satu produk yang ditentukan oleh ID.

Catatan

Jika Anda telah menggunakan ASP.NET MVC, Anda sudah terbiasa dengan pengontrol. Pengontrol API Web mirip dengan pengontrol MVC, tetapi mewarisi kelas ApiController alih-alih kelas Pengontrol .

Di Penjelajah Solusi, klik kanan folder Pengontrol. Pilih Tambahkan lalu pilih Pengontrol.

Dalam dialog Tambahkan Perancah , pilih Pengontrol API Web - Kosong. Klik Tambahkan.

Dalam dialog Tambahkan Pengontrol , beri nama pengontrol "ProductsController". Klik Tambahkan.

Perancah membuat file bernama ProductsController.cs di folder Pengontrol.

Catatan

Anda tidak perlu memasukkan pengontrol ke dalam folder bernama Pengontrol. Nama folder hanyalah cara mudah untuk mengatur file sumber Anda.

Jika file ini belum dibuka, klik dua kali file untuk membukanya. Ganti kode dalam file ini dengan yang berikut 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<Product> GetAllProducts()
        {
            return products;
        }

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

Untuk menjaga contoh sederhana, produk disimpan dalam array tetap di dalam kelas pengontrol. Tentu saja, dalam aplikasi nyata, Anda akan mengkueri database atau menggunakan beberapa sumber data eksternal lainnya.

Pengontrol mendefinisikan dua metode yang mengembalikan produk:

• Metode mengembalikan GetAllProducts seluruh daftar produk sebagai jenis Produk> IEnumerable<.
• Metode ini GetProduct mencari satu produk dengan ID-nya.

Itu saja! Anda memiliki API web yang berfungsi. Setiap metode pada pengontrol sesuai dengan satu atau beberapa URI:

Metode Pengontrol	URI
GetAllProducts	/api/products
GetProduct	/api/products/id

Untuk metode , GetProductid dalam URI adalah tempat penampung. Misalnya, untuk mendapatkan produk dengan ID 5, URI adalah api/products/5.

Untuk informasi selengkapnya tentang cara Api Web merutekan permintaan HTTP ke metode pengontrol, lihat Perutean di ASP.NET Web API.

Memanggil API Web dengan Javascript dan jQuery

Di bagian ini, kita akan menambahkan halaman HTML yang menggunakan AJAX untuk memanggil API web. Kita akan menggunakan jQuery untuk melakukan panggilan AJAX dan juga untuk memperbarui halaman dengan hasilnya.

Di Penjelajah Solusi, klik kanan proyek dan pilih Tambahkan, lalu pilih Item Baru.

Dalam dialog Tambahkan Item Baru , pilih simpul Web di bawah Visual C#, lalu pilih item Halaman HTML . Beri nama halaman "index.html".

Ganti semua yang ada di file ini dengan yang berikut ini:

<!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="https://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 beberapa cara untuk mendapatkan jQuery. Dalam contoh ini, saya menggunakan CDN Microsoft Ajax. Anda juga dapat mengunduhnya dari http://jquery.com/, dan templat proyek "WEB API" ASP.NET juga menyertakan jQuery.

Mendapatkan Daftar Produk

Untuk mendapatkan daftar produk, kirim permintaan HTTP GET ke "/api/products".

Fungsi jQuery getJSON mengirimkan permintaan AJAX. Respons berisi array objek JSON. Fungsi menentukan done panggilan balik yang dipanggil jika permintaan berhasil. Dalam panggilan balik, kami memperbarui DOM dengan informasi produk.

$(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'));
            });
        });
});

Mendapatkan Produk Berdasarkan ID

Untuk mendapatkan produk berdasarkan ID, kirim permintaan HTTP GET ke "/api/products/id", di mana id adalah ID produk.

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);
        });
}

Kami masih memanggil getJSON untuk mengirim permintaan AJAX, tetapi kali ini kami memasukkan ID ke dalam URI permintaan. Respons dari permintaan ini adalah representasi JSON dari satu produk.

Menjalankan Aplikasi

Tekan F5 untuk mulai penelusuran kesalahan aplikasi. Halaman web akan terlihat seperti berikut ini:

Untuk mendapatkan produk menurut ID, masukkan ID dan klik Cari:

Jika Anda memasukkan ID yang tidak valid, server mengembalikan kesalahan HTTP:

Menggunakan F12 untuk Melihat Permintaan dan Respons HTTP

Ketika Anda bekerja dengan layanan HTTP, mungkin sangat berguna untuk melihat permintaan HTTP dan pesan respons. Anda dapat melakukan ini dengan menggunakan alat pengembang F12 di Internet Explorer 9. Dari Internet Explorer 9, tekan F12 untuk membuka alat. Klik tab Jaringan dan tekan Mulai Menangkap. Sekarang kembali ke halaman web dan tekan F5 untuk memuat ulang halaman web. Internet Explorer akan mengambil lalu lintas HTTP antara browser dan server web. Tampilan ringkasan memperlihatkan semua lalu lintas jaringan untuk halaman:

Temukan entri untuk URI relatif "api/products/". Pilih entri ini dan klik Buka tampilan terperinci. Dalam tampilan detail, ada tab untuk melihat header dan isi permintaan dan respons. Misalnya, jika Anda mengklik tab Header permintaan , Anda dapat melihat bahwa klien meminta "application/json" di header Terima.

Jika Anda mengklik tab Isi respons, Anda dapat melihat bagaimana daftar produk diserialisasikan ke JSON. Browser lain memiliki fungsionalitas yang sama. Alat lain yang berguna adalah Fiddler, proksi penelusuran kesalahan web. Anda dapat menggunakan Fiddler untuk melihat lalu lintas HTTP Anda, dan juga untuk menyusun permintaan HTTP, yang memberi Anda kontrol penuh atas header HTTP dalam permintaan.

Lihat Aplikasi ini Berjalan di Azure

Ingin melihat situs yang sudah selesai berjalan sebagai aplikasi web langsung? Anda dapat menyebarkan versi lengkap aplikasi ke akun Azure Anda.

Anda memerlukan akun Azure untuk menyebarkan solusi ini ke Azure. Jika Anda belum memiliki akun, Anda memiliki opsi berikut:

• Buka akun Azure secara gratis - Anda mendapatkan kredit yang dapat Anda gunakan untuk mencoba layanan Azure berbayar, dan bahkan setelah habis, Anda dapat menyimpan akun dan menggunakan layanan Azure gratis.
• Aktifkan manfaat pelanggan MSDN - Langganan MSDN Anda memberi Anda kredit setiap bulan yang dapat Anda gunakan untuk layanan Azure berbayar.

Langkah berikutnya

• Untuk contoh layanan HTTP yang lebih lengkap yang mendukung tindakan POST, PUT, dan DELETE dan menulis ke database, lihat Menggunakan Web API 2 dengan Entity Framework 6.
• Untuk informasi selengkapnya tentang membuat aplikasi web yang lancar dan responsif di atas layanan HTTP, lihat ASP.NET Aplikasi Satu Halaman.
• Untuk informasi tentang cara menyebarkan proyek web Visual Studio ke Azure App Service, lihat Membuat aplikasi web ASP.NET di Azure App Service.