Uso de web API con formularios web de ASP.NET

de Mike Wasson

Este tutorial le guía por los pasos necesarios para agregar la API web a una aplicación tradicional de ASP.NET Web Forms en ASP.NET 4.x.

Visión general

Aunque ASP.NET API web se empaqueta con ASP.NET MVC, es fácil agregar api web a una aplicación tradicional de ASP.NET Web Forms.

Para usar la API web en una aplicación de Formularios Web Forms, hay dos pasos principales:

• Agregue un controlador de API web que derive de la clase ApiController .
• Agregue una tabla de rutas al método Application_Start .

Creación de un proyecto de Formularios web

Inicie Visual Studio y seleccione Nuevo proyecto en la página Inicio . O bien, en el menú Archivo , seleccione Nuevo y, a continuación, Proyecto.

En el panel Plantillas , seleccione Plantillas instaladas y expanda el nodo Visual C# . En Visual C#, seleccione Web. En la lista de plantillas de proyecto, seleccione Aplicación de Formularios Web ASP.NET. Escriba un nombre para el proyecto y haga clic en Aceptar.

Crear el modelo y el controlador

En este tutorial se usan las mismas clases de modelo y controlador que el tutorial introducción .

En primer lugar, agregue una clase de modelo. En el Explorador de soluciones, haga clic con el botón derecho en el proyecto y seleccione Agregar clase. Asigne el nombre Product a la clase y agregue la siguiente implementación:

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

A continuación, agregue un controlador de API web al proyecto. Un controlador es el objeto que controla las solicitudes HTTP para la API web.

En el Explorador de soluciones, haga clic con el botón derecho en el proyecto. Seleccione Agregar nuevo elemento.

En Plantillas instaladas, expanda Visual C# y seleccione Web. A continuación, en la lista de plantillas, seleccione Clase de controlador de API web. Asigne al controlador el nombre "ProductsController" y haga clic en Agregar.

El Asistente para agregar nuevo elemento creará un archivo denominado ProductsController.cs. Elimine los métodos que incluyó el asistente y agregue los métodos siguientes:

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 obtener más información sobre el código de este controlador, consulte el tutorial Introducción .

Agregar información de enrutamiento

A continuación, agregaremos una ruta de URI para que los URI del formulario "/api/products/" se enruten al controlador.

En el Explorador de soluciones, haga doble clic en Global.asax para abrir el archivo de código subyacente Global.asax.cs. Añada la siguiente instrucción using.

using System.Web.Http;

A continuación, agregue el código siguiente al método Application_Start :

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

Para obtener más información sobre las tablas de enrutamiento, consulte Enrutamiento en ASP.NET API web.

Agregar AJAX del lado del cliente

Eso es todo lo que necesita para crear una API web a la que puedan acceder los clientes. Ahora vamos a agregar una página HTML que usa jQuery para llamar a la API.

Asegúrese de que la página maestra (por ejemplo, Site.Master) incluya un elemento ContentPlaceHolder con ID="HeadContent":

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

Abra el archivo Default.aspx. Reemplace el texto reutilizable que se encuentra en la sección de contenido principal, como se muestra:

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

A continuación, agregue una referencia al archivo de origen de jQuery en la HeaderContent sección :

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

Nota: Puede agregar fácilmente la referencia de script arrastrando y colocando el archivo del Explorador de soluciones en la ventana del editor de código.

Debajo de la etiqueta de script jQuery, agregue el siguiente bloque 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>

Cuando se carga el documento, este script realiza una solicitud AJAX a "api/products". La solicitud devuelve una lista de productos en formato JSON. El script agrega la información del producto a la tabla HTML.

Al ejecutar la aplicación, debería tener este aspecto: