ASP.NET Web API 2 kullanmaya başlama (C#)

Tarafından Mike Wasson

Tamamlanan Projeyi İndir

Bu öğreticide, ürün listesi döndüren bir web API'sini oluşturmak için ASP.NET Web API'sini kullanacaksınız.

HTTP yalnızca web sayfalarının sunulmasına yönelik değildir. HTTP ayrıca hizmetleri ve verileri kullanıma sunan API'ler oluşturmaya yönelik güçlü bir platformdur. HTTP basit, esnek ve yaygındır. Aklınıza gelen neredeyse tüm platformlarda bir HTTP kitaplığı vardır, bu nedenle HTTP hizmetleri tarayıcılar, mobil cihazlar ve geleneksel masaüstü uygulamaları gibi çok çeşitli istemcilere ulaşabilir.

ASP.NET Web API'leri, .NET Framework üzerinde web API'leri oluşturmaya yönelik bir çerçevedir.

Öğreticide kullanılan yazılım sürümleri

• Visual Studio 2017
• Web API 2

Bu öğreticinin daha yeni bir sürümü için bkz. ASP.NET Core ve Windows için Visual Studio ile web API'sini oluşturma.

Web API Projesi Oluşturma

Bu öğreticide, ürün listesi döndüren bir web API'sini oluşturmak için ASP.NET Web API'sini kullanacaksınız. Ön uç web sayfası, sonuçları görüntülemek için jQuery kullanır.

Visual Studio'yu başlatın ve Başlangıçsayfasından Yeni Proje'yi seçin. Alternatif olarak, Dosyamenüsünden Yeni'yi ve ardından Proje'yi seçin.

Şablonlar bölmesinde Yüklü Şablonlar'ı seçin ve Visual C# düğümünü genişletin. Visual C# altında Web'i seçin. Proje şablonları listesinde Web Uygulaması ASP.NET'nı seçin. Projeyi "ProductsApp" olarak adlandırın ve Tamam'a tıklayın.

Yeni ASP.NET Projesi iletişim kutusunda Boş şablonu seçin. "Klasör ve çekirdek başvuruları ekle" altında Web API'sini denetleyin. Tamam'a tıklayın.

Not

"Web API'si" şablonunu kullanarak bir Web API projesi de oluşturabilirsiniz. Web API şablonu, API yardım sayfaları sağlamak için ASP.NET MVC kullanır. Web API'sini MVC olmadan göstermek istediğimden bu öğretici için Boş şablonunu kullanıyorum. Genel olarak, Web API'sini kullanmak için ASP.NET MVC bilmeniz gerekmez.

Model Ekleme

Model, uygulamanızdaki verileri temsil eden bir nesnedir. ASP.NET Web API'si modelinizi otomatik olarak JSON, XML veya başka bir biçimde serileştirebilir ve ardından serileştirilmiş verileri HTTP yanıt iletisinin gövdesine yazabilir. İstemci serileştirme biçimini okuyabildiği sürece, nesneyi seri durumdan çıkarabilir. çoğu istemci XML veya JSON ayrıştırabilir. Ayrıca istemci, HTTP isteği iletisinde Accept üst bilgisini ayarlayarak hangi biçimi istediğini belirtebilir.

Bir ürünü temsil eden basit bir model oluşturarak başlayalım.

Çözüm Gezgini henüz görünmüyorsa Görünüm menüsüne tıklayın ve Çözüm Gezgini'ı seçin. Çözüm Gezgini'da Modeller klasörüne sağ tıklayın. Bağlam menüsünde Ekle'yi ve ardından Sınıf'ı seçin.

Sınıfı "Product" olarak adlandırın. Sınıfına aşağıdaki özellikleri Product ekleyin.

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

Denetleyici Ekleme

Web API'sinde denetleyici , HTTP isteklerini işleyen bir nesnedir. Ürün listesini veya kimlikle belirtilen tek bir ürünü döndürebilen bir denetleyici ekleyeceğiz.

Not

MVC ASP.NET kullandıysanız, denetleyiciler hakkında zaten bilgi sahibisinizdir. Web API denetleyicileri MVC denetleyicilerine benzer, ancak Denetleyici sınıfı yerine ApiController sınıfını devralır.

Çözüm Gezgini'da Denetleyiciler klasörüne sağ tıklayın. Ekle'yi ve ardından Denetleyici'yi seçin.

İskele Ekle iletişim kutusunda Web API Denetleyicisi - Boş'u seçin. Ekle'ye tıklayın.

Denetleyici Ekle iletişim kutusunda denetleyiciyi "ProductsController" olarak adlandırın. Ekle'ye tıklayın.

yapı iskelesi, Controllers klasöründe ProductsController.cs adlı bir dosya oluşturur.

Not

Denetleyicilerinizi Denetleyiciler adlı bir klasöre yerleştirmeniz gerekmez. Klasör adı, kaynak dosyalarınızı düzenlemenin yalnızca kullanışlı bir yoludur.

Bu dosya henüz açık değilse, açmak için dosyaya çift tıklayın. Bu dosyadaki kodu aşağıdakilerle değiştirin:

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

Örneği basit tutmak için, ürünler denetleyici sınıfı içindeki sabit bir dizide depolanır. Elbette, gerçek bir uygulamada veritabanını sorgular veya başka bir dış veri kaynağı kullanırsınız.

Denetleyici, ürün döndüren iki yöntem tanımlar:

• yöntemi, GetAllProducts ürünlerin listesinin tamamını IEnumerable<Ürün> türü olarak döndürür.
• yöntemi tek GetProduct bir ürünü kimliğine göre arar.

İşte bu kadar! Çalışan bir web API'niz var. Denetleyicideki her yöntem bir veya daha fazla URI'ye karşılık gelir:

Denetleyici Yöntemi	URI
GetAllProducts	/api/products
GetProduct	/api/products/id

yöntemi için GetProduct URI'deki kimlik bir yer tutucudur. Örneğin, 5 kimliğine sahip ürünü almak için URI olur api/products/5.

Web API'lerinin HTTP isteklerini denetleyici yöntemlerine nasıl yönlendirdiğini öğrenmek için bkz . ASP.NET Web API'sinde yönlendirme.

Javascript ve jQuery ile Web API'sini çağırma

Bu bölümde, web API'sini çağırmak için AJAX kullanan bir HTML sayfası ekleyeceğiz. AJAX çağrıları yapmak ve sayfayı sonuçlarla güncelleştirmek için jQuery kullanacağız.

Çözüm Gezgini'da projeye sağ tıklayın ve Ekle'yi ve ardından Yeni Öğe'yi seçin.

Yeni Öğe Ekle iletişim kutusunda, Visual C# altındaki Web düğümünü seçin ve ardından HTML Sayfası öğesini seçin. Sayfaya "index.html" adını verin.

Bu dosyadaki her şeyi aşağıdakilerle değiştirin:

<!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>

jQuery'yi edinmenin birkaç yolu vardır. Bu örnekte Microsoft Ajax CDN'sini kullandım. Bunu adresinden http://jquery.com/de indirebilirsiniz ve ASP.NET "Web API'si" proje şablonu jQuery'yi de içerir.

Ürün Listesi Alma

Ürünlerin listesini almak için "/api/products" adresine bir HTTP GET isteği gönderin.

jQuery getJSON işlevi bir AJAX isteği gönderir. Yanıt, JSON nesnelerinin dizisini içerir. işlevi, done istek başarılı olursa çağrılan bir geri çağırma belirtir. Geri aramada DOM'u ürün bilgileriyle güncelleştiriyoruz.

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

Kimliğine Göre Ürün Alma

Kimliğine göre ürün almak için "/api/products/id" adresine bir HTTP GET isteği gönderin; burada kimlik, ürün kimliğidir .

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

AJAX isteğini göndermek için hala çağrı getJSON yapıyoruz, ancak bu kez kimliği istek URI'sine yerleştiriyoruz. Bu istekten gelen yanıt, tek bir ürünün JSON gösterimidir.

Uygulamayı Çalıştırma

Uygulamada hata ayıklamaya başlamak için F5'e basın. Web sayfası aşağıdaki gibi görünmelidir:

Kimliğe göre ürün almak için kimliği girin ve Ara'ya tıklayın:

Geçersiz bir kimlik girerseniz, sunucu bir HTTP hatası döndürür:

HTTP İsteğini ve Yanıtını Görüntülemek için F12 Kullanma

Bir HTTP hizmetiyle çalışırken, HTTP isteği ve yanıt iletilerini görmek çok yararlı olabilir. Bunu, Internet Explorer 9'daki F12 geliştirici araçlarını kullanarak yapabilirsiniz. Internet Explorer 9'da F12 tuşuna basarak araçları açın. Ağ sekmesine tıklayın ve Yakalamayı Başlat'a basın. Şimdi web sayfasına dönün ve web sayfasını yeniden yüklemek için F5 tuşuna basın. Internet Explorer, tarayıcı ile web sunucusu arasındaki HTTP trafiğini yakalar. Özet görünümü, bir sayfanın tüm ağ trafiğini gösterir:

Göreli "api/products/" URI'sinin girişini bulun. Bu girdiyi seçin ve Ayrıntılı görünüme git'e tıklayın. Ayrıntılı görünümde, istek ve yanıt üst bilgilerini ve gövdelerini görüntülemek için sekmeler vardır. Örneğin, İstek üst bilgileri sekmesine tıklarsanız, kabul et üst bilgisinde istemcinin "application/json" isteğinde bulunduğunu görebilirsiniz.

Yanıt gövdesi sekmesine tıklarsanız, ürün listesinin JSON olarak nasıl seri hale getirildiğini görebilirsiniz. Diğer tarayıcılar benzer işlevlere sahiptir. Bir diğer yararlı araç da bir web hata ayıklama proxy'si olan Fiddler'dır. Fiddler'ı kullanarak HTTP trafiğinizi görüntüleyebilir ve ayrıca istekteki HTTP üst bilgileri üzerinde tam denetim sağlayan HTTP istekleri oluşturabilirsiniz.

Bkz. Azure'da Çalışan Bu Uygulama

Tamamlanmış sitenin canlı web uygulaması olarak çalıştığını görmek ister misiniz? Uygulamanın tam sürümünü Azure hesabınıza dağıtabilirsiniz.

Bu çözümü Azure'a dağıtmak için bir Azure hesabınızın olması gerekir. Henüz bir hesabınız yoksa aşağıdaki seçeneklere sahip olursunuz:

• Ücretsiz bir Azure hesabı açma - Ücretli Azure hizmetlerini denemek için kullanabileceğiniz kredileri alırsınız ve bunlar kullanıldıktan sonra bile hesabı tutabilir ve ücretsiz Azure hizmetlerini kullanabilirsiniz.
• MSDN abone avantajlarını etkinleştirme - MSDN aboneliğiniz size her ay ücretli Azure hizmetleri için kullanabileceğiniz krediler verir.

Sonraki Adımlar

• POST, PUT ve DELETE eylemlerini ve veritabanına yazma işlemlerini destekleyen bir HTTP hizmetinin daha eksiksiz bir örneği için bkz. Entity Framework 6 ile Web API 2 kullanma.
• HTTP hizmetinin üzerinde akıcı ve esnek web uygulamaları oluşturma hakkında daha fazla bilgi için bkz. Tek Sayfalı Uygulama ASP.NET.
• Visual Studio web projesini Azure App Service dağıtma hakkında bilgi için bkz. Azure App Service'de ASP.NET web uygulaması oluşturma.