Kom igång med ASP.NET Web API 2 (C#)

av Mike Wasson

Ladda ned slutfört projekt

I den här självstudien använder du ASP.NET webb-API för att skapa ett webb-API som returnerar en lista över produkter.

HTTP är inte bara för servering av webbsidor. HTTP är också en kraftfull plattform för att skapa API:er som exponerar tjänster och data. HTTP är enkelt, flexibelt och allestädes närvarande. Nästan alla plattformar som du kan tänka dig har ett HTTP-bibliotek, så ATT HTTP-tjänster kan nå ett brett utbud av klienter, inklusive webbläsare, mobila enheter och traditionella skrivbordsprogram.

ASP.NET webb-API är ett ramverk för att skapa webb-API:er ovanpå .NET Framework.

Programvaruversioner som används i handledningen

Se Skapa ett webb-API med ASP.NET Core och Visual Studio för Windows för en nyare version av denna handledning.

Skapa ett webb-API-projekt

I den här självstudien använder du ASP.NET webb-API för att skapa ett webb-API som returnerar en lista över produkter. Frontend-webbsidan använder jQuery för att visa resultatet.

Skärmbild av webbläsarfönstret för den lokala värden som visar exempelprojektet med en lista över produkter, deras priser och en sökning via ID-fält och -knapp.

Starta Visual Studio och välj Nytt projekt på startsidan . Eller så väljer du Nytt på Arkiv-menyn och sedan Projekt.

I fönstret Mallar väljer du Installerade mallar och expanderar noden Visual C# . Under Visual C# väljer du Webb. I listan över projektmallar väljer du ASP.NET webbprogram. Ge projektet namnet "ProductsApp" och klicka på OK.

Skärmbild av mallalternativen

I dialogrutan Nytt ASP.NET projekt väljer du mallen Tom . Under "Lägg till mappar och kärnreferenser för" kontrollerar du webb-API:et. Klicka på OK.

Skärmbild av dialogrutan för det nya projektet med olika mallalternativ och tre val för mappar och kärnreferenser.

Anmärkning

Du kan också skapa ett webb-API-projekt med hjälp av mallen "Webb-API". Webb-API-mallen använder ASP.NET MVC för att tillhandahålla API-hjälpsidor. Jag använder mallen Empty för den här självstudien eftersom jag vill visa Web API utan MVC. I allmänhet behöver du inte känna till ASP.NET MVC för att använda webb-API.

Lägga till en modell

En modell är ett objekt som representerar data i ditt program. ASP.NET webb-API kan automatiskt serialisera din modell till JSON, XML eller något annat format och sedan skriva serialiserade data i brödtexten i HTTP-svarsmeddelandet. Så länge en klient kan läsa serialiseringsformatet kan det deserialisera objektet. De flesta klienter kan parsa XML eller JSON. Dessutom kan klienten ange vilket format den vill ha genom att ange rubriken Acceptera i HTTP-begärandemeddelandet.

Vi börjar med att skapa en enkel modell som representerar en produkt.

Om Solution Explorer inte redan visas klickar du på menyn Visa och väljer Solution Explorer. Högerklicka på mappen Modeller i Solution Explorer. På snabbmenyn väljer du Lägg till och sedan Klass.

Skärmbild av solution explorer-menyn som visar alternativen i mappen models som visar hur du lägger till en klass.

Ge klassen namnet "Product". Lägg till följande egenskaper i Product klassen.

namespace ProductsApp.Models
{
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Category { get; set; }
        public decimal Price { get; set; }
    }
}

Lägga till en kontrollant

I webb-API är en kontrollant ett objekt som hanterar HTTP-begäranden. Vi lägger till en kontrollant som kan returnera antingen en lista över produkter eller en enda produkt som anges av ID.

Anmärkning

Om du har använt ASP.NET MVC är du redan bekant med styrenheter. Webb-API-kontrollanter liknar MVC-styrenheter, men ärver klassen ApiController i stället för klassen Controller .

Högerklicka på mappen Controllers i Solution Explorer. Välj Lägg till och välj sedan Styrenhet.

Skärmbild av solution explorer-menyn som visar visuell vägledning för att lägga till en kontrollantklass i projektet.

I dialogrutan Lägg till mall väljer du Webb-API-kontroller – Tom. Klicka på Lägg till.

Skärmbild som visar menyalternativen i dialogrutan 'Lägg till byggnadsställning', och markerar alternativet Web API-kontrollant – tom.

I dialogrutan Lägg till kontrollant ger du kontrollanten namnet "ProductsController". Klicka på Lägg till.

Skärmbild av dialogrutan

Byggnadsställningen skapar en fil med namnet ProductsController.cs i mappen Controllers.

Skärmbild av menyalternativen i Solution Explorer, som cirklar runt det nyligen skapade alternativet

Anmärkning

Du behöver inte placera dina kontrollanter i en mapp med namnet Controllers. Mappnamnet är bara ett praktiskt sätt att organisera källfilerna.

Om den här filen inte redan är öppen dubbelklickar du på filen för att öppna den. Ersätt koden i den här filen med följande:

using ProductsApp.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Web.Http;

namespace ProductsApp.Controllers
{
    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 IHttpActionResult GetProduct(int id)
        {
            var product = products.FirstOrDefault((p) => p.Id == id);
            if (product == null)
            {
                return NotFound();
            }
            return Ok(product);
        }
    }
}

För att hålla exemplet enkelt lagras produkter i en fast matris i kontrollantklassen. I ett riktigt program frågar du naturligtvis en databas eller använder någon annan extern datakälla.

Kontrollanten definierar två metoder som returnerar produkter:

  • Metoden GetAllProducts returnerar hela listan över produkter som en IEnumerable<Product-typ> .
  • Metoden GetProduct söker upp en enskild produkt med dess ID.

Det var allt! Du har ett fungerande webb-API. Varje metod på kontrollanten motsvarar en eller flera URI:er:

Kontrollantmetod URI
GetAllProducts /api/products
HämtaProdukt /api/products/id

GetProduct För metoden är ID:t i URI:n en platshållare. Om du till exempel vill hämta produkten med ID:t 5 är api/products/5URI:n .

Mer information om hur webb-API dirigerar HTTP-begäranden till kontrollantmetoder finns i Routning i ASP.NET webb-API.

Anropa webb-API:et med Javascript och jQuery

I det här avsnittet lägger vi till en HTML-sida som använder AJAX för att anropa webb-API:et. Vi använder jQuery för att göra AJAX-anropen och även för att uppdatera sidan med resultaten.

Högerklicka på projektet i Solution Explorer och välj Lägg till och välj sedan Nytt objekt.

Skärmbild av menyn i Solution Explorer, där alternativet produktapp markeras för att visa dess menyval för att lägga till ett nytt objekt.

I dialogrutan Lägg till nytt objekt väljer du webbnoden under Visual C# och väljer sedan HTML-sidobjektet . Ge sidan namnet "index.html".

Skärmbild av menyalternativen

Ersätt allt i den här filen med följande:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Product App</title>
</head>
<body>

  <div>
    <h2>All Products</h2>
    <ul id="products" />
  </div>
  <div>
    <h2>Search by ID</h2>
    <input type="text" id="prodId" size="5" />
    <input type="button" value="Search" onclick="find();" />
    <p id="product" />
  </div>

  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
  <script>
    var uri = 'api/products';

    $(document).ready(function () {
      // Send an AJAX request
      $.getJSON(uri)
          .done(function (data) {
            // On success, 'data' contains a list of products.
            $.each(data, function (key, item) {
              // Add a list item for the product.
              $('<li>', { text: formatItem(item) }).appendTo($('#products'));
            });
          });
    });

    function formatItem(item) {
      return item.Name + ': $' + item.Price;
    }

    function find() {
      var id = $('#prodId').val();
      $.getJSON(uri + '/' + id)
          .done(function (data) {
            $('#product').text(formatItem(data));
          })
          .fail(function (jqXHR, textStatus, err) {
            $('#product').text('Error: ' + err);
          });
    }
  </script>
</body>
</html>

Det finns flera sätt att hämta jQuery. I det här exemplet använde jag Microsoft Ajax CDN. Du kan också ladda ned den från http://jquery.com/och ASP.NET "Web API"-projektmallen innehåller även jQuery.

Hämta en lista över produkter

Om du vill hämta en lista över produkter skickar du en HTTP GET-begäran till "/api/products".

Funktionen jQuery getJSON skickar en AJAX-begäran. Svaret innehåller matrisen med JSON-objekt. Funktionen done anger ett återanrop som anropas om begäran lyckas. I återanropet uppdaterar vi DOM med produktinformationen.

$(document).ready(function () {
    // Send an AJAX request
    $.getJSON(apiUrl)
        .done(function (data) {
            // On success, 'data' contains a list of products.
            $.each(data, function (key, item) {
                // Add a list item for the product.
                $('<li>', { text: formatItem(item) }).appendTo($('#products'));
            });
        });
});

Hämta en produkt med ID

Om du vill hämta en produkt efter ID skickar du en HTTP GET-begäran till "/api/products/id", där ID:t är produkt-ID:t.

function find() {
    var id = $('#prodId').val();
    $.getJSON(apiUrl + '/' + id)
        .done(function (data) {
            $('#product').text(formatItem(data));
        })
        .fail(function (jqXHR, textStatus, err) {
            $('#product').text('Error: ' + err);
        });
}

Vi anropar getJSON fortfarande för att skicka AJAX-begäran, men den här gången placerar vi ID:t i begärande-URI:n. Svaret från den här begäran är en JSON-representation av en enskild produkt.

Köra programmet

Tryck på F5 för att börja felsöka programmet. Webbsidan bör se ut så här:

Skärmbild av webbläsaren som visar en punktlista för alla produkter, med deras priser, följt av fältet

Om du vill hämta en produkt efter ID anger du ID:t och klickar på Sök:

Skärmbild av webbläsaren som visar alla produkter och priser, i punktform och nummer 2 i fältet

Om du anger ett ogiltigt ID returnerar servern ett HTTP-fel:

Skärmbild av webbläsaren som visar alla produkter och deras priser och visar felmeddelandet

Använda F12 för att visa HTTP-begäran och http-svar

När du arbetar med en HTTP-tjänst kan det vara mycket användbart att se HTTP-begäran och svarsmeddelanden. Du kan göra detta med hjälp av F12-utvecklarverktygen i Internet Explorer 9. Öppna verktygen genom att trycka på F12 från Internet Explorer 9. Klicka på fliken Nätverk och tryck på Starta insamling. Gå nu tillbaka till webbsidan och tryck på F5 för att läsa in webbsidan igen. Internet Explorer samlar in HTTP-trafiken mellan webbläsaren och webbservern. Sammanfattningsvyn visar all nätverkstrafik för en sida:

Skärmbild av fönstret H T T P-begäran och svarsmeddelande, som visar en lista över U R Ls och alla svar om nätverkstrafik.

Leta upp posten för den relativa URI:n "api/products/". Välj den här posten och klicka på Gå till detaljerad vy. I detaljvyn finns det flikar för att visa begärande- och svarshuvuden och -organ. Om du till exempel klickar på fliken Begärandehuvuden kan du se att klienten begärde "application/json" i sidhuvudet Acceptera.

Skärmbild av dialogrutan H T T P-begäran och svarsmeddelande som visar ett exempel på ett enskilt A P I-begärandesvar.

Om du klickar på fliken Svarstext kan du se hur produktlistan serialiserades till JSON. Andra webbläsare har liknande funktioner. Ett annat användbart verktyg är Fiddler, en webbfelsökningsproxy. Du kan använda Fiddler för att visa DIN HTTP-trafik och även för att skapa HTTP-begäranden, vilket ger dig fullständig kontroll över HTTP-huvudena i begäran.

Se den här appen som körs i Azure

Vill du se att den färdiga webbplatsen körs som en livewebbapp? Du kan distribuera en fullständig version av appen till ditt Azure-konto.

Du behöver ett Azure-konto för att distribuera den här lösningen till Azure. Om du inte redan har ett konto har du följande alternativ:

  • Öppna ett Azure-konto kostnadsfritt – Du får krediter som du kan använda för att prova betalda Azure-tjänster, och även när de har förbrukats kan du behålla kontot och använda kostnadsfria Azure-tjänster.
  • Aktivera MSDN-prenumerantförmåner – Din MSDN-prenumeration ger dig krediter varje månad som du kan använda för betalda Azure-tjänster.

Nästa steg

  • Last updated on