Używanie Web API z ASP.NET Web Forms

Autor: Mike Wasson

W tym samouczku przedstawiono procedurę dodawania internetowego interfejsu API do tradycyjnej aplikacji ASP.NET Web Forms w ASP.NET 4.x.

Przegląd

Mimo że ASP.NET internetowy interfejs API jest pakowany przy użyciu ASP.NET MVC, łatwo jest dodać internetowy interfejs API do tradycyjnej aplikacji ASP.NET Web Forms.

Aby użyć internetowego interfejsu API w aplikacji Web Forms, należy wykonać dwa główne kroki:

• Dodaj kontroler internetowego interfejsu API, który pochodzi z klasy ApiController .
• Dodaj tabelę tras do metody Application_Start .

Tworzenie projektu formularzy internetowych

Uruchom program Visual Studio i wybierz pozycję Nowy projekt na stronie Start . Lub w menu Plik wybierz pozycję Nowy , a następnie pozycję Projekt.

W okienku Szablony wybierz pozycję Zainstalowane szablony i rozwiń węzeł Visual C# . W obszarze Visual C# wybierz pozycję Sieć Web. Na liście szablonów projektów wybierz pozycję ASP.NET Aplikacja formularzy internetowych. Wprowadź nazwę projektu i kliknij przycisk OK.

Tworzenie modelu i kontrolera

W tym samouczku użyto tych samych klas modelu i kontrolerów, co samouczek Wprowadzenie .

Najpierw dodaj klasę modelu. W Eksploratorze rozwiązań kliknij prawym przyciskiem myszy projekt i wybierz polecenie Dodaj klasę. Nadaj klasie nazwę Product i dodaj następującą implementację:

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

Następnie dodaj kontroler internetowego interfejsu API do projektu. Kontroler jest obiektem obsługującym żądania HTTP dla internetowego interfejsu API.

W Eksplorator rozwiązań kliknij prawym przyciskiem myszy projekt. Wybierz pozycję Dodaj nowy element.

W obszarze Zainstalowane szablony rozwiń węzeł Visual C# i wybierz pozycję Web. Następnie z listy szablonów wybierz pozycję Klasa kontrolera interfejsu API sieci Web. Nadaj kontrolerowi nazwę "ProductsController" i kliknij przycisk Dodaj.

Kreator Dodawania nowego elementu utworzy plik o nazwie ProductsController.cs. Usuń metody dodane przez kreatora i dodaj następujące metody:

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

Aby uzyskać więcej informacji na temat kodu w tym kontrolerze, zobacz samouczek Wprowadzenie .

Dodawanie informacji o routingu

Następnie dodamy trasę identyfikatora URI, aby identyfikatory URI w formie "/api/products/" były kierowane do kontrolera.

W Eksploratorze rozwiązań kliknij dwukrotnie plik Global.asax, aby otworzyć plik za kodem Global.asax.cs. Dodaj następującą instrukcję using .

using System.Web.Http;

Następnie dodaj następujący kod do metody Application_Start :

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

Aby uzyskać więcej informacji na temat tabel routingu, zobacz Routing w interfejsie API sieci Web ASP.NET.

Dodaj AJAX po stronie klienta

To wszystko, co musisz zrobić, aby utworzyć interfejs API, do którego klienci mogą uzyskiwać dostęp. Teraz dodajmy stronę HTML, która używa zapytania jQuery do wywoływania interfejsu API.

Upewnij się, że strona wzorcowa (na przykład Site.Master) zawiera element ContentPlaceHolder z ID="HeadContent":

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

Otwórz plik Default.aspx. Zastąp standardowy tekst, który znajduje się w głównej sekcji zawartości, jak pokazano poniżej:

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

Następnie dodaj odwołanie do pliku źródłowego jQuery w HeaderContent sekcji:

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

Uwaga: możesz łatwo dodać odwołanie do skryptu, przeciągając i upuszczając plik z Eksploratora rozwiązań do okna edytora kodu.

Poniżej tagu skryptu jQuery dodaj następujący blok skryptu:

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

Po załadowaniu dokumentu ten skrypt wysyła żądanie AJAX do "api/products". Żądanie zwraca listę produktów w formacie JSON. Skrypt dodaje informacje o produkcie do tabeli HTML.

Po uruchomieniu aplikacji powinna wyglądać następująco: