Partilhar via


Uso da API Web com Web Forms do ASP.NET

por Mike Wasson

Este tutorial orienta você pelas etapas para adicionar a API Web a um aplicativo de ASP.NET Web Forms tradicional no ASP.NET 4.x.

Visão geral

Embora ASP.NET Web API seja empacotado com ASP.NET MVC, é fácil adicionar a API Web a um aplicativo de ASP.NET Web Forms tradicional.

Para usar a API Web em um aplicativo Web Forms, há duas etapas main:

  • Adicione um controlador de API Web que deriva da classe ApiController .
  • Adicione uma tabela de rotas ao método Application_Start .

Criar um projeto de Web Forms

Inicie o Visual Studio e selecione Novo Projeto na página Iniciar . Ou, no menu Arquivo , selecione Novo e, em seguida, Projeto.

No painel Modelos , selecione Modelos Instalados e expanda o nó Visual C #. Em Visual C#, selecione Web. Na lista de modelos de projeto, selecione ASP.NET Web Forms Aplicativo. Insira um nome para o projeto e clique em OK.

Captura de tela do novo painel de modelo de projeto, mostrando as opções de menu disponíveis para criar o novo formulário de aplicativo web A SP dot NET.

Criar o modelo e o controlador

Este tutorial usa as mesmas classes de modelo e controlador que o tutorial Introdução.

Primeiro, adicione uma classe de modelo. Em Gerenciador de Soluções, clique com o botão direito do mouse no projeto e selecione Adicionar Classe. Nomeie a classe Product e adicione a seguinte implementação:

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

Em seguida, adicione um controlador de API Web ao projeto., um controlador é o objeto que manipula solicitações HTTP para a API Web.

No Gerenciador de Soluções, clique com o botão direito do mouse no nome do projeto. Selecione Adicionar Novo Item.

Captura de tela das opções de menu do gerenciador de soluções, mostrando um guia visual de como adicionar um novo item de projeto.

Em Modelos Instalados, expanda Visual C# e selecione Web. Em seguida, na lista de modelos, selecione Classe de Controlador de API Web. Nomeie o controlador como "ProductsController" e clique em Adicionar.

Captura de tela mostrando como adicionar um novo item da Web como uma classe de controlador Web A P I, rotulando-o como Controlador de Produto no campo nome.

O assistente Adicionar Novo Item criará um arquivo chamado ProductsController.cs. Exclua os métodos que o assistente incluiu e adicione os seguintes métodos:

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

Para obter mais informações sobre o código neste controlador, consulte o tutorial Introdução.

Adicionar informações de roteamento

Em seguida, adicionaremos uma rota de URI para que os URIs do formulário "/api/products/" sejam roteados para o controlador.

Em Gerenciador de Soluções, clique duas vezes em Global.asax para abrir o arquivo code-behind Global.asax.cs. Adicione a instrução using a seguir.

using System.Web.Http;

Em seguida, adicione o seguinte código ao método Application_Start :

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

Para obter mais informações sobre tabelas de roteamento, consulte Roteamento em ASP.NET Web API.

Adicionar Client-Side AJAX

Isso é tudo o que você precisa para criar uma API Web que os clientes possam acessar. Agora vamos adicionar uma página HTML que usa jQuery para chamar a API.

Verifique se a página master (por exemplo, Site.Master) inclui um ContentPlaceHolder com ID="HeadContent":

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

Abra o arquivo Default.aspx. Substitua o texto clichê que está na seção de conteúdo main, conforme mostrado:

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

Em seguida, adicione uma referência ao arquivo de origem jQuery na HeaderContent seção :

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

Observação: você pode adicionar facilmente a referência de script arrastando e soltando o arquivo de Gerenciador de Soluções para a janela do editor de código.

Capturas de tela das janelas do gerenciador de soluções e do editor de código, usando uma seta verde para mostrar onde remover o script no código.

Abaixo da marca de script jQuery, adicione o seguinte bloco de script:

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

Quando o documento é carregado, esse script faz uma solicitação AJAX para "api/products". A solicitação retorna uma lista de produtos no formato JSON. O script adiciona as informações do produto à tabela HTML.

Quando você executa o aplicativo, ele deve ter esta aparência:

Captura de tela do navegador da Web exibindo o rótulo, os nomes e os preços dos produtos, como um exemplo para representar a aparência dele.