A ASP.NET Web API 2 használatának első lépései (C#)

készítette: Mike Wasson

Befejezett projekt letöltése

Ebben az oktatóanyagban a ASP.NET Webes API használatával fog létrehozni egy webes API-t, amely a termékek listáját adja vissza.

A HTTP nem csak a weblapok kiszolgálására szolgál. A HTTP emellett hatékony platform a szolgáltatások és adatok közzétételére szolgáló API-k létrehozásához. A HTTP egyszerű, rugalmas és mindenütt jelen van. Szinte minden olyan platform, amelyről gondolhat, RENDELKEZik HTTP-kódtárval, így a HTTP-szolgáltatások számos ügyfélhez juthatnak el, beleértve a böngészőket, a mobileszközöket és a hagyományos asztali alkalmazásokat.

ASP.NET Web API a .NET-keretrendszeren alapuló webes API-k létrehozásának keretrendszere.

Az oktatóanyagban használt szoftververziók

Az oktatóanyag újabb verziójáért tekintse meg a webes API létrehozása a ASP.NET Core és a Visual Studio for Windows használatával című témakört.

Webes API-projekt létrehozása

Ebben az oktatóanyagban a ASP.NET Webes API használatával fog létrehozni egy webes API-t, amely a termékek listáját adja vissza. Az előtér-weblap jQuery használatával jeleníti meg az eredményeket.

Képernyőkép a helyi gazdagépböngésző ablakáról, amelyen a mintaprojekt látható a termékek listájával, áraival, valamint az I D mező és gomb szerinti kereséssel.

Indítsa el a Visual Studiót, és válassza az Új projekt lehetőséget a kezdőlapon . Vagy a Fájl menüben válassza az Új , majd a Project lehetőséget.

A Sablonok panelen válassza a Telepített sablonok lehetőséget, és bontsa ki a Visual C# csomópontot. A Visual C# alatt válassza a Web lehetőséget. A projektsablonok listájában válassza ASP.NET webalkalmazást. Nevezze el a projektet "ProductsApp" néven, és kattintson az OK gombra.

Képernyőkép az

Az Új ASP.NET Projekt párbeszédpanelen válassza az Üres sablont. A "Mappák és alapvető hivatkozások hozzáadása" területen ellenőrizze a Webes API-t. Kattintson az OK gombra.

Képernyőkép az új projekt párbeszédpanelről, amelyen különböző sablonbeállítások és három mappa- és alapvető hivatkozás található.

Megjegyzés:

Webes API-projektet a "Web API" sablonnal is létrehozhat. A webes API-sablon ASP.NET MVC használatával biztosít API-súgólapokat. Azért használom az Üres sablont ehhez az oktatóanyaghoz, mert MVC nélkül szeretném megjeleníteni a webes API-t. A webes API használatához általában nem kell tudnia ASP.NET MVC-t.

Modell hozzáadása

A modell egy objektum, amely az alkalmazásban lévő adatokat jelöli. ASP.NET Web API automatikusan szerializálhatja a modellt JSON-, XML- vagy egyéb formátumba, majd a szerializált adatokat a HTTP-válaszüzenet törzsébe írhatja. Amíg az ügyfél be tudja olvasni a szerializálási formátumot, deszerializálhatja az objektumot. A legtöbb ügyfél xml- vagy JSON-elemzést végezhet. Ezenkívül az ügyfél a HTTP-kérés üzenetében az Elfogadás fejléc beállításával jelezheti, hogy milyen formátumot szeretne.

Először is hozzunk létre egy egyszerű modellt, amely egy terméket jelöl.

Ha a Megoldáskezelő még nem látható, kattintson a Nézet menüre, és válassza a Megoldáskezelő lehetőséget. A Megoldáskezelőben kattintson a jobb gombbal a Modellek mappára. A helyi menüben válassza a Hozzáadás , majd az Osztály lehetőséget.

Képernyőkép a megoldáskezelő menüjéről, amely megjeleníti a modellek mappájában található beállításokat, amelyek bemutatják, hogyan adhat hozzá osztályt.

Nevezze el a "Product" osztályt. Adja hozzá a következő tulajdonságokat az Product osztályhoz.

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

Vezérlő hozzáadása

A Web API-ban a vezérlő olyan objektum, amely HTTP-kéréseket kezel. Hozzáadunk egy vezérlőt, amely egy terméklistát vagy egy azonosító által megadott terméket tud visszaadni.

Megjegyzés:

Ha ASP.NET MVC-t használt, már ismeri a vezérlőket. A webes API-vezérlők hasonlóak az MVC-vezérlőkhöz, de a Vezérlő osztály helyett az ApiController osztályt öröklik.

A Megoldáskezelőben kattintson a jobb gombbal a Vezérlők mappára. Válassza a Hozzáadás , majd a Vezérlő lehetőséget.

Képernyőkép a megoldáskezelő menüjéről, amely vizuális útmutatást jelenít meg egy vezérlőosztály projekthez való hozzáadásához.

Az Állványzat hozzáadása párbeszédpanelen válassza a Webes API-vezérlő – Üres lehetőséget. Kattintson a Hozzáadás gombra.

Képernyőkép az

A Vezérlő hozzáadása párbeszédpanelen nevezze el a "ProductsController" vezérlőt. Kattintson a Hozzáadás gombra.

Képernyőkép a

Az állványzat létrehoz egy ProductsController.cs nevű fájlt a Controllers mappában.

Képernyőkép a megoldáskezelő menüopcióiról, amely körülhúzza az újonnan létrehozott "termékvezérlő.cs" nevű opciót a vezérlők mappában.

Megjegyzés:

Nem kell a vezérlőket egy Vezérlők nevű mappába helyeznie. A mappanév egyszerűen rendszerezheti a forrásfájlokat.

Ha ez a fájl még nincs megnyitva, kattintson duplán a fájlra a megnyitásához. Cserélje le a fájlban lévő kódot a következőre:

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

A példa egyszerűségéhez a termékek egy rögzített tömbben vannak tárolva a vezérlőosztályon belül. Egy valós alkalmazásban természetesen lekérdezhet egy adatbázist, vagy más külső adatforrást használhat.

A vezérlő két módszert határoz meg, amelyek termékeket adnak vissza:

  • A GetAllProducts metódus a termékek teljes listáját adja vissza IEnumerable<Terméktípusként> .
  • A GetProduct metódus egyetlen terméket keres az azonosítója alapján.

Ennyi az egész! Rendelkezik egy működő webes API-val. A vezérlő minden metódusa egy vagy több URI-nak felel meg:

Vezérlőmetódus URI
GetAllProducts /api/products
GetProduct /api/products/id

A(z) GetProduct metódus esetében az URI azonosítója helyőrző. Ha például a terméket 5-ös azonosítóval szeretné lekérni, az URI az api/products/5.

További információ arról, hogy a Web API hogyan irányítja át a HTTP-kérelmeket a vezérlő metódusaihoz: Útválasztás ASP.NET Webes API-ban.

A Webes API meghívása Javascript és jQuery használatával

Ebben a szakaszban hozzáadunk egy HTML-lapot, amely az AJAX használatával hívja meg a webes API-t. JQuery használatával indítjuk el az AJAX-hívásokat, és frissítjük az oldalt az eredményekkel.

A Megoldáskezelőben kattintson a jobb gombbal a projektre, és válassza a Hozzáadás, majd az Új elem lehetőséget.

Képernyőkép a megoldáskezelő menüjéről, kiemelve a Termékek alkalmazás lehetőséget, hogy megjelenítse a menükijelöléseket egy új elem hozzáadásához.

Az Új elem hozzáadása párbeszédpanelen válassza ki a Webes csomópontot a Visual C# alatt, majd válassza ki a HTML-lap elemet. Adja a lapnak a "index.html" nevet.

Képernyőkép az

Cserélje le a fájl minden elemét a következőre:

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

A jQueryt többféleképpen is lekérheti. Ebben a példában a Microsoft Ajax CDN-t használtam. Innen is letöltheti, http://jquery.com/és a ASP.NET "Web API" projektsablon jQueryt is tartalmaz.

Termékek listájának lekérése

A termékek listájának lekéréséhez küldjön egy HTTP GET kérést az "/api/products" címre.

A jQuery getJSON függvény AJAX-kérést küld. A válasz JSON-objektumok tömböt tartalmaz. A done függvény egy visszahívást ad meg, amelyet a rendszer meghív, ha a kérés sikeres. A visszahívás során frissítjük a DOM-et a termékinformációkkal.

$(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'));
            });
        });
});

Termék lekérése azonosító alapján

Ha azonosító alapján szeretne lekérni egy terméket, küldjön egy HTTP GET kérést az "/api/products/id" címre, ahol az azonosító a termékazonosí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);
        });
}

Továbbra is hívjuk getJSON az AJAX-kérés elküldését, de ezúttal az azonosítót a kérelem URI-jában helyezzük el. A kérés válasza egyetlen termék JSON-reprezentációja.

Az alkalmazás futtatása

Nyomja le az F5 billentyűt az alkalmazás hibakeresésének megkezdéséhez. A weblapnak az alábbihoz hasonlóan kell kinéznie:

Képernyőkép a webböngészőről, amelyen az összes termék listajeles űrlapja látható az árakkal, majd az alatta lévő

Ha azonosító alapján szeretne lekérni egy terméket, adja meg az azonosítót, majd kattintson a Keresés gombra:

Képernyőkép a böngészőről, amelyen az összes termék és ár látható listajeles formában, a 2-es szám pedig a

Ha érvénytelen azonosítót ad meg, a kiszolgáló HTTP-hibát ad vissza:

Képernyőkép a böngészőről, amely felsorolja az összes terméket és azok árait, és a

A HTTP-kérés és a válasz megtekintése az F12 használatával

HA HTTP-szolgáltatással dolgozik, nagyon hasznos lehet látni a HTTP-kéréseket és a válaszüzeneteket. Ezt az Internet Explorer 9 F12 fejlesztői eszközeivel teheti meg. Az Internet Explorer 9-ben nyomja le az F12 billentyűt az eszközök megnyitásához. Kattintson a Hálózat fülre, és nyomja le a Rögzítés indítása gombot. Most lépjen vissza a weblapra, és nyomja le az F5 billentyűt a weblap újbóli betöltéséhez. Az Internet Explorer rögzíti a http-forgalmat a böngésző és a webkiszolgáló között. Az összefoglaló nézet egy lap összes hálózati forgalmát megjeleníti:

Képernyőkép a H T T P kérelem- és válaszüzenet ablakáról, amelyen az U R L-k listája és az összes hálózati forgalomra adott válasz látható.

Keresse meg a "api/products/" relatív URI bejegyzését. Jelölje ki ezt a bejegyzést, és kattintson az Ugrás a részletes nézetre. A részletes nézetben lapfülek találhatók a kérés- és válaszfejlécek és -törzsek megtekintéséhez. Ha például a Kérés fejlécek fülre kattint, láthatja, hogy az ügyfél "application/json" kérést kért az Elfogadás fejlécben.

Képernyőkép a H T T P kérés és válasz üzenet párbeszédpanelről, amelyen egy egyéni A P I-kérés válasza látható.

Ha a Válasz törzs fülre kattint, láthatja, hogy a terméklista hogyan lett szerializálva JSON-ra. Más böngészők hasonló funkciókkal rendelkeznek. Egy másik hasznos eszköz a Fiddler, egy webes hibakeresési proxy. A Fiddler használatával megtekintheti a HTTP-forgalmat, és HTTP-kéréseket is írhat, így teljes mértékben szabályozhatja a kérelem HTTP-fejléceit.

Az Azure-ban futó alkalmazás megtekintése

Élő webalkalmazásként szeretné látni a kész webhelyet? Az alkalmazás teljes verzióját üzembe helyezheti az Azure-fiókjában.

A megoldás Azure-beli üzembe helyezéséhez Azure-fiókra van szüksége. Ha még nem rendelkezik fiókkal, a következő lehetőségek közül választhat:

Következő lépések

  • Last updated on