ASP.NET Web API 2 (C#) Ile çalışmaya başlama

, Mike te son

Tamamlanmış projeyi indir

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

HTTP yalnızca Web sayfalarına hizmet vermek için değildir. HTTP Ayrıca hizmet ve verileri kullanıma sunan API 'Leri oluşturmaya yönelik güçlü bir platformdur. HTTP basit, esnek ve ubititous. Düşünebildiğiniz neredeyse her platformda bir HTTP kitaplığı vardır. bu nedenle, HTTP Hizmetleri tarayıcılar, mobil cihazlar ve geleneksel masaüstü uygulamaları gibi çok sayıda istemciye ulaşabilir.

ASP.NET Web API 'SI, .NET Framework en üstünde 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 ASP.NET Core ve Windows Için Visual Studio ile Web API 'Si oluşturma makalesine bakın.

Web API projesi oluşturma

Bu öğreticide, ürünlerin listesini döndüren bir Web API 'SI oluşturmak için ASP.NET Web API kullanacaksınız. Ön uç Web sayfası, sonuçları göstermek için jQuery kullanır.

Visual Studio 'Yu başlatın ve Başlangıç sayfasından Yeni proje ' yi seçin. Ya da Dosya menüsünde Yeni ' yi ve ardından Proje' yi seçin.

Şablonlar bölmesinde, yüklü şablonlar ' ı seçin ve görsel C# düğümünü genişletin. Görsel C# bölümünde Web' i seçin. Proje şablonları listesinde ASP.NET Web uygulaması' 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. "için klasör ve temel başvurular eklemek "altında, Web API 'sinikontrol edin. Tamam düğmesine tıklayın.

Note

Ayrıca, "Web API" şablonunu kullanarak bir Web API projesi oluşturabilirsiniz. Web API şablonu, API yardım sayfalarını sağlamak için ASP.NET MVC kullanır. Bu öğretici için boş şablon kullanıyorum çünkü Web API 'sini MVC olmadan göstermek istiyorum. Genel olarak, Web API 'sini kullanmak için ASP.NET MVC 'yi bilmeniz gerekmez.

Model Ekleme

Model , uygulamanızdaki verileri temsil eden bir nesnedir. ASP.NET Web API 'SI, modelinizi JSON, XML veya başka bir biçime otomatik olarak seri hale getirilebilir ve ardından seri hale getirilmiş verileri HTTP yanıt iletisinin gövdesine yazabilir. Bir istemci serileştirme biçimini okuyabilirler, nesne seri durumdan çıkarabilirler. Çoğu istemci, XML veya JSON 'yi ayrıştırabilirler. Ayrıca, istemci, HTTP istek iletisinde Accept üst bilgisini ayarlayarak hangi biçimin istediğini belirtebilir.

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

Çözüm Gezgini zaten görünmüyorsa, Görünüm menüsüne tıklayın ve Çözüm Gezginiöğesini seçin. Çözüm Gezgini modeller klasörüne sağ tıklayın. Bağlam menüsünden Ekle ' yi ve ardından sınıf' ı seçin.

Sınıfı ürün""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ünlerin bir listesini ya da ID tarafından belirtilen tek bir ürünü döndüren bir denetleyici ekleyeceğiz.

Note

ASP.NET MVC kullandıysanız, denetleyicilerle zaten bilgi sahibisiniz. Web API denetleyicileri MVC denetleyicilerine benzerdir, ancak Controller sınıfı yerine Apicontroller sınıfını devralınır.

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

Yapı Iskelesi Ekle Iletişim kutusunda Web API denetleyicisi-boşseçeneğini belirleyin. Ekle'ye tıklayın.

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

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

Note

Denetleyicilerinizi denetleyiciler adlı bir klasöre koymanız gerekmez. Klasör adı, kaynak dosyalarınızı düzenlemenin yalnızca uygun bir yoludur.

Bu dosya henüz açık değilse, açmak için dosyaya çift tıklayın. Bu dosyadaki kodu aşağıdaki kodla 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);
        }
    }
}

Bu örneği basit tutmak için, ürünler Controller sınıfının içindeki sabit bir dizide depolanır. Kuşkusuz, gerçek bir uygulamada bir veritabanını sorgulayıp başka bir dış veri kaynağı kullanacaksınız.

Denetleyici, ürünleri döndüren iki yöntemi tanımlar:

  • GetAllProducts yöntemi, tüm ürün listesini ıenumerable<ürün> türü olarak döndürür.
  • GetProduct yöntemi, KIMLIĞINE göre tek bir ürün arar.

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

Controller yöntemi URI
GetAllProducts /api/Products
GetProduct /api/Products/ID

GetProduct yöntemi için URI 'deki kimlik bir yer tutucudur. Örneğin, KIMLIĞI 5 olan ürünü almak için URI api/products/5.

Web API 'sinin denetleyici yöntemlerine HTTP isteklerini nasıl yönlendirdiğini hakkında daha fazla bilgi için bkz. ASP.NET Web API 'de 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ını yapmak ve ayrıca sayfayı sonuçlarla güncelleştirmek için jQuery kullanacağız.

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

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

Bu dosyadaki her şeyi aşağıdakiler ile 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 almak için birkaç yolu vardır. Bu örnekte, Microsoft Ajax CDN'yi kullandım. Ayrıca, http://jquery.com/adresinden indirebilirsiniz ve ASP.net "Web API" proje şablonu jQuery de içerir.

Ürünlerin bir listesini alma

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

JQuery getJSON IşLEVI bir AJAX isteği gönderir. Yanıt, JSON nesnelerinin dizisini içerir. done işlevi, istek başarılı olursa çağrılan bir geri çağırma işlemini belirtir. Geri aramada, DOM 'ı ü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'));
            });
        });
});

KIMLIĞE göre ürün alma

Bir ürünü KIMLIĞE göre almak için, "/api/Products/ıd"IÇIN 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 getJSON çağrısı yaptık, ancak bu kez KIMLIĞI istek URI 'sine yerleştirtik. 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 bir ü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 Isteğ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 faydalı olabilir. Bunu, Internet Explorer 9 ' da F12 geliştirici araçlarını kullanarak yapabilirsiniz. Internet Explorer 9 ' da, araçları açmak için F12 tuşuna basın. Ağ sekmesine tıklayın ve Yakalamayı Başlat' a basın. Şimdi Web sayfasına geri dönün ve F5 'e basarak Web sayfasını yeniden yükleyin. 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 URI "API/Products/" girdisini bulun. Bu girişi seçin ve ayrıntılı görünüme git ' etıklayın. Ayrıntı görünümünde, istek ve yanıt üst bilgilerini ve gövdeleri görüntülemek için sekmeler vardır. Örneğin, istek üstbilgileri sekmesine tıklarsanız, istemcinin Accept üst bilgisinde "Application/JSON" isteğinde bulunduğunu görebilirsiniz.

Yanıt gövdesi sekmesine tıklarsanız, ürün listesinin JSON olarak serileştirilme şeklini görebilirsiniz. Diğer Tarayıcıların benzer işlevleri vardır. Bir Web hata ayıklama proxy 'si olan diğer faydalı bir araç, Fiddler'dir. Fiddler 'ı kullanarak HTTP trafiğinizi görüntüleyebilir ve ayrıca, istekteki HTTP üstbilgileri üzerinde tam denetim elde etmenizi sağlayan HTTP istekleri oluşturabilirsiniz.

Bkz. Azure 'da çalışan bu uygulama

Canlı bir Web uygulaması olarak çalışan tamamlanmış siteyi görmek istiyor musunuz? Aşağıdaki düğmeye tıklayarak uygulamanın tüm 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:

Sonraki Adımlar