Использование веб-API с веб-формами ASP.NET

Майк Уосон

В этом руководстве описаны шаги по добавлению веб-API в традиционное приложение веб-форм ASP.NET в ASP.NET 4.x.

Обзор

Хотя веб-API ASP.NET упаковается с ASP.NET MVC, можно легко добавить веб-API в традиционное приложение веб-форм ASP.NET.

Чтобы использовать веб-API в приложении веб-форм, необходимо выполнить два основных действия.

• Добавьте контроллер веб-API, производный от класса ApiController .
• Добавьте таблицу маршрутов в метод Application_Start .

Создание проекта веб-форм

Запустите Visual Studio и выберите новый проект на начальной странице. Или в меню "Файл " выберите "Создать " и " Проект".

В области "Шаблоны " выберите "Установленные шаблоны " и разверните узел Visual C# . В разделе Visual C# выберите "Веб". В списке шаблонов проектов выберите ASP.NET приложение веб-форм. Введите имя проекта и нажмите кнопку "ОК".

Создание модели и контроллера

В этом руководстве используются те же классы модели и контроллера, что и учебник по началу работы .

Сначала добавьте класс модели. В обозревателе решений щелкните проект правой кнопкой мыши и выберите "Добавить класс". Назовите класс Product и добавьте следующую реализацию:

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

Затем добавьте контроллер веб-API в проект. Контроллер — это объект, который обрабатывает HTTP-запросы для веб-API.

В обозревателе решений щелкните проект правой кнопкой мыши. Выберите "Добавить новый элемент".

В разделе "Установленные шаблоны" разверните Visual C# и выберите веб-сайт. Затем в списке шаблонов выберите класс контроллера веб-API. Назовите контроллер ProductsController и нажмите кнопку "Добавить".

Мастер добавления нового элемента создаст файл с именем ProductsController.cs. Удалите методы, включенные мастером, и добавьте следующие методы:

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

Дополнительные сведения о коде в этом контроллере см. в руководстве по началу работы .

Добавление сведений о маршрутизации

Затем мы добавим маршрут URI, чтобы URI формы "/api/products/" перенаправляются на контроллер.

В обозревателе решений дважды щелкните Global.asax, чтобы открыть файл программной части Global.asax.cs. Добавьте следующую инструкцию using.

using System.Web.Http;

Затем добавьте следующий код в метод Application_Start :

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

Дополнительные сведения о таблицах маршрутизации см. в разделе "Маршрутизация" в веб-API ASP.NET.

Добавление AJAX на стороне клиента

Это все, что вам нужно создать веб-API, к которому клиенты могут получить доступ. Теперь добавим HTML-страницу, которая использует jQuery для вызова API.

Убедитесь, что эталонная страница (например, Site.Master) включает ContentPlaceHolderID="HeadContent" в себя.

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

Откройте файл Default.aspx. Замените стандартный текст, который находится в главном разделе содержимого, как показано ниже.

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

Затем добавьте ссылку на исходный файл jQuery в HeaderContent разделе:

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

Примечание. Вы можете легко добавить ссылку на скрипт, перетаскивая файл из обозревателя решений в окно редактора кода.

Под тегом скрипта jQuery добавьте следующий блок скрипта:

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

Когда документ загружается, этот скрипт выполняет запрос AJAX к api/products. Запрос возвращает список продуктов в формате JSON. Скрипт добавляет сведения о продукте в html-таблицу.

При запуске приложения он должен выглядеть следующим образом: