ASP.NET Web Forms ile Web API Kullanma

Tarafından Mike Wasson

Bu öğretici, ASP.NET 4.x'te geleneksel bir ASP.NET Web Forms uygulamasına Web API'sini ekleme adımlarında size yol gösterir.

Genel Bakış

ASP.NET Web API'si ASP.NET MVC ile paketlenmiş olsa da, geleneksel bir ASP.NET Web Forms uygulamasına Web API'sini eklemek kolaydır.

Web API'sini bir Web Forms uygulamasında kullanmak için iki ana adım vardır:

• ApiController sınıfından türetilen bir Web API denetleyicisi ekleyin.
• Application_Start yöntemine bir yol tablosu ekleyin.

Web Forms Projesi Oluşturma

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 uygulama ASP.NET Web Forms'yi seçin. Proje için bir ad girin ve Tamam'a tıklayın.

Model ve Denetleyici oluşturma

Bu öğretici, Başlarken öğreticisi ile aynı model ve denetleyici sınıflarını kullanır.

İlk olarak bir model sınıfı ekleyin. Çözüm Gezgini'da projeye sağ tıklayın ve Sınıf Ekle'yi seçin. Sınıfı Product olarak adlandırın ve aşağıdaki uygulamayı ekleyin:

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

Ardından projeye bir Web API denetleyicisi ekleyin. Denetleyici , Web API'sine yönelik HTTP isteklerini işleyen nesnedir.

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

Yüklü Şablonlar'ın altında Visual C# öğesini genişletin ve Web'i seçin. Ardından şablon listesinden Web API Denetleyicisi Sınıfı'nı seçin. Denetleyiciye "ProductsController" adını verin ve Ekle'ye tıklayın.

Yeni Öğe Ekle sihirbazı ProductsController.cs adlı bir dosya oluşturur. Sihirbazın dahil olduğu yöntemleri silin ve aşağıdaki yöntemleri ekleyin:

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

Bu denetleyicideki kod hakkında daha fazla bilgi için Başlarken öğreticisine bakın.

Yönlendirme Bilgileri Ekleme

Ardından, "/api/products/" biçimindeki URI'lerin denetleyiciye yönlendirilmiş olması için bir URI yolu ekleyeceğiz.

Çözüm Gezgini global.asax dosyasına çift tıklayarak Global.asax.cs dosyasını açın. Aşağıdaki using deyimini ekleyin.

using System.Web.Http;

Ardından aşağıdaki kodu Application_Start yöntemine ekleyin:

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

Yönlendirme tabloları hakkında daha fazla bilgi için bkz . ASP.NET Web API'sinde yönlendirme.

AJAX Client-Side ekleme

İstemcilerin erişebileceği bir web API'sini oluşturmak için ihtiyacınız olan tek şey bu. Şimdi API'yi çağırmak için jQuery kullanan bir HTML sayfası ekleyelim.

Ana sayfanızda (örneğin, Site.Master) ile ID="HeadContent"bir ContentPlaceHolder bulunduğuna emin olun:

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

Default.aspx dosyasını açın. Ana içerik bölümündeki ortak metni gösterildiği gibi değiştirin:

<%@ 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>

Ardından, bölümünde jQuery kaynak dosyasına HeaderContent bir başvuru ekleyin:

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

Not: Dosyayı Çözüm Gezgini kod düzenleyicisi penceresine sürükleyip bırakarak betik başvurusunu kolayca ekleyebilirsiniz.

jQuery betik etiketinin altına aşağıdaki betik bloğunu ekleyin:

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

Belge yüklendiğinde, bu betik "api/products" için bir AJAX isteğinde bulunur. İstek, JSON biçimindeki ürünlerin listesini döndürür. Betik, ürün bilgilerini HTML tablosuna ekler.

Uygulamayı çalıştırdığınızda aşağıdaki gibi görünmelidir: