ASP.NET Web API 2 ile Çalışmaya Başlama (C#)

tarafından Mike Wasson

Tamamlanan Projeyi İndir

Bu öğreticide, ürünlerin listesini 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ı kullanıma sunma amaçlı 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 hemen her platformun 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'si, .NET Framework'ün üzerinde web API'leri oluşturmaya yönelik bir çerçevedir.

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

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ünlerin listesini 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.

Ürün listesi, fiyatları ve I D alanı ve düğmesine göre arama içeren örnek projeyi gösteren yerel ana bilgisayar tarayıcısı penceresinin ekran görüntüsü.

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 Project'i 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 proje oluşturma adımlarını ve seçimlerini vurgulayan 'yeni proje ekle' şablon seçeneklerinin ekran görüntüsü.

Yeni ASP.NET Projesi iletişim kutusunda Boş şablonu seçin. "Klasörler ve çekirdek referanslar ekle" altında Web API'yi işaretleyin. Tamam'a tıklayın.

Farklı şablon seçenekleri ve klasörler ve çekirdek başvurusu için üç seçim içeren yeni proje iletişim kutusunun ekran görüntüsü.

Uyarı

"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ğim için 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 çıkartabilir. ç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'ni seçin. Çözüm Gezgini'nde Modeller klasörüne sağ tıklayın. Bağlam menüsünde Ekle'yi ve ardından Sınıf'ı seçin.

Bir sınıfın nasıl ekleneceğini gösteren modeller klasöründe bulunan seçeneklerin görüntülendiği çözüm gezgini menüsünün ekran görüntüsü.

Sınıfı "Product" olarak adlandırın. Aşağıdaki özellikleri Product sınıfına 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.

Uyarı

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

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

Projeye denetleyici sınıfı eklemeye yönelik görsel yönergeleri görüntüleyen çözüm gezgini menüsünün ekran görüntüsü.

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

Web A P I denetleyicisi - boş seçeneğini vurgulayan 'yapı iskelesi ekle' iletişim kutusunun menü seçeneklerini gösteren ekran görüntüsü.

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

Alan kutusunda 'ürün denetleyicisi' sözcüğünü ve altındaki ekle düğmesini gösteren 'denetleyici ekle' iletişim kutusunun ekran görüntüsü.

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

Denetleyiciler klasöründe 'products controller dot C S' adlı yeni oluşturulan seçeneğin etrafında dolan çözüm gezgini menü seçeneklerinin ekran görüntüsü.

Uyarı

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, GetProduct kimliğine göre tek bir ürünü arar.

Hepsi 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 (Evrensel Kaynak Tanımlayıcısı)
GetAllProducts /api/products
ÜrünAl /api/products/id

GetProduct yöntemi için, URI'deki id bir yer tutucudur. Örneğin, kimliği 5 olan ürünü elde etmek için URI api/products/5 şeklindedir.

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'nde projeye sağ tıklayın ve Ekle'yi ve ardından Yeni Öğe'yi seçin.

Yeni öğe eklemek için menü seçimlerini göstermek için ürün uygulaması seçeneğini vurgulayan çözüm gezgini menüsünün ekran görüntüsü.

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

Web seçimini ve içindeki seçenekleri gösteren 'yeni öğe ekle' menü seçeneklerinin ekran görüntüsü.

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. İşlev, done istek başarılı olursa çağrılan bir geri çağırma belirtir. Geri aramada DOM'u ürün bilgileriyle güncelleştiririz.

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

Kimlik Numarasıyla Ü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);
        });
}

Yine de AJAX isteğini göndermeye çağırıyoruz getJSON , ancak bu kez kimliği istek URI'sine koyduk. 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 tuşuna basın. Web sayfası aşağıdaki gibi görünmelidir:

Tüm ürünleri fiyatlarıyla birlikte madde işareti şeklinde ve ardından altındaki 'ID'ye göre ara' alanını gösteren web tarayıcısının ekran görüntüsü.

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

Tüm ürünleri ve fiyatları madde işareti biçiminde ve 'I D'ye göre ara' alanında 2 sayısını gösteren tarayıcının ekran görüntüsü.

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

Tüm ürünleri ve fiyatlarını listeleyen ve 'I D'ye göre ara' alanının altında 'bulunamadı' hata iletisini gösteren tarayıcının ekran görüntüsü.

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

Bir HTTP hizmetiyle çalışırken, HTTP isteğini 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'dan F12'ye basarak araçları açın. Ağ sekmesine tıklayın ve Yakalamayı Başlat düğmesine 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:

U R L'lerin ve tüm ağ trafiği yanıtlarının listesini gösteren H T T P istek ve yanıt iletisi penceresinin ekran görüntüsü.

Göreli "api/products/" URI'sinin girdisini 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, istemcinin Kabul et üst bilgisinde "application/json" isteğinde bulunduğunu görebilirsiniz.

Tek bir A P I isteği yanıtı örneğini gösteren H T T P isteği ve yanıt iletisi iletişim kutusunun ekran görüntüsü.

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 web hata ayıklama ara sunucusu 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ı bir 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 olmalıdır. Henüz bir hesabınız yoksa, aşağıdaki seçeneklere sahipsinizdir:

  • Ücretsiz bir Azure hesabı açma - Ücretli Azure hizmetlerini denemek için kullanabileceğiniz krediler 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, ücretli Azure hizmetleri için kullanabileceğiniz kredileri her ay verir.

Sonraki Adımlar

  • Last updated on