Vytváření rozhraní RESTful API pomocí webového rozhraní API ASP.NET

Článek
07/13/2023

Praktické cvičení: Použití webového rozhraní API v ASP.NET 4.x k vytvoření jednoduchého rozhraní REST API pro aplikaci správce kontaktů Také vytvoříte klienta, který bude využívat rozhraní API.

V posledních letech se ukázalo, že HTTP není jen pro obsluhu stránek HTML. Je to také výkonná platforma pro vytváření webových rozhraní API pomocí několika sloves (GET, POST atd.) a několika jednoduchých konceptů, jako jsou URI a hlavičky. ASP.NET Webové rozhraní API je sada komponent, které zjednodušují programování protokolu HTTP. Vzhledem k tomu, že je postaveno na modulu runtime ASP.NET MVC, webové rozhraní API automaticky zpracovává podrobnosti přenosu http nízké úrovně. Webové rozhraní API zároveň přirozeně zveřejňuje programovací model HTTP. Jedním z cílů webového rozhraní API je ve skutečnosti ne abstrahodovat realitu protokolu HTTP. V důsledku toho je webové rozhraní API flexibilní a snadno rozšiřelné. Styl architektury REST se ukázal jako efektivní způsob, jak využít http, i když to rozhodně není jediný platný přístup k HTTP. Správce kontaktů zveřejní restful mimo jiné pro výpis, přidávání a odebírání kontaktů.

Toto cvičení vyžaduje základní znalost HTTP a REST a předpokládá základní pracovní znalosti HTML, JavaScriptu a jQuery.

Poznámka

Web ASP.NET má oblast vyhrazenou pro rozhraní ASP.NET Web API na adrese https://asp.net/web-api. Tento web bude dál poskytovat nejnovější informace, ukázky a novinky související s webovým rozhraním API, proto ho často kontrolujte, jestli se chcete podrobněji zabývat vytvářením vlastních webových rozhraní API dostupných prakticky pro všechna zařízení nebo vývojové rozhraní.

ASP.NET webové rozhraní API, podobně jako ASP.NET MVC 4, má velkou flexibilitu, pokud jde o oddělení vrstvy služby od kontrolerů, což umožňuje poměrně snadno používat několik dostupných architektur pro injektáž závislostí.

Všechny ukázkové kódy a fragmenty kódu jsou součástí sady Web Camps Training Kit, která je k dispozici na adrese https://github.com/Microsoft-Web/WebCampTrainingKit/releases.

Cíle

V tomto praktickém cvičení se naučíte:

Implementace webového rozhraní RESTful API
Volání rozhraní API z klienta HTML

Požadavky

K dokončení tohoto praktického cvičení je potřeba následující:

Microsoft Visual Studio Express 2012 pro web nebo vyšší verzi (pokyny k instalaci najdete v příloze B).

Nastavení

Instalace fragmentů kódu

Pro usnadnění práce je většina kódu, který budete spravovat v tomto cvičení, k dispozici jako fragmenty kódu sady Visual Studio. Pokud chcete nainstalovat fragmenty kódu, spusťte soubor .\Source\Setup\CodeSnippets.vsi .

Pokud nejste obeznámeni s fragmenty kódu visual studio code a chcete se naučit, jak je používat, můžete si přečíst přílohu z tohoto dokumentu Příloha A: Použití fragmentů kódu.

Cvičení

Toto praktické cvičení zahrnuje následující cvičení:

Cvičení 1: Vytvoření webového rozhraní API Read-Only
Cvičení 2: Vytvoření webového rozhraní API pro čtení a zápis
Cvičení 3: Využití webového rozhraní API z klienta HTML

Poznámka

Každé cvičení je doprovázeno složkou End obsahující výsledné řešení, které byste měli získat po dokončení cvičení. Toto řešení můžete použít jako vodítko, pokud potřebujete další pomoc při práci ve cvičeních.

Odhadovaný čas dokončení tohoto cvičení: 60 minut.

Cvičení 1: Vytvoření webového rozhraní API Read-Only

V tomto cvičení implementujete metody GET jen pro čtení pro správce kontaktů.

Úkol 1 – vytvoření projektu rozhraní API

V tomto úkolu použijete nové šablony webových projektů ASP.NET k vytvoření webové aplikace webového rozhraní API.

Spusťte Visual Studio 2012 Express for Web. Uděláte to tak, že přejdete na Start , zadáte VS Express for Web a pak stisknete Klávesu Enter.
V nabídce Soubor vyberte Nový projekt. Vyberte Visual C# | Typ webového projektu ze stromového zobrazení typu projektu a pak vyberte typ projektu ASP.NET webová aplikace MVC 4 . Nastavte Název projektu na ContactManager a Název řešení na Začátek a pak klikněte na OK.

Vytvoření nového projektu webové aplikace ASP.NET MVC 4.0
V dialogovém okně typ projektu ASP.NET MVC 4 vyberte typ projektu Webové rozhraní API . Klikněte na OK.

Určení typu projektu webového rozhraní API

Úloha 2 – Vytvoření kontrolerů rozhraní API aplikace Contact Manager

V této úloze vytvoříte třídy kontroleru, ve kterých se budou nacházet metody rozhraní API.

Odstraňte soubor s názvem ValuesController.cs ve složce Controllers z projektu.
V projektu klikněte pravým tlačítkem na složku Kontrolery a vyberte Přidat | Kontroler z místní nabídky.

Přidání nového kontroleru do projektu
V dialogovém okně Přidat kontroler , které se zobrazí, vyberte v nabídce Šablona možnost Prázdný kontroler rozhraní API . Pojmenujte třídu kontroleru ContactController. Potom klikněte na Přidat.

k

Použití dialogového okna Přidat kontroler k vytvoření nového kontroleru webového rozhraní API
Do ContactController přidejte následující kód.

(Fragment kódu – Cvičení webového rozhraní API – Ex01 – Získání metody rozhraní API)
```
public string[] Get()
{
    return new string[]
    {
        "Hello",
        "World"
    };
}
```
Stisknutím klávesy F5 spusťte ladění aplikace. Měla by se zobrazit výchozí domovská stránka projektu webového rozhraní API.

Výchozí domovská stránka aplikace webového rozhraní API ASP.NET
V okně Internet Exploreru stisknutím klávesy F12 otevřete okno Vývojářské nástroje . Klikněte na kartu Síť a potom kliknutím na tlačítko Spustit zachytávání začněte zachytávat síťový provoz do okna.

Otevření karty Síť a zahájení zachytávání sítě
Připojte adresu URL do adresního řádku prohlížeče s parametrem /api/contact a stiskněte Enter. Podrobnosti o přenosu se zobrazí v okně zachycení sítě. Všimněte si, že typ MIME odpovědi je application/json. To ukazuje výchozí formát výstupu JSON.

Zobrazení výstupu požadavku webového rozhraní API v zobrazení Síť

Poznámka

Výchozím chováním Internet Exploreru 10 v tomto okamžiku bude dotaz, jestli chce uživatel uložit nebo otevřít datový proud, který je výsledkem volání webového rozhraní API. Výstupem bude textový soubor obsahující výsledek JSON volání adresy URL webového rozhraní API. Nerušte dialogové okno, aby bylo možné watch obsah odpovědi prostřednictvím okna Nástroje pro vývojáře.
Kliknutím na tlačítko Přejít do podrobného zobrazení zobrazíte další podrobnosti o odpovědi na toto volání rozhraní API.

Přepnout do podrobného zobrazení
Kliknutím na kartu Text odpovědi zobrazíte skutečný text odpovědi JSON.

Zobrazení výstupního textu JSON v monitorování sítě

Úloha 3 – Vytvoření modelů kontaktů a rozšíření kontroleru kontaktů

V této úloze vytvoříte třídy kontroleru, ve kterých se budou nacházet metody rozhraní API.

Klikněte pravým tlačítkem na složku Models (Modely ) a v místní nabídce vyberte Add | Class... (Přidat | Třídu... ).

Přidání nového modelu do webové aplikace
V dialogovém okně Přidat novou položku pojmenujte nový soubor Contact.cs a klikněte na Přidat.

Vytvoření nového souboru třídy kontaktu
Do třídy Contact přidejte následující zvýrazněný kód.

(Fragment kódu – Web API Lab – Ex01 – Třída kontaktu)
```
public class Contact
{
    public int Id { get; set; }

    public string Name { get; set; }
}
```
Ve třídě ContactController vyberte řetězec slova v definici metody Get a zadejte slovo Contact. Po zadání slova se na začátku slova Kontakt zobrazí indikátor. Podržte stisknutou klávesu Ctrl a stiskněte tečku (.) nebo klikněte na ikonu pomocí myši. Otevře se dialogové okno pomoci v editoru kódu, které automaticky vyplní direktivu using pro obor názvů Models.

Použití pomoci IntelliSense pro deklarace oboru názvů

Upravte kód metody Get tak, aby vracela pole instancí modelu Contact.

(Fragment kódu – Web API Lab – Ex01 – Vrácení seznamu kontaktů)

public Contact[] Get()
{
    return new Contact[]
    {
        new Contact
        {
            Id = 1,
            Name = "Glenn Block"
        },
        new Contact
        {
            Id = 2,
            Name = "Dan Roth"
        }
    };
}

Stisknutím klávesy F5 můžete webovou aplikaci ladit v prohlížeči. Pokud chcete zobrazit změny provedené ve výstupu odpovědi rozhraní API, proveďte následující kroky.
1. Po otevření prohlížeče stiskněte klávesu F12 , pokud vývojářské nástroje ještě nejsou otevřené.
2. Klikněte na kartu Síť .
3. Stiskněte tlačítko Spustit zachytávání .
4. Přidejte příponu ADRESY URL /api/contact k adrese URL na panelu Adresa a stiskněte klávesu Enter .
5. Stiskněte tlačítko Přejít na podrobné zobrazení .
6. Vyberte kartu Text odpovědi . Měl by se zobrazit řetězec JSON představující serializovanou formu pole instancí kontaktů.
  
  Serializovaný výstup JSON volání komplexní metody webového rozhraní API

Úloha 4 – extrakce funkcí do vrstvy služby

Tento úkol vám ukáže, jak extrahovat funkce do vrstvy služby, aby vývojáři usnadnili oddělení funkcí služby od vrstvy kontroleru a umožnili tak opakované použití služeb, které danou práci skutečně dělají.

Vytvořte novou složku v kořenovém adresáři řešení a pojmenujte ji Services. Uděláte to tak, že kliknete pravým tlačítkem na projekt ContactManager , vyberete Přidat | novou složku a pojmenujete ho Services.

Vytváření složky služeb
Klikněte pravým tlačítkem na složku Služby a v místní nabídce vyberte Přidat | Třídu... .

Přidání nové třídy do složky Services
Když se zobrazí dialogové okno Přidat novou položku , pojmenujte novou třídu ContactRepository a klikněte na Přidat.

Vytvoření souboru třídy, který bude obsahovat kód pro vrstvu služby Úložiště kontaktů
Přidejte direktivu using do souboru ContactRepository.cs , aby zahrnovala obor názvů models.
```
using ContactManager.Models;
```

Do souboru ContactRepository.cs přidejte následující zvýrazněný kód pro implementaci metody GetAllContacts.

(Fragment kódu – Web API Lab – Ex01 – Úložiště kontaktů)

public class ContactRepository
{
    public Contact[] GetAllContacts()
    {
        return new Contact[]
        {
            new Contact
            {
                Id = 1,
                Name = "Glenn Block"
            },
            new Contact
            {
                Id = 2,
                Name = "Dan Roth"
            }
        };
    }
}

Otevřete soubor ContactController.cs , pokud ještě není otevřený.
Do oddílu deklarace oboru názvů souboru přidejte následující příkaz using.
```
using ContactManager.Services;
```
Do třídy ContactController.cs přidejte následující zvýrazněný kód, který přidá privátní pole představující instanci úložiště, aby ostatní členové třídy mohli využít implementaci služby.

(Fragment kódu – Web API Lab – Ex01 – Kontroler kontaktů)
```
public class ContactController : ApiController
{
    private ContactRepository contactRepository;

    public ContactController()
    {
        this.contactRepository = new ContactRepository();
    } 
    ...
}
```
Změňte metodu Get tak, aby používala službu úložiště kontaktů.

(Fragment kódu – Cvičení webového rozhraní API – Ex01 – Vrácení seznamu kontaktů prostřednictvím úložiště)
```
public Contact[] Get()
{
    return contactRepository.GetAllContacts();
}
```
Vložte zarážku na definici metody GetContactController.

Přidání zarážek do kontroleru kontaktů

Přidání zarážek do kontroleru kontaktů 11. Stisknutím klávesy F5 spusťte aplikaci. 12. Po otevření prohlížeče otevřete stisknutím klávesy F12 nástroje pro vývojáře. 13. Klikněte na kartu Síť . 14. Klikněte na tlačítko Spustit zachytávání . 15. Připojte adresu URL na panelu Adresa s příponou /api/contact a stisknutím klávesy Enter načtěte kontroler rozhraní API. 16. Jakmile se spustí metoda Get , visual Studio 2012 by se měl přerušit.

Přerušení v rámci metody Get

Přerušení v rámci get metody 17. Pokračujte stisknutím klávesy F5 . 18. Zpět do Internet Exploreru, pokud na něm ještě není fokus. Poznamenejte si okno síťového záznamu.

Zobrazení Síť v Internet Exploreru s výsledky volání webového rozhraní API

Zobrazení Sítě v Internet Exploreru s výsledky volání webového rozhraní API 19. Klikněte na tlačítko Přejít do podrobného zobrazení . 20. Klikněte na kartu Text odpovědi . Všimněte si výstupu JSON volání rozhraní API a toho, jak představuje dva kontakty načtené vrstvou služby.

Zobrazení výstupu JSON z webového rozhraní API v okně nástrojů pro vývojáře

Zobrazení výstupu JSON z webového rozhraní API v okně nástrojů pro vývojáře

Cvičení 2: Vytvoření webového rozhraní API pro čtení a zápis

V tomto cvičení implementujete metody POST a PUT pro správce kontaktů, abyste ho povolili s funkcemi pro úpravu dat.

Úkol 1 – otevření projektu webového rozhraní API

V tomto úkolu se připravíte na vylepšení projektu webového rozhraní API vytvořeného ve cvičení 1, aby mohl přijímat vstup uživatele.

Spusťte Visual Studio 2012 Express for Web. Uděláte to tak, že přejdete na Start , zadáte VS Express for Web a pak stisknete Klávesu Enter.
Otevřete řešení Begin umístěné ve složce Source/Ex02-ReadWriteWebAPI/Begin/ . Jinak byste mohli pokračovat v používání řešení End získaného v předchozím cvičení.
1. Pokud jste otevřeli poskytnuté řešení Begin , budete si muset před pokračováním stáhnout některé chybějící balíčky NuGet. Uděláte to tak, že kliknete na nabídku Projekt a vyberete Spravovat balíčky NuGet.
2. V dialogovém okně Spravovat balíčky NuGet klikněte na Obnovit , abyste stáhli chybějící balíčky.
3. Nakonec sestavte řešení kliknutím na Sestavit | řešení sestavení.
  
  Poznámka
  
  Jednou z výhod použití NuGetu je, že nemusíte dodávat všechny knihovny v projektu, což snižuje velikost projektu. Když v nástrojích NuGet Power Tools zadáte verze balíčku v souboru Packages.config, budete moct při prvním spuštění projektu stáhnout všechny požadované knihovny. Proto budete muset tyto kroky spustit po otevření existujícího řešení z tohoto testovacího prostředí.
Otevřete soubor Services/ContactRepository.cs .

Úkol 2 – Přidání funkcí Data-Persistence do implementace úložiště kontaktů

V tomto úkolu rozšíříte třídu ContactRepository projektu webového rozhraní API vytvořeného ve cvičení 1 tak, aby mohl zachovat a přijímat vstup uživatele a nové instance kontaktů.

Do třídy ContactRepository přidejte následující konstantu, která bude dále v tomto cvičení představovat název klíče položky mezipaměti webového serveru.
```
private const string CacheKey = "ContactStore";
```

Přidejte konstruktor do ContactRepository obsahující následující kód.

(Fragment kódu – Cvičení webového rozhraní API – Ex02 – Konstruktor úložiště kontaktů)

public ContactRepository()
{
    var ctx = HttpContext.Current;

    if (ctx != null)
    {
        if (ctx.Cache[CacheKey] == null)
        {
            var contacts = new Contact[]
            {
                new Contact
                {
                    Id = 1, Name = "Glenn Block"
                },
                new Contact
                {
                    Id = 2, Name = "Dan Roth"
                }
            };

            ctx.Cache[CacheKey] = contacts;
        }
    }
}

Upravte kód metody GetAllContacts , jak je znázorněno níže.

(Fragment kódu – Web API Lab – Ex02 – Získání všech kontaktů)
```
public Contact[] GetAllContacts()
{
    var ctx = HttpContext.Current;

    if (ctx != null)
    {
        return (Contact[])ctx.Cache[CacheKey];
    }

    return new Contact[]
        {
            new Contact
            {
                Id = 0,
                Name = "Placeholder"
            }
        };
}
```
Poznámka

Tento příklad slouží k demonstračním účelům a použije mezipaměť webového serveru jako úložné médium, aby hodnoty byly k dispozici více klientům současně, místo použití mechanismu úložiště relace nebo doby života úložiště požadavku. Místo mezipaměti webového serveru můžete použít Entity Framework, úložiště XML nebo jakoukoli jinou variantu.

Implementujte novou metodu s názvem SaveContact do Třídy ContactRepository pro práci při ukládání kontaktu. SaveContact Metoda by měla mít jeden contact parametr a vrátit logickou hodnotu označující úspěch nebo selhání.

(Fragment kódu – Web API Lab – Ex02 – Implementace metody SaveContact)

public bool SaveContact(Contact contact)
{
    var ctx = HttpContext.Current;

    if (ctx != null)
    {
         try
         {
              var currentData = ((Contact[])ctx.Cache[CacheKey]).ToList();
              currentData.Add(contact);
              ctx.Cache[CacheKey] = currentData.ToArray();

              return true;
         }
         catch (Exception ex)
         {
              Console.WriteLine(ex.ToString());
              return false;
         }
    }

    return false;
}

Cvičení 3: Využití webového rozhraní API z klienta HTML

V tomto cvičení vytvoříte klienta HTML pro volání webového rozhraní API. Tento klient usnadní výměnu dat s webovým rozhraním API pomocí JavaScriptu a zobrazí výsledky ve webovém prohlížeči pomocí kódu HTML.

Úkol 1 – úprava zobrazení indexu tak, aby poskytovalo grafické uživatelské rozhraní pro zobrazení kontaktů

V tomto úkolu upravíte výchozí zobrazení indexu webové aplikace tak, aby podporovalo požadavek na zobrazení seznamu existujících kontaktů v prohlížeči HTML.

Otevřete Visual Studio 2012 Express for Web , pokud ještě není otevřený.
Otevřete řešení Begin umístěné ve složce Source/Ex03-ConsumingWebAPI/Begin/ . Jinak byste mohli pokračovat v používání řešení End získaného v předchozím cvičení.
1. Pokud jste otevřeli poskytnuté řešení Begin , budete si muset před pokračováním stáhnout některé chybějící balíčky NuGet. Uděláte to tak, že kliknete na nabídku Projekt a vyberete Spravovat balíčky NuGet.
2. V dialogovém okně Spravovat balíčky NuGet klikněte na Obnovit , abyste stáhli chybějící balíčky.
3. Nakonec sestavte řešení kliknutím na Sestavit | řešení sestavení.
  
  Poznámka
  
  Jednou z výhod použití NuGetu je, že nemusíte dodávat všechny knihovny v projektu a zmenšovat tak velikost projektu. Pomocí nástrojů NuGet Power Tools zadáte verze balíčků v souboru Packages.config a budete moct při prvním spuštění projektu stáhnout všechny požadované knihovny. Proto budete muset tyto kroky spustit po otevření existujícího řešení z tohoto testovacího prostředí.
Otevřete soubor Index.cshtml umístěný ve složce Views/Home .
Nahraďte kód HTML v elementu div textem ID, aby vypadal jako následující kód.
```
<div id="body">
    <ul id="contacts"></ul>
</div>
```

Do dolní části souboru přidejte následující kód JavaScriptu, který provede požadavek HTTP na webové rozhraní API.

@section scripts{
<script type="text/javascript">
$(function()
{
        $.getJSON('/api/contact', function(contactsJsonPayload)
        {
            $(contactsJsonPayload).each(function(i, item)
            {
                $('#contacts').append('<li>' + item.Name + '</li>');
            });
        });
});
</script>
}

Otevřete soubor ContactController.cs , pokud ještě není otevřený.
Umístěte zarážku na Metodu Gettřídy ContactController .

Umístění zarážky na metodu Get kontroleru rozhraní API
Stisknutím klávesy F5 spusťte projekt. Prohlížeč načte dokument HTML.

Poznámka

Ujistěte se, že procházíte kořenovou adresu URL vaší aplikace.
Jakmile se stránka načte a JavaScript spustí, dojde k zarážce a provádění kódu se pozastaví v kontroleru.

Ladění volání webového rozhraní API pomocí sady Visual Studio 2012 Express pro web
Odeberte zarážku a stisknutím klávesy F5 nebo tlačítka Pokračovat na panelu nástrojů ladění pokračujte v načítání zobrazení v prohlížeči. Po dokončení volání webového rozhraní API byste měli vidět kontakty vrácené z volání webového rozhraní API jako položky seznamu v prohlížeči.

Výsledky volání rozhraní API zobrazené v prohlížeči jako položky seznamu
Zastavte ladění.

Úkol 2 – Úprava zobrazení indexu tak, aby poskytovalo grafické uživatelské rozhraní pro vytváření kontaktů

V této úloze budete pokračovat v úpravě zobrazení Index aplikace MVC. Na stránku HTML se přidá formulář, který zachytí uživatelský vstup a odešle ho do webového rozhraní API za účelem vytvoření nového kontaktu, a vytvoří se nová metoda kontroleru webového rozhraní API, která bude shromažďovat data z grafického uživatelského rozhraní.

Otevřete soubor ContactController.cs .

Přidejte novou metodu do třídy kontroleru s názvem Post , jak je znázorněno v následujícím kódu.

(Fragment kódu – Web API Lab – Ex03 – Metoda Post)

public HttpResponseMessage Post(Contact contact)
{
    this.contactRepository.SaveContact(contact);

    var response = Request.CreateResponse<Contact>(System.Net.HttpStatusCode.Created, contact);

    return response;
}

Otevřete soubor Index.cshtml v sadě Visual Studio, pokud ještě není otevřený.

Přidejte kód HTML níže do souboru hned za neuspořádaný seznam, který jste přidali v předchozím úkolu.

<form id="saveContactForm" method="post">
<h3>Create a new Contact</h3>
<p>
    <label for="contactId">Contact Id:</label>
    <input type="text" name="Id" />
</p>
<p>
    <label for="contactName">Contact Name:</label>
    <input type="text" name="Name" />
</p>
<input type="button" id="saveContact" value="Save" />
</form>

Do elementu script v dolní části dokumentu přidejte následující zvýrazněný kód pro zpracování událostí kliknutí na tlačítko, který odešle data do webového rozhraní API pomocí volání HTTP POST.

<script type="text/javascript">
... 
$('#saveContact').click(function()
         {
              $.post("api/contact",
                    $("#saveContactForm").serialize(),
                    function(value)
                    {
                         $('#contacts').append('<li>' + value.Name + '</li>');
                    },
                    "json"
              );
         });
</script>

V souboru ContactController.cs umístěte zarážku na metodu Post .
Stisknutím klávesy F5 spusťte aplikaci v prohlížeči.
Jakmile se stránka načte v prohlížeči, zadejte jméno a ID nového kontaktu a klikněte na tlačítko Uložit .

Dokument HTML klienta načtený v prohlížeči
Když se okno ladicího programu v metodě Post přeruší, podívejte se na vlastnosti parametru kontaktu . Hodnoty by se měly shodovat s daty, která jste zadali ve formuláři.

Objekt Contact odesílaný z klienta do webového rozhraní API
Procházejte metodu v ladicím programu, dokud se nevytvořila proměnná odpovědi . Při kontrole v okně Místní hodnoty v ladicím programu uvidíte, že byly nastaveny všechny vlastnosti.

Odpověď po vytvoření v ladicím programu

Odpověď po vytvoření v ladicím programu 11. Pokud stisknete klávesu F5 nebo kliknete na Pokračovat v ladicím programu, požadavek se dokončí. Po přepnutí zpět do prohlížeče byl nový kontakt přidán do seznamu kontaktů uložených v implementaci ContactRepository .

Prohlížeč odráží úspěšné vytvoření nové instance kontaktu .

Prohlížeč odráží úspěšné vytvoření nové instance kontaktu.

Poznámka

Kromě toho můžete tuto aplikaci nasadit do Azure podle dodatku C: Publikování aplikace ASP.NET MVC 4 pomocí nasazení webu.

Souhrn

Toto cvičení vás seznámilo s novou architekturou ASP.NET webového rozhraní API a s implementací webových rozhraní RESTful API pomocí této architektury. Tady můžete vytvořit nové úložiště, které usnadňuje trvalost dat pomocí libovolného počtu mechanismů a odposlouchávání, které obsluhuje, místo jednoduchého úložiště, které poskytujeme jako příklad v tomto cvičení. Webové rozhraní API podporuje řadu dalších funkcí, jako je povolení komunikace od klientů bez HTML napsaných v libovolném jazyce, který podporuje protokoly HTTP a JSON nebo XML. Možnost hostování webového rozhraní API mimo typickou webovou aplikaci je také možná, stejně jako možnost vytvářet vlastní formáty serializace.

Web ASP.NET má oblast vyhrazenou pro rozhraní ASP.NET Web API na adrese [https://asp.net/web-api](https://asp.net/web-api). Tento web bude dál poskytovat nejnovější informace, ukázky a novinky související s webovým rozhraním API, proto se na něj často podívejte, jestli se chcete podrobněji zabývat uměním vytváření vlastních webových rozhraní API dostupných prakticky pro jakékoli zařízení nebo vývojovou architekturu.

Příloha A: Použití fragmentů kódu

S fragmenty kódu máte veškerý kód, který potřebujete, na dosah ruky. V dokumentu testovacího prostředí se dozvíte, kdy přesně je můžete použít, jak je znázorněno na následujícím obrázku.

Použití fragmentů kódu sady Visual Studio k vložení kódu do projektu

Použití fragmentů kódu sady Visual Studio code k vložení kódu do projektu

Přidání fragmentu kódu pomocí klávesnice (jenom C#)

Umístěte kurzor na místo, kam chcete vložit kód.
Začněte psát název fragmentu kódu (bez mezer nebo spojovníků).
Sledujte, jak IntelliSense zobrazuje odpovídající názvy fragmentů kódu.
Vyberte správný fragment kódu (nebo pokračujte v psaní, dokud nebude vybraný celý název fragmentu).
Dvojím stisknutím klávesy Tab vložte fragment kódu do umístění kurzoru.

.

Začněte psát název fragmentu kódu.

Stisknutím klávesy Tab vyberte zvýrazněný fragment kódu.

Stiskněte znovu klávesu Tab a fragment kódu se rozbalí.

Přidání fragmentu kódu pomocí myši (C#, Visual Basic a XML)

Klikněte pravým tlačítkem na místo, kam chcete vložit fragment kódu.
Vyberte Vložit fragment kódu následovaný mými fragmenty kódu.
Kliknutím na něj vyberte příslušný fragment kódu ze seznamu.

kódu .

Klikněte pravým tlačítkem na místo, kam chcete vložit fragment kódu, a vyberte Vložit fragment kódu.

.

Vyberte příslušný fragment kódu ze seznamu tak, že na něj kliknete.

Příloha B: Instalace Visual Studio Express 2012 pro web

Pomocí Instalace webové platformy Microsoft můžete nainstalovat Microsoft Visual Studio Express 2012 pro web nebo jinou expresní verzi. Následující pokyny vás provedou kroky potřebnými k instalaci sady Visual Studio Express 2012 for Web pomocí Instalace webové platformy Microsoft.

Přejděte na [https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?linkid=9810169). Pokud už máte nainstalovaný Instalační program webové platformy, můžete ho otevřít a vyhledat produkt "Visual Studio Express 2012 pro web pomocí sady Azure SDK".
Klikněte na Nainstalovat. Pokud instalační program webové platformy nemáte, budete přesměrováni na jeho stažení a instalaci.
Po otevření instalačního programu webové platformyspusťte instalaci kliknutím na Nainstalovat.

Instalace Visual Studio Express
Přečtěte si všechny licence a podmínky produktů a pokračujte kliknutím na Souhlasím.

Přijetí licenčních podmínek
Počkejte, až se proces stahování a instalace dokončí.

Průběh instalace
Po dokončení instalace klikněte na Dokončit.

Instalace byla dokončena.
Kliknutím na Ukončit zavřete Instalační program webové platformy.
Pokud chcete otevřít Visual Studio Express pro web, přejděte na úvodní obrazovku a začněte psát "VS Express", klikněte na dlaždici VS Express for Web.

Dlaždice VS Express for Web

Příloha C: Publikování aplikace ASP.NET MVC 4 pomocí nasazení webu

V této příloze se dozvíte, jak vytvořit nový web z webu Azure Portal a publikovat aplikaci, kterou jste získali podle testovacího prostředí, s využitím funkce publikování nasazení webu, kterou poskytuje Azure.

Úkol 1 – Vytvoření nového webu z webu Azure Portal

Přejděte na portál pro správu Azure a přihlaste se pomocí přihlašovacích údajů Microsoftu přidružených k vašemu předplatnému.

Poznámka

S Azure můžete zdarma hostovat 10 ASP.NET webů a s rostoucím provozem je pak škálovat. Tady se můžete zaregistrovat.

Přihlášení k portálu
Na panelu příkazů klikněte na Nový .

Vytvoření nového webu
Klikněte na Výpočetní | web. Pak vyberte možnost Rychlé vytvoření . Zadejte dostupnou adresu URL nového webu a klikněte na Vytvořit web.

Poznámka

Azure je hostitelem webové aplikace spuštěné v cloudu, kterou můžete řídit a spravovat. Možnost Rychlé vytvoření umožňuje nasadit dokončenou webovou aplikaci do Azure mimo portál. Neobsahuje kroky pro nastavení databáze.

Vytvoření nového webu pomocí rychlého vytvoření
Počkejte na vytvoření nového webu .
Po vytvoření webu klikněte na odkaz pod sloupcem ADRESA URL . Zkontrolujte, jestli nový web funguje.

Přechod na nový web

Spuštěný web
Zpět na portál a kliknutím na název webu ve sloupci Název zobrazte stránky správy.

Otevření stránek správy webu
Na stránce Řídicí panel klikněte v části Rychlý přehled na odkaz Stáhnout profil publikování .

Poznámka

Profil publikování obsahuje všechny informace potřebné k publikování webové aplikace do Azure pro každou povolenou metodu publikování. Profil publikování obsahuje adresy URL, přihlašovací údaje uživatele a databázové řetězce potřebné pro připojení ke každému koncovému bodu, pro který je povolená metoda publikování. Microsoft WebMatrix 2, Microsoft Visual Studio Express for Web a Microsoft Visual Studio 2012 podporují čtení profilů publikování pro automatizaci konfigurace těchto programů pro publikování webových aplikací do Azure.

Stažení profilu publikování webu
Stáhněte soubor profilu publikování do známého umístění. Dále v tomto cvičení se dozvíte, jak tento soubor použít k publikování webové aplikace do Azure ze sady Visual Studio.

Uložení souboru profilu publikování

Úloha 2 – konfigurace databázového serveru

Pokud vaše aplikace využívá databáze SQL Server, budete muset vytvořit SQL Database server. Pokud chcete nasadit jednoduchou aplikaci, která nepoužívá SQL Server můžete tuto úlohu přeskočit.

K uložení databáze aplikace budete potřebovat SQL Database server. SQL Database servery z vašeho předplatného můžete zobrazit na portálu pro správu Azure nařídicím panelu serveru sql Databases | Servers | . Pokud nemáte vytvořený server, můžete ho vytvořit pomocí tlačítka Přidat na panelu příkazů. Poznamenejte si název serveru a adresu URL, přihlašovací jméno a heslo správce, protože je budete používat v dalších úlohách. Databázi ještě nevytvořujte, protože se vytvoří v pozdější fázi.

řídicí panel serveru SQL Database
V další úloze otestujete připojení k databázi ze sady Visual Studio, proto musíte do seznamu povolených IP adres serveru zahrnout svoji místní IP adresu. Uděláte to tak, že kliknete na Konfigurovat, vyberete IP adresu z aktuální IP adresy klienta a vložíte ji do textových polí Počáteční IP adresa a Koncová IP adresa a kliknete na .

Přidání IP adresy klienta
Po přidání IP adresy klienta do seznamu povolených IP adres potvrďte změny kliknutím na Uložit.

Potvrdit změny

Úloha 3 – Publikování aplikace ASP.NET MVC 4 pomocí nasazení webu

Zpět řešení ASP.NET MVC 4. V Průzkumník řešení klikněte pravým tlačítkem na projekt webu a vyberte Publikovat.

Publikování webu
Importujte profil publikování, který jste uložili v prvním úkolu.

Import profilu publikování
Klikněte na Ověřit připojení. Po dokončení ověření klikněte na Další.

Poznámka

Ověření se dokončí, jakmile se vedle tlačítka Ověřit připojení zobrazí zelená značka zaškrtnutí.

Ověřování připojení
Na stránce Nastavení klikněte v části Databáze na tlačítko vedle textového pole připojení k databázi (tj. DefaultConnection).

Konfigurace nasazení webu
Následujícím způsobem nakonfigurujte připojení k databázi:
- Do pole Název serveru zadejte adresu URL SQL Database serveru pomocí předpony tcp: .
- Do pole Uživatelské jméno zadejte přihlašovací jméno správce serveru.
- Do pole Heslo zadejte přihlašovací heslo správce serveru.
- Zadejte nový název databáze, například : MVC4SampleDB.
  
  Konfigurace cílového připojovacího řetězce
Pak klikněte na OK. Po zobrazení výzvy k vytvoření databáze klikněte na Ano.

Vytvoření databáze
Připojovací řetězec, který použijete pro připojení k SQL Database ve Windows Azure, se zobrazí v textovém poli Výchozí připojení. Potom klikněte na Další.

Připojovací řetězec odkazující na SQL Database
Na stránce Náhled klikněte na Publikovat.

Publikování webové aplikace
Po dokončení procesu publikování se ve výchozím prohlížeči otevře publikovaný web.

Aplikace publikovaná do Azure