Menggunakan WEB API dengan ASP.NET Web Forms

oleh Mike Wasson

Tutorial ini memanmbing Anda melalui langkah-langkah untuk menambahkan Web API ke aplikasi ASP.NET Web Forms tradisional di ASP.NET 4.x.

Gambaran Umum

Meskipun ASP.NET Web API di kemas dengan ASP.NET MVC, mudah untuk menambahkan Web API ke aplikasi ASP.NET Web Forms tradisional.

Untuk menggunakan WEB API dalam aplikasi Web Forms, ada dua langkah utama:

• Tambahkan pengontrol API Web yang berasal dari kelas ApiController .
• Tambahkan tabel rute ke metode Application_Start .

Membuat Proyek Formulir Web

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 Formulir Web. Masukkan nama untuk proyek dan klik OK.

Membuat Model dan Pengontrol

Tutorial ini menggunakan model dan kelas pengontrol yang sama dengan tutorial Memulai .

Pertama, tambahkan kelas model. Di Penjelajah Solusi, klik kanan proyek dan pilih Tambahkan Kelas. Beri nama kelas Produk, dan tambahkan implementasi berikut:

public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
    public string Category { get; set; }
}

Selanjutnya, tambahkan pengontrol API Web ke project., Pengontrol adalah objek yang menangani permintaan HTTP untuk Api Web.

Di Penjelajah Solusi, klik kanan proyek. Pilih Tambahkan Item Baru.

Di bawah Templat terinstal, perluas Visual C# dan pilih Web. Kemudian, dari daftar templat, pilih Kelas Pengontrol API Web. Beri nama pengontrol "ProductsController" dan klik Tambahkan.

Wizard Tambahkan Item Baru akan membuat file bernama ProductsController.cs. Hapus metode yang disertakan wizard dan tambahkan metode berikut:

namespace WebForms
{
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Net.Http;
    using System.Web.Http;

    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 Product GetProductById(int id)
        {
            var product = products.FirstOrDefault((p) => p.Id == id);
            if (product == null)
            {
                throw new HttpResponseException(HttpStatusCode.NotFound);
            }
            return product;
        }

        public IEnumerable<Product> GetProductsByCategory(string category)
        {
            return products.Where(
                (p) => string.Equals(p.Category, category,
                    StringComparison.OrdinalIgnoreCase));
        }
    }
}

Untuk informasi selengkapnya tentang kode di pengontrol ini, lihat tutorial Memulai .

Tambahkan Informasi Perutean

Selanjutnya, kita akan menambahkan rute URI sehingga URI formulir "/api/products/" dirutekan ke pengontrol.

Di Penjelajah Solusi, klik dua kali Global.asax untuk membuka file code-behind Global.asax.cs. Tambahkan pernyataan penggunaan berikut.

using System.Web.Http;

Kemudian tambahkan kode berikut ke metode Application_Start :

RouteTable.Routes.MapHttpRoute(
    name: "DefaultApi",
    routeTemplate: "api/{controller}/{id}",
    defaults: new { id = System.Web.Http.RouteParameter.Optional }
);

Untuk informasi selengkapnya tentang tabel perutean, lihat Perutean di ASP.NET Web API.

Menambahkan Client-Side AJAX

Hanya itu yang Anda butuhkan untuk membuat API web yang dapat diakses klien. Sekarang mari kita tambahkan halaman HTML yang menggunakan jQuery untuk memanggil API.

Pastikan halaman master Anda (misalnya, Site.Master) menyertakan ContentPlaceHolder dengan ID="HeadContent":

<asp:ContentPlaceHolder runat="server" ID="HeadContent"></asp:ContentPlaceHolder>

Buka file Default.aspx. Ganti teks boilerplate yang ada di bagian konten utama, seperti yang ditunjukkan:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" 
    AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebForms._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>Products</h2>
    <table>
    <thead>
        <tr><th>Name</th><th>Price</th></tr>
    </thead>
    <tbody id="products">
    </tbody>
    </table>
</asp:Content>

Selanjutnya, tambahkan referensi ke file sumber jQuery di bagian HeaderContent :

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
</asp:Content>

Catatan: Anda dapat dengan mudah menambahkan referensi skrip dengan menyeret dan menjatuhkan file dari Penjelajah Solusi ke jendela editor kode.

Di bawah tag skrip jQuery, tambahkan blok skrip berikut:

<script type="text/javascript">
    function getProducts() {
        $.getJSON("api/products",
            function (data) {
                $('#products').empty(); // Clear the table body.

                // Loop through the list of products.
                $.each(data, function (key, val) {
                    // Add a table row for the product.
                    var row = '<td>' + val.Name + '</td><td>' + val.Price + '</td>';
                    $('<tr/>', { html: row })  // Append the name.
                        .appendTo($('#products'));
                });
            });
        }

        $(document).ready(getProducts);
</script>

Ketika dokumen dimuat, skrip ini membuat permintaan AJAX ke "api/products". Permintaan mengembalikan daftar produk dalam format JSON. Skrip menambahkan informasi produk ke tabel HTML.

Saat Anda menjalankan aplikasi, aplikasi akan terlihat seperti ini: