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

podle Web Camp Team

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ů. Vytvoříte také 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 identifikátory URI a hlavičky. ASP.NET webové rozhraní API je sada komponent, které zjednodušují programování http. Vzhledem k tomu, že je postaven na modulu runtime ASP.NET MVC, webové rozhraní API automaticky zpracovává podrobnosti přenosu http na nízké úrovni. Webové rozhraní API současně přirozeně zveřejňuje programovací model HTTP. Jedním z cílů webového rozhraní API ve skutečnosti není abstrahovat realitu protokolu HTTP. Díky tomu je webové rozhraní API flexibilní a snadno se rozšiřuje. Styl architektury REST se ukázal jako efektivní způsob využití protokolu HTTP , i když se jedná o jediný platný přístup k protokolu HTTP. Správce kontaktů zveřejní RESTful pro výpis, přidávání a odebírání kontaktů mimo jiné.

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

Poznámka:

Web ASP.NET má oblast vyhrazenou pro rozhraní webového rozhraní API ASP.NET na adrese https://asp.net/web-api. Tento web bude i nadále poskytovat nejnovější informace, ukázky a novinky související s webovým rozhraním API, proto se často podívejte, jestli byste se chtěli ponořit hlouběji do umění vytváření vlastních webových rozhraní API dostupných prakticky pro jakékoli zařízení nebo vývojové rozhraní.

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

Všechny ukázkové kódy a fragmenty kódu jsou součástí webového táboru 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í se vyžaduje následující:

• Microsoft Visual Studio Express 2012 for Web nebo superior (pokyny k instalaci najdete v dodatku 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. Chcete-li nainstalovat fragmenty kódu, spusťte soubor .\Source\Setup\CodeSnippets.vsi .

Pokud nemáte zkušenosti s fragmenty kódu sady Visual Studio Code a chcete se naučit, jak je používat, můžete odkazovat na dodatek z tohoto dokumentu "Příloha A: Použití fragmentů kódu".

Cvičení

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

1. Cvičení 1: Vytvoření webového rozhraní API jen pro čtení
2. Cvičení 2: Vytvoření webového rozhraní API pro čtení a zápis
3. Cvičení 3: Využívání webového rozhraní API z klienta HTML

Poznámka:

Každé cvičení je doprovázeno koncovou složkou 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 s prací ve cvičeních.

Odhadovaná doba dokončení tohoto cvičení: 60 minut.

Cvičení 1: Vytvoření webového rozhraní API jen pro čtení

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ého projektu ASP.NET k vytvoření webové aplikace api.

1. Spusťte Visual Studio 2012 Express pro web. Uděláte to tak, že přejdete na Start a zadáte VS Express pro web a pak stisknete Enter.

2. V nabídce Soubor vyberte Nový projekt. Vyberte Visual C# | Typ webového projektu ze stromového zobrazení typu projektu a pak vyberte ASP.NET typ projektu webové aplikace MVC 4. Nastavte název projektu na ContactManager a název řešení na Začátek a potom klikněte na OK.

   

   Vytvoření nového projektu webové aplikace ASP.NET MVC 4.0

3. V dialogovém okně typu projektu ASP.NET MVC 4 vyberte typ projektu webového rozhraní API . Klikněte na OK.

   

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

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

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

1. Odstraňte soubor s názvem ValuesController.cs v rámci složky Controllers z projektu.

2. Klikněte pravým tlačítkem myši na složku Kontrolery v projektu a vyberte Přidat | Kontroler z místní nabídky.

   

   Přidání nového kontroleru do projektu

3. V dialogovém okně Přidat kontroler , které se zobrazí, vyberte v nabídce Šablona prázdný kontroler rozhraní API. Pojmenujte třídu kontroleru ContactController. Potom klikněte na Přidat.

   

   Vytvoření nového kontroleru webového rozhraní API pomocí dialogového okna Přidat kontroler

4. Do contactControlleru přidejte následující kód.

   (Fragment kódu – Web API Lab – Ex01 – Získání metody rozhraní API)

   public string[] Get()
   {
       return new string[]
       {
           "Hello",
           "World"
       };
   }
   

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

6. V okně Internet Exploreru otevřete stisknutím klávesy F12 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ítě a inicializování zachytávání sítě

7. Připojte adresu URL do adresního řádku prohlížeče pomocí /api/contact a stiskněte enter. Podrobnosti přenosu se zobrazí v okně pro zachytávání sítě. Všimněte si, že typ MIME odpovědi je application/json. To ukazuje, jak výchozí výstupní formát je JSON.

   

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

   Poznámka:

   Výchozí chování Internet Exploreru 10 v tomto okamžiku bude dotazovat, jestli chce uživatel uložit nebo otevřít datový proud vyplývající z 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é sledovat obsah odpovědi prostřednictvím okna Vývojářský nástroj.

8. Kliknutím na tlačítko Přejít k podrobnému zobrazení zobrazíte další podrobnosti o odpovědi tohoto volání rozhraní API.

   

   Přepnout na podrobné zobrazení

9. Kliknutím na kartu Text odpovědi zobrazíte skutečný text odpovědi JSON.

   

   Zobrazení výstupního textu JSON v síťovém monitoru

Úkol 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.

1. Klikněte pravým tlačítkem myši na složku Modely a v místní nabídce vyberte Přidat | Třída...

   

   Přidání nového modelu do webové aplikace

2. V dialogovém okně Přidat novou položku pojmenujte nový soubor Contact.cs a klikněte na Tlačítko Přidat.

   

   Vytvoření nového souboru třídy kontaktu

3. Do třídy Kontakt 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; }
   }
   

4. Ve třídě ContactController vyberte řetězec slova v definici metody Get metoda 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 klávesu tečka (.) nebo kliknutím na ikonu pomocí myši otevřete dialogové okno pomoci v editoru kódu, abyste automaticky vyplnili direktivu using pro obor názvů Models.

   

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

5. Upravte kód metody Get tak, aby vrátil 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"
           }
       };
   }
   

6. Stisknutím klávesy F5 můžete ladit webovou aplikaci 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 ještě nejsou otevřené vývojářské nástroje.

   2. Klikněte na kartu Síť .

   3. Stiskněte tlačítko Spustit zachytávání.

   4. Na adresu URL na panelu Adresa přidejte příponu adresy URL /api/contact a stiskněte klávesu Enter .

   5. Stiskněte tlačítko Přejít k podrobnému 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 – extrahování funkcí do vrstvy služby

Tato úloha předvede, jak extrahovat funkce do vrstvy služby, aby vývojáři usnadnili oddělení jejich funkcí služby od vrstvy kontroleru, což umožní opakované použití služeb, které skutečně dělají práci.

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

   

   Vytvoření složky Services

2. Klikněte pravým tlačítkem na složku Services a v místní nabídce vyberte Přidat | Třída...

   

   Přidání nové třídy do složky Services

3. 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 vrstvy služby Úložiště kontaktů

4. Přidejte do souboru ContactRepository.cs direktivu using, která zahrne obor názvů modelů.

   using ContactManager.Models;
   

5. 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"
               }
           };
       }
   }
   

6. Otevřete soubor ContactController.cs, pokud ještě není otevřený.

7. Do oddílu deklarace oboru názvů souboru přidejte následující příkaz using.

   using ContactManager.Services;
   

8. Do třídy ContactController.cs přidejte následující zvýrazněný kód, který bude představovat 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();
       } 
       ...
   }
   

9. Změňte metodu Get tak, aby používala službu úložiště kontaktů.

   (Fragment kódu – Web API Lab – Ex01 – Vrácení seznamu kontaktů prostřednictvím úložiště)

   public Contact[] Get()
   {
       return contactRepository.GetAllContacts();
   }
   

10. Umístěte zarážku na definici metody Get ContactController.

Přidání zarážek do kontroleru kontaktu 11 Stisknutím klávesy F5 spusťte aplikaci. 12. Po otevření prohlížeče otevřete vývojářské nástroje stisknutím klávesy F12 . 13. Klikněte na kartu Síť . 14. Klikněte na tlačítko Spustit zachytávání . 15. Připojte adresu URL na adresní řádek s příponou /api/contact a stisknutím klávesy Enter načtěte kontroler rozhraní API. 16. Visual Studio 2012 by se mělo přerušit, jakmile metoda Get zahájí provádění.

Dělení v metodě Get 17. Pokračujte stisknutím klávesy F5 . 18. Vraťte se do Internet Exploreru, pokud ještě není fokus. Poznamenejte si okno pro zachytávání sítě.

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

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

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 ji povolili pomocí funkcí pro úpravy 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řijmout uživatelský vstup.

1. Spusťte Visual Studio 2012 Express pro web. Uděláte to tak, že přejdete na Start a zadáte VS Express pro web a pak stisknete Enter.

2. Otevřete řešení Begin umístěné ve složce Source/Ex02-ReadWriteWebAPI/Begin/. Jinak můžete pokračovat v používání koncového řešení získaného dokončením předchozího 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 , aby se stáhly chybějící balíčky.

   3. Nakonec řešení sestavíte kliknutím na Sestavit | řešení.

      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. Pomocí Nástrojů NuGet Power Tools zadáte verze balíčků v souboru Packages.config, budete moci stáhnout všechny požadované knihovny při prvním spuštění projektu. Proto budete muset tyto kroky spustit po otevření existujícího řešení z tohoto testovacího prostředí.

3. Otevřete soubor Services/ContactRepository.cs.

Úkol 2 – přidání funkcí trvalosti dat do implementace úložiště kontaktů

V této úloze rozšíříte třídu ContactRepository projektu webového rozhraní API vytvořeného ve cvičení 1, aby bylo možné zachovat a přijmout uživatelský vstup a nové instance kontaktů.

1. Do třídy ContactRepository přidejte následující konstantu, která bude představovat název klíče položky mezipaměti webového serveru dále v tomto cvičení.

   private const string CacheKey = "ContactStore";
   

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

   (Fragment kódu – Web API Lab – 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;
           }
       }
   }
   

3. 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 je určený pro demonstrační účely a bude používat mezipaměť webového serveru jako médium úložiště, takže hodnoty budou 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ůžete použít Entity Framework, úložiště XML nebo jakoukoli jinou škálu místo mezipaměti webového serveru.

4. Implementujte novou metodu s názvem SaveContact do Třídy ContactRepository , která provede práci uložení kontaktu. Metoda SaveContact by měla vzít jeden parametr Contact 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žívání 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 této úloze 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.

1. Pokud ještě není otevřený, otevřete Visual Studio 2012 Express pro web .

2. Otevřete řešení Begin umístěné ve složce Source/Ex03-ConsumingWebAPI/Begin/. Jinak můžete pokračovat v používání koncového řešení získaného dokončením předchozího 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 , aby se stáhly chybějící balíčky.

   3. Nakonec řešení sestavíte kliknutím na Sestavit | řešení.

      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. Pomocí Nástrojů NuGet Power Tools zadáte verze balíčků v souboru Packages.config, budete moci stáhnout všechny požadované knihovny při prvním spuštění projektu. Proto budete muset tyto kroky spustit po otevření existujícího řešení z tohoto testovacího prostředí.

3. Otevřete soubor Index.cshtml umístěný ve složce Views/Home.

4. Nahraďte kód HTML uvnitř elementu div tělem ID tak, aby vypadal jako následující kód.

   <div id="body">
       <ul id="contacts"></ul>
   </div>
   

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

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

6. Otevřete soubor ContactController.cs, pokud ještě není otevřený.

7. Umístěte zarážku na metodu Get Třídy ContactController.

   

   Umístění zarážky na metodu Get kontroleru rozhraní API

8. Stisknutím klávesy F5 spusťte projekt. Prohlížeč načte dokument HTML.

   Poznámka:

   Ujistěte se, že procházíte na kořenovou adresu URL aplikace.

9. Po načtení stránky a spuštění JavaScriptu se zarážka zobrazí a spuštění kódu se pozastaví v kontroleru.

   

   Ladění volání webového rozhraní API pomocí sady Visual Studio 2012 Express pro web

10. 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 by se měly zobrazit kontakty vrácené voláním webového rozhraní API jako položky seznamu v prohlížeči.

    

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

11. Zastavte ladění.

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

V této úloze budete i nadále upravovat zobrazení indexu aplikace MVC. Formulář se přidá na stránku HTML, která zachytí uživatelský vstup a odešle ho do webového rozhraní API pro vytvoření nového kontaktu a vytvoří se nová metoda kontroleru webového rozhraní API, která bude shromažďovat datum z grafického uživatelského rozhraní.

1. Otevřete soubor ContactController.cs.

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

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

4. Do souboru přidejte níže uvedený kód HTML 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>
   

5. V rámci elementu skriptu v dolní části dokumentu přidejte následující zvýrazněný kód pro zpracování událostí kliknutí na tlačítko, které publikuje 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>
   

6. V ContactController.cs umístěte zarážku na metodu Post .

7. Stisknutím klávesy F5 spusťte aplikaci v prohlížeči.

8. Po načtení stránky v prohlížeči zadejte nové jméno a ID kontaktu a klikněte na tlačítko Uložit .

   

   Klientský dokument HTML načtený v prohlížeči

9. 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 zadanými ve formuláři.

   

   Objekt Kontakt odesílaný do webového rozhraní API z klienta

10. Projděte 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ěď následující 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 se nový kontakt přidá do seznamu kontaktů uložených implementací ContactRepository .

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

Poznámka:

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

---

Shrnutí

Toto cvičení vás seznámilo s novou architekturou webového rozhraní API ASP.NET a implementací webových rozhraní RESTful 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 připojení této služby místo jednoduchého úložiště poskytnutého 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 PROTOKOL HTTP a JSON nebo XML. Možnost hostovat webové 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 architekturu webového rozhraní API ASP.NET na adrese [https://asp.net/web-api](https://asp.net/web-api). Tento web bude i nadále poskytovat nejnovější informace, ukázky a novinky související s webovým rozhraním API, proto se často podívejte, jestli byste se chtěli ponořit hlouběji do umění vytváření vlastních webových rozhraní API dostupných prakticky pro jakékoli zařízení nebo vývojové rozhraní.

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

S fragmenty kódu máte veškerý kód, který potřebujete na dosah ruky. Dokument testovacího prostředí vám přesně řekne, kdy 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

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

1. Umístěte kurzor na místo, kam chcete vložit kód.

2. Začněte psát název fragmentu kódu (bez mezer nebo pomlček).

3. Sledujte, jak IntelliSense zobrazuje odpovídající názvy fragmentů kódu.

4. Vyberte správný fragment kódu (nebo pokračujte v psaní, dokud nebude vybrán název celého fragmentu kódu).

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

   

   Znovu stiskněte klávesu Tab a fragment kódu se rozbalí.

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

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

2. Vyberte Vložit fragment kódu následovaný mými fragmenty kódu.

3. Kliknutím na něj vyberte příslušný fragment kódu ze seznamu.

   

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

   

   Výběr relevantního fragmentu ze seznamu kliknutím na něj

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

Microsoft Visual Studio Express 2012 pro web nebo jinou verzi Expressu můžete nainstalovat pomocí instalačního programu Webová platforma Microsoft. Následující pokyny vás provedou postupem potřebným k instalaci sady Visual Studio Express 2012 pro web pomocí instalačního programu Webová platforma Microsoft.

1. Přejděte na [/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169](/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169). Pokud už máte nainstalovaný instalační program webové platformy, můžete ho také otevřít a vyhledat produkt Visual Studio Express 2012 pro web pomocí sady Azure SDK.

2. Klikněte na Nainstalovat. Pokud nemáte instalační program webové platformy, budete přesměrováni na jeho první stažení a instalaci.

3. Po otevření instalačního programu webové platformy spusťte instalaci kliknutím na nainstalovat .

   

   Instalace sady Visual Studio Express

4. Přečtěte si všechny licence a podmínky produktů a pokračujte kliknutím na Přijmout .

   

   Přijetí licenčních podmínek

5. Počkejte, až se proces stahování a instalace dokončí.

   

   Průběh instalace

6. Po dokončení instalace klepněte na tlačítko Dokončit.

   

   Instalace byla dokončena.

7. Kliknutím na tlačítko Ukončit zavřete instalační program webové platformy.

8. Pokud chcete otevřít Visual Studio Express pro web, přejděte na úvodní obrazovku a začněte psát "VS Express" a potom klikněte na dlaždici VS Express pro web.

   

   Dlaždice VS Express pro web

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

V tomto dodatku se dozvíte, jak vytvořit nový web z webu Azure Portal a publikovat aplikaci, kterou jste získali v testovacím prostředí, a využít tak funkci publikování nasazení webu, kterou poskytuje Azure.

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

1. 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 weby a pak škálovat s rostoucím provozem. Tady se můžete zaregistrovat.

   

   Přihlášení k portálu

2. Na panelu příkazů klikněte na Nový .

   

   Vytvoření nového webu

3. 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. Nezahrnuje kroky pro nastavení databáze.

   

   Vytvoření nového webu pomocí rychlého vytvoření

4. Počkejte na vytvoření nového webu .

5. Po vytvoření webu klikněte na odkaz pod sloupcem ADRESY URL . Zkontrolujte, jestli nový web funguje.

   

   Přechod na nový web

   

   Spuštěný web

6. Vraťte se na portál a kliknutím na název webu ve sloupci Název zobrazte stránky pro správu.

   

   Otevření stránek pro správu webu

7. Na stránce Řídicí panel v části Rychlý přehled klikněte 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 pro web a Microsoft Visual Studio 2012 podporují profily publikování pro čtení pro automatizaci konfigurace těchto programů pro publikování webových aplikací do Azure.

   

   Stažení profilu publikování webu

8. Stáhněte soubor profilu publikování do známého umístění. Dále v tomto cvičení se dozvíte, jak pomocí tohoto souboru publikovat webovou aplikaci 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 Serveru, budete muset vytvořit server služby SQL Database. Pokud chcete nasadit jednoduchou aplikaci, která nepoužívá SQL Server, můžete tuto úlohu přeskočit.

1. K uložení aplikační databáze budete potřebovat server služby SQL Database. Servery SLUŽBY SQL Database můžete zobrazit z vašeho předplatného na portálu pro správu Azure na řídicím panelu serveru sql Databases | Server | . Pokud server nemáte vytvořený, 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řte, protože bude vytvořena v pozdější fázi.

   

   Řídicí panel serveru SLUŽBY SQL Database

2. V další úloze otestujete připojení k databázi ze sady Visual Studio, z tohoto důvodu musíte do seznamu povolených IP adres serveru zahrnout svou 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 tlačítko.

   

   Přidání IP adresy klienta

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

   

   Potvrdit změny

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

1. Vraťte se k řešení ASP.NET MVC 4. V Průzkumník řešení klikněte pravým tlačítkem myši na projekt webu a vyberte Publikovat.

   

   Publikování webu

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

   

   Import profilu publikování

3. Klikněte na Ověřit připojení. Po dokončení ověření klikněte na tlačítko Další.

   Poznámka:

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

   

   Ověřování připojení

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

5. Připojení k databázi nakonfigurujte následujícím způsobem:

   • Do pole Název serveru zadejte adresu URL serveru služby SQL Database 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í řetězec

6. Pak klikněte na OK. Po zobrazení výzvy k vytvoření databáze klepněte na tlačítko Ano.

   

   Vytvoření databáze

7. Připojovací řetězec, které použijete pro připojení ke službě SQL Database ve Windows Azure, se zobrazí v textovém poli Výchozí připojení. Pak klikněte na tlačítko Další.

   

   Připojovací řetězec odkazující na SLUŽBU SQL Database

8. Na stránce Náhled klikněte na Publikovat.

   

   Publikování webové aplikace

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

   

   Aplikace publikovaná do Azure