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

, Mike te sonby Mike Wasson

Tamamlanmış projeyi indirDownload Completed Project

Bu öğreticide, ürünlerin listesini döndüren bir Web API 'SI oluşturmak için ASP.NET Web API kullanacaksınız.In this tutorial, you will use ASP.NET Web API to create a web API that returns a list of products.

HTTP yalnızca Web sayfalarına hizmet vermek için değildir.HTTP is not just for serving up web pages. HTTP Ayrıca hizmet ve verileri kullanıma sunan API 'Leri oluşturmaya yönelik güçlü bir platformdur.HTTP is also a powerful platform for building APIs that expose services and data. HTTP basit, esnek ve ubititous.HTTP is simple, flexible, and ubiquitous. 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.Almost any platform that you can think of has an HTTP library, so HTTP services can reach a broad range of clients, including browsers, mobile devices, and traditional desktop applications.

ASP.NET Web API 'SI, .NET Framework en üstünde Web API 'Leri oluşturmaya yönelik bir çerçevedir.ASP.NET Web API is a framework for building web APIs on top of the .NET Framework.

Öğreticide kullanılan yazılım sürümleriSoftware versions used in the tutorial

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.See Create a web API with ASP.NET Core and Visual Studio for Windows for a newer version of this tutorial.

Web API projesi oluşturmaCreate a Web API Project

Bu öğreticide, ürünlerin listesini döndüren bir Web API 'SI oluşturmak için ASP.NET Web API kullanacaksınız.In this tutorial, you will use ASP.NET Web API to create a web API that returns a list of products. Ön uç Web sayfası, sonuçları göstermek için jQuery kullanır.The front-end web page uses jQuery to display the results.

Visual Studio 'Yu başlatın ve Başlangıç sayfasından Yeni proje ' yi seçin.Start Visual Studio and select New Project from the Start page. Ya da Dosya menüsünde Yeni ' yi ve ardından Proje' yi seçin.Or, from the File menu, select New and then Project.

Şablonlar bölmesinde, yüklü şablonlar ' ı seçin ve görsel C# düğümünü genişletin.In the Templates pane, select Installed Templates and expand the Visual C# node. Görsel C# bölümünde Web' i seçin.Under Visual C#, select Web. Proje şablonları listesinde ASP.NET Web uygulaması' nı seçin.In the list of project templates, select ASP.NET Web Application. Projeyi "ProductsApp" olarak adlandırın ve Tamam' a tıklayın.Name the project "ProductsApp" and click OK.

Yeni ASP.NET projesi Iletişim kutusunda boş şablonu seçin.In the New ASP.NET Project dialog, select the Empty template. "için klasör ve temel başvurular eklemek "altında, Web API 'sinikontrol edin.Under "Add folders and core references for", check Web API. Tamam düğmesine tıklayın.Click OK.

Note

Ayrıca, "Web API" şablonunu kullanarak bir Web API projesi oluşturabilirsiniz.You can also create a Web API project using the "Web API" template. Web API şablonu, API yardım sayfalarını sağlamak için ASP.NET MVC kullanır.The Web API template uses ASP.NET MVC to provide API help pages. Bu öğretici için boş şablon kullanıyorum çünkü Web API 'sini MVC olmadan göstermek istiyorum.I'm using the Empty template for this tutorial because I want to show Web API without MVC. Genel olarak, Web API 'sini kullanmak için ASP.NET MVC 'yi bilmeniz gerekmez.In general, you don't need to know ASP.NET MVC to use Web API.

Model EklemeAdding a Model

Model , uygulamanızdaki verileri temsil eden bir nesnedir.A model is an object that represents the data in your application. 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.ASP.NET Web API can automatically serialize your model to JSON, XML, or some other format, and then write the serialized data into the body of the HTTP response message. Bir istemci serileştirme biçimini okuyabilirler, nesne seri durumdan çıkarabilirler.As long as a client can read the serialization format, it can deserialize the object. Çoğu istemci, XML veya JSON 'yi ayrıştırabilirler.Most clients can parse either XML or JSON. Ayrıca, istemci, HTTP istek iletisinde Accept üst bilgisini ayarlayarak hangi biçimin istediğini belirtebilir.Moreover, the client can indicate which format it wants by setting the Accept header in the HTTP request message.

Bir ürünü temsil eden basit bir model oluşturarak başlayalım.Let's start by creating a simple model that represents a product.

Çö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.If Solution Explorer is not already visible, click the View menu and select Solution Explorer. Çözüm Gezgini modeller klasörüne sağ tıklayın.In Solution Explorer, right-click the Models folder. Bağlam menüsünden Ekle ' yi ve ardından sınıf' ı seçin.From the context menu, select Add then select Class.

Sınıfı ürün""adlandırın.Name the class "Product". Aşağıdaki özellikleri Product sınıfına ekleyin.Add the following properties to the Product class.

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 EklemeAdding a Controller

Web API 'sinde, DENETLEYICI http isteklerini işleyen bir nesnedir.In Web API, a controller is an object that handles HTTP requests. Ürünlerin bir listesini ya da ID tarafından belirtilen tek bir ürünü döndüren bir denetleyici ekleyeceğiz.We'll add a controller that can return either a list of products or a single product specified by ID.

Note

ASP.NET MVC kullandıysanız, denetleyicilerle zaten bilgi sahibisiniz.If you have used ASP.NET MVC, you are already familiar with controllers. Web API denetleyicileri MVC denetleyicilerine benzerdir, ancak Controller sınıfı yerine Apicontroller sınıfını devralınır.Web API controllers are similar to MVC controllers, but inherit the ApiController class instead of the Controller class.

Çözüm Gezgini, denetleyiciler klasörüne sağ tıklayın.In Solution Explorer, right-click the Controllers folder. Ekle ' yi ve ardından Denetleyici' yi seçin.Select Add and then select Controller.

Yapı Iskelesi Ekle Iletişim kutusunda Web API denetleyicisi-boşseçeneğini belirleyin.In the Add Scaffold dialog, select Web API Controller - Empty. Ekle'ye tıklayın.Click Add.

Denetleyici Ekle iletişim kutusunda, denetleyiciyi "productscontroller"olarak adlandırın.In the Add Controller dialog, name the controller "ProductsController". Ekle'ye tıklayın.Click Add.

Yapı iskelesi, denetleyiciler klasöründe ProductsController.cs adlı bir dosya oluşturur.The scaffolding creates a file named ProductsController.cs in the Controllers folder.

Note

Denetleyicilerinizi denetleyiciler adlı bir klasöre koymanız gerekmez.You don't need to put your controllers into a folder named Controllers. Klasör adı, kaynak dosyalarınızı düzenlemenin yalnızca uygun bir yoludur.The folder name is just a convenient way to organize your source files.

Bu dosya henüz açık değilse, açmak için dosyaya çift tıklayın.If this file is not open already, double-click the file to open it. Bu dosyadaki kodu aşağıdaki kodla değiştirin:Replace the code in this file with the following:

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.To keep the example simple, products are stored in a fixed array inside the controller class. Kuşkusuz, gerçek bir uygulamada bir veritabanını sorgulayıp başka bir dış veri kaynağı kullanacaksınız.Of course, in a real application, you would query a database or use some other external data source.

Denetleyici, ürünleri döndüren iki yöntemi tanımlar:The controller defines two methods that return products:

  • GetAllProducts yöntemi, tüm ürün listesini ıenumerable<ürün> türü olarak döndürür.The GetAllProducts method returns the entire list of products as an IEnumerable<Product> type.
  • GetProduct yöntemi, KIMLIĞINE göre tek bir ürün arar.The GetProduct method looks up a single product by its ID.

İşte bu kadar!That's it! Çalışan bir Web API 'SI var.You have a working web API. Denetleyicideki her yöntem bir veya daha fazla URI 'ye karşılık gelir:Each method on the controller corresponds to one or more URIs:

Controller yöntemiController Method URIURI
GetAllProductsGetAllProducts /api/Products/api/products
GetProductGetProduct /api/Products/ID/api/products/id

GetProduct yöntemi için URI 'deki kimlik bir yer tutucudur.For the GetProduct method, the id in the URI is a placeholder. Örneğin, KIMLIĞI 5 olan ürünü almak için URI api/products/5.For example, to get the product with ID of 5, the URI is 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.For more information about how Web API routes HTTP requests to controller methods, see Routing in ASP.NET Web API.

JavaScript ve jQuery ile Web API 'sini çağırmaCalling the Web API with Javascript and jQuery

Bu bölümde, Web API 'sini çağırmak için AJAX kullanan bir HTML sayfası ekleyeceğiz.In this section, we'll add an HTML page that uses AJAX to call the web API. AJAX çağrılarını yapmak ve ayrıca sayfayı sonuçlarla güncelleştirmek için jQuery kullanacağız.We'll use jQuery to make the AJAX calls and also to update the page with the results.

Çözüm Gezgini, projeye sağ tıklayın ve Ekle' yi ve ardından Yeni öğe' yi seçin.In Solution Explorer, right-click the project and select Add, then select New Item.

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.In the Add New Item dialog, select the Web node under Visual C#, and then select the HTML Page item. Sayfayı index. html""olarak adlandırın.Name the page "index.html".

Bu dosyadaki her şeyi aşağıdakiler ile değiştirin:Replace everything in this file with the following:

<!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.There are several ways to get jQuery. Bu örnekte, Microsoft Ajax CDN'yi kullandım.In this example, I used the Microsoft Ajax CDN. Ayrıca, http://jquery.com/adresinden indirebilirsiniz ve ASP.net "Web API" proje şablonu jQuery de içerir.You can also download it from http://jquery.com/, and the ASP.NET "Web API" project template includes jQuery as well.

Ürünlerin bir listesini almaGetting a List of Products

Ürünlerin bir listesini almak için "/api/Products"bir HTTP GET isteği gönderin.To get a list of products, send an HTTP GET request to "/api/products".

JQuery getJSON IşLEVI bir AJAX isteği gönderir.The jQuery getJSON function sends an AJAX request. Yanıt, JSON nesnelerinin dizisini içerir.The response contains array of JSON objects. done işlevi, istek başarılı olursa çağrılan bir geri çağırma işlemini belirtir.The done function specifies a callback that is called if the request succeeds. Geri aramada, DOM 'ı ürün bilgileriyle güncelleştiririz.In the callback, we update the DOM with the product information.

$(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 almaGetting a Product By ID

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.To get a product by ID, send an HTTP GET request to "/api/products/id", where id is the product ID.

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.We still call getJSON to send the AJAX request, but this time we put the ID in the request URI. Bu istekten gelen yanıt, tek bir ürünün JSON gösterimidir.The response from this request is a JSON representation of a single product.

Uygulamayı ÇalıştırmaRunning the Application

Uygulamada hata ayıklamaya başlamak için F5'e basın.Press F5 to start debugging the application. Web sayfası aşağıdaki gibi görünmelidir:The web page should look like the following:

KIMLIĞE göre bir ürün almak için KIMLIĞI girin ve ara ' ya tıklayın:To get a product by ID, enter the ID and click Search:

Geçersiz bir KIMLIK girerseniz, sunucu bir HTTP hatası döndürür:If you enter an invalid ID, the server returns an HTTP error:

HTTP Isteğini ve yanıtını görüntülemek için F12 kullanmaUsing F12 to View the HTTP Request and Response

Bir HTTP hizmetiyle çalışırken, HTTP isteği ve yanıt iletilerini görmek çok faydalı olabilir.When you are working with an HTTP service, it can be very useful to see the HTTP request and response messages. Bunu, Internet Explorer 9 ' da F12 geliştirici araçlarını kullanarak yapabilirsiniz.You can do this by using the F12 developer tools in Internet Explorer 9. Internet Explorer 9 ' da, araçları açmak için F12 tuşuna basın.From Internet Explorer 9, press F12 to open the tools. Ağ sekmesine tıklayın ve Yakalamayı Başlat' a basın.Click the Network tab and press Start Capturing. Şimdi Web sayfasına geri dönün ve F5 'e basarak Web sayfasını yeniden yükleyin.Now go back to the web page and press F5 to reload the web page. Internet Explorer, tarayıcı ile Web sunucusu arasındaki HTTP trafiğini yakalar.Internet Explorer will capture the HTTP traffic between the browser and the web server. Özet görünümü bir sayfanın tüm ağ trafiğini gösterir:The summary view shows all the network traffic for a page:

Göreli URI "API/Products/" girdisini bulun.Locate the entry for the relative URI "api/products/". Bu girişi seçin ve ayrıntılı görünüme git ' etıklayın.Select this entry and click Go to detailed view. 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.In the detail view, there are tabs to view the request and response headers and bodies. Örneğin, istek üstbilgileri sekmesine tıklarsanız, istemcinin Accept üst bilgisinde "Application/JSON" isteğinde bulunduğunu görebilirsiniz.For example, if you click the Request headers tab, you can see that the client requested "application/json" in the Accept header.

Yanıt gövdesi sekmesine tıklarsanız, ürün listesinin JSON olarak serileştirilme şeklini görebilirsiniz.If you click the Response body tab, you can see how the product list was serialized to JSON. Diğer Tarayıcıların benzer işlevleri vardır.Other browsers have similar functionality. Bir Web hata ayıklama proxy 'si olan diğer faydalı bir araç, Fiddler'dir.Another useful tool is Fiddler, a web debugging proxy. 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.You can use Fiddler to view your HTTP traffic, and also to compose HTTP requests, which gives you full control over the HTTP headers in the request.

Bkz. Azure 'da çalışan bu uygulamaSee this App Running on Azure

Canlı bir Web uygulaması olarak çalışan tamamlanmış siteyi görmek istiyor musunuz?Would you like to see the finished site running as a live web app? Aşağıdaki düğmeye tıklayarak uygulamanın tüm sürümünü Azure hesabınıza dağıtabilirsiniz.You can deploy a complete version of the app to your Azure account by simply clicking the following button.

Bu çözümü Azure 'a dağıtmak için bir Azure hesabınızın olması gerekir.You need an Azure account to deploy this solution to Azure. Henüz bir hesabınız yoksa, aşağıdaki seçeneklere sahip olursunuz:If you do not already have an account, you have the following options:

Sonraki AdımlarNext Steps