Sdílet prostřednictvím

Novinky v ASP.NET MVC 4

  • Článek

Autor: Web Camp Team

Stáhnout Web Camp Training Kit

ASP.NET MVC 4 je architektura pro vytváření škálovatelných webových aplikací založených na standardech s využitím dobře zavedených vzorů návrhu a výkonu ASP.NET a rozhraní .NET Framework. Tato nová čtvrtá verze architektury se zaměřuje na usnadnění vývoje mobilních webových aplikací.

Začněte tím, že když vytvoříte nový projekt ASP.NET MVC 4, teď existuje šablona projektu mobilní aplikace, kterou můžete použít k vytvoření samostatné aplikace speciálně pro mobilní zařízení. Kromě toho ASP.NET MVC 4 se integruje s jQuery Mobile prostřednictvím balíčku NuGet jQuery.Mobile.MVC. jQuery Mobile je architektura založená na HTML5 pro vývoj webových aplikací, které jsou kompatibilní se všemi oblíbenými platformami mobilních zařízení, včetně Windows Phone, iPhonu, Androidu atd. Pokud ale potřebujete specializaci, ASP.NET MVC 4 také umožňuje obsluhovat různá zobrazení pro různá zařízení a poskytovat optimalizace specifické pro zařízení.

V tomto praktickém cvičení začnete se šablonou projektu ASP.NET MVC 4 "Internet Application" (Internetová aplikace) a vytvoříte aplikaci Fotogalerie. Aplikaci postupně vylepšíte pomocí jQuery Mobile a ASP.NET nových funkcí MVC 4, aby byla kompatibilní s různými mobilními zařízeními a desktopovými webovými prohlížeči. Dozvíte se také o nových receptech kódu pro generování kódu a o tom, jak ASP.NET MVC 4 usnadňuje psaní asynchronních metod akcí podporou<návratových typů Task ActionResult> .

Poznámka:

Všechny ukázkové kódy a fragmenty kódu jsou součástí sady Web Camp Training Kit, která je k dispozici ve verzích Microsoft-Web/WebCampTrainingKit. Projekt specifický pro toto cvičení je k dispozici v části Co je nového ve webových formulářích v ASP.NET 4.5.

Cíle

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

  • Využijte vylepšení šablon projektů ASP.NET MVC, včetně nové šablony projektu mobilní aplikace.
  • Použití atributu zobrazení HTML5 a dotazů na média CSS ke zlepšení zobrazení na mobilních zařízeních
  • Použití jQuery Mobile k progresivním vylepšením a k vytváření webového uživatelského rozhraní optimalizovaného pro dotykové ovládání
  • Vytváření zobrazení specifických pro mobilní zařízení
  • Použití komponenty view-switcher k přepínání mezi mobilními a desktopovými zobrazeními v aplikaci
  • Vytváření asynchronních kontrolerů pomocí podpory úloh

Požadavky

K dokončení tohoto cvičení musíte mít následující položky:

Nastavení

V celém dokumentu testovacího prostředí budete vyzváni k vložení bloků kódu. Pro usnadnění je většina tohoto kódu poskytována jako fragmenty kódu sady Visual Studio, které můžete použít v sadě Visual Studio, abyste se nemuseli přidávat ručně.

Instalace fragmentů kódu:

  1. Otevřete okno Průzkumníka Windows a přejděte do složky Source\Setup testovacího prostředí.
  2. Poklikáním na soubor Setup.cmd v této složce nainstalujte fragmenty kódu sady Visual Studio.

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. Nové šablony projektů MVC 4 ASP.NET
  2. Vytvoření webové aplikace Galerie fotografií
  3. Přidání podpory pro mobilní zařízení
  4. Použití asynchronních kontrolerů

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: Nové ASP.NET šablony projektů MVC 4

V tomto cvičení prozkoumáte vylepšení v šablonách projektu ASP.NET MVC 4. Kromě šablony internetové aplikace, která už existuje v MVC 3, tato verze teď obsahuje samostatnou šablonu pro mobilní aplikace. Nejprve se podíváte na některé relevantní funkce každé šablony. Pak budete pracovat na správném vykreslování stránky na různých platformách pomocí správného přístupu.

Úkol 1 – Zkoumání šablony internetové aplikace

  1. Otevřete Visual Studio.

  2. Vyberte soubor | Nový | Příkaz nabídky Projekt V dialogovém okně Nový projekt vyberte Visual C# | Webová šablona ve stromu levého podokna a zvolte ASP.NET webovou aplikaci MVC 4. Pojmenujte projekt PhotoGallery, vyberte umístění (nebo ponechte výchozí) a klikněte na OK.

    Poznámka:

    Později přizpůsobíte řešení PhotoGallery ASP.NET MVC 4, které teď vytváříte.

    Vytvoření nového projektu

    Vytvoření nového projektu

  3. V dialogovém okně Nový ASP.NET projekt MVC 4 vyberte šablonu projektu internetové aplikace a klepněte na tlačítko OK. Ujistěte se, že jste jako modul zobrazení vybrali Razor.

    Vytvoření nové internetové aplikace ASP.NET MVC 4

    Vytvoření nové internetové aplikace ASP.NET MVC 4

    Poznámka:

    Syntaxe Razor byla zavedena v ASP.NET MVC 3. Jejím cílem je minimalizovat počet znaků a stisknutí kláves potřebných v souboru, což umožňuje rychlý a plynulý pracovní postup kódování. Razor využívá stávající jazykové dovednosti jazyka C# / VB (nebo jiné) a poskytuje syntaxi značek šablon, která umožňuje skvělý pracovní postup vytváření HTML.

  4. Stisknutím klávesy F5 spusťte řešení a prohlédněte si obnovené šablony. Můžete si prohlédnout následující funkce:

    Šablony moderního stylu

    Šablony byly obnoveny a poskytují modernější styly.

    ASP.NET MVC 4 restyled šablon

    ASP.NET MVC 4 restyled šablon

    Stránka Nový kontakt

    Stránka Nový kontakt

    Adaptivní vykreslování

    Podívejte se na změnu velikosti okna prohlížeče a všimněte si, jak se rozložení stránky dynamicky přizpůsobuje nové velikosti okna. Tyto šablony používají metodu adaptivního vykreslování k správnému vykreslení na desktopových i mobilních platformách bez jakéhokoli přizpůsobení.

    ASP.NET šablony projektu MVC 4 v různých velikostech prohlížeče

    ASP.NET šablony projektu MVC 4 v různých velikostech prohlížeče

    Bohatší uživatelské rozhraní pomocí JavaScriptu

    Dalším vylepšením výchozích šablon projektů je použití JavaScriptu k zajištění interaktivnějšího JavaScriptu. Odkazy Pro přihlášení a registraci použité v šabloně slouží k ověření vstupních polí na straně klienta pomocí ověřování jQuery.

    jQuery Validation

    jQuery Validation

    Poznámka:

    Všimněte si dvou oddílů přihlášení, v první části se můžete přihlásit pomocí registrovaného účtu z webu a v druhé části se můžete případně přihlásit pomocí jiné ověřovací služby, jako je google (ve výchozím nastavení zakázáno).

  5. Zavřete prohlížeč a zastavte ladicí program a vraťte se do sady Visual Studio.

  6. Otevřete soubor AuthConfig.cs umístěný ve složce App_Start.

  7. Odeberte komentář z posledního řádku a zaregistrujte klienta Google pro ověřování OAuth .

    public static class AuthConfig
{
    public static void RegisterAuth()
    {
        // To let users of this site log in using their accounts from other sites such as Microsoft, Facebook, and Twitter,
        // you must update this site. For more information visit https://go.microsoft.com/fwlink/?LinkID=252166

        //OAuthWebSecurity.RegisterMicrosoftClient(
        //    clientId: "",
        //    clientSecret: "");

        //OAuthWebSecurity.RegisterTwitterClient(
        //    consumerKey: "",
        //    consumerSecret: "");

        //OAuthWebSecurity.RegisterFacebookClient(
        //    appId: "",
        //    appSecret: "");

        OAuthWebSecurity.RegisterGoogleClient();
    }
}

    Poznámka:

    Všimněte si, že ověřování můžete snadno povolit pomocí libovolné služby OpenID nebo OAuth, jako je Facebook, Twitter, Microsoft atd.

  8. Stisknutím klávesy F5 spusťte řešení a přejděte na přihlašovací stránku.

  9. Pokud se chcete přihlásit, vyberte službu Google .

    Výběr služby přihlášení

    Výběr služby přihlášení

  10. Přihlaste se pomocí svého účtu Google.

  11. Povolit webu (localhost) načíst informace z účtu Google.

  12. Nakonec se budete muset zaregistrovat na webu, abyste přidružili účet Google.

Přidružení účtu Google

Přidružení účtu Google 13. Zavřete prohlížeč a zastavte ladicí program a vraťte se do sady Visual Studio. 14. Nyní prozkoumejte řešení a podívejte se na některé další nové funkce představené ASP.NET MVC 4 v šabloně projektu.

Šablona projektu internetové aplikace ASP.NET MVC 4

Šablona projektu internetové aplikace ASP.NET MVC 4

  • HTML 5 – revize

    Projděte si zobrazení šablon a zjistěte nové značky motivu.

    Nová šablona s použitím kódu Razor a HTML5 markup About.cshtml.

    Nová šablona využívající značky Razor a HTML5 (About.cshtml).

  • Aktualizace javascriptových knihoven

    Výchozí šablona ASP.NET MVC 4 teď zahrnuje KnockoutJS, architekturu JavaScript MVVM, která umožňuje vytvářet bohaté a vysoce responzivní webové aplikace pomocí JavaScriptu a HTML. Stejně jako v MVC3 jsou knihovny uživatelského rozhraní jQuery a jQuery také součástí ASP.NET MVC 4.

    Poznámka:

    Další informace o knihovně KnockOutJS najdete na tomto odkazu: [http://learn.knockoutjs.com/](http://learn.knockoutjs.com/). Kromě toho se můžete seznámit s uživatelským rozhraním jQuery a jQuery v [http://docs.jquery.com/](http://docs.jquery.com/).

Úkol 2 – Zkoumání šablony mobilní aplikace

ASP.NET MVC 4 usnadňuje vývoj webů pro mobilní a tabletové prohlížeče. Tato šablona má stejnou strukturu aplikace jako šablona internetové aplikace (všimněte si, že kód kontroleru je prakticky stejný), ale jeho styl byl upraven tak, aby se správně vykresloval v dotykových mobilních zařízeních.

  1. Vyberte soubor | Nový | Příkaz nabídky Projekt V dialogovém okně Nový projekt vyberte Visual C# | Webová šablona ve stromu levého podokna a zvolte webovou aplikaci ASP.NET MVC 4. Pojmenujte projekt PhotoGallery.Mobile, vyberte umístění (nebo ponechte výchozí), vyberte Přidat do řešení a klikněte na OK.

  2. V dialogovém okně Nový ASP.NET projekt MVC 4 vyberte šablonu projektu mobilní aplikace a klikněte na tlačítko OK. Ujistěte se, že jste jako modul zobrazení vybrali Razor.

    Vytvoření nové mobilní aplikace ASP.NET MVC 4

    Vytvoření nové mobilní aplikace ASP.NET MVC 4

  3. Teď můžete prozkoumat řešení a vyzkoušet si některé nové funkce představené šablonou řešení ASP.NET MVC 4 pro mobilní zařízení:

    • Knihovna jQuery Mobile

      Šablona projektu mobilní aplikace obsahuje knihovnu jQuery Mobile, což je opensourcová knihovna pro kompatibilitu mobilního prohlížeče. jQuery Mobile používá progresivní vylepšení pro mobilní prohlížeče, které podporují šablony stylů CSS a JavaScript. Progresivní vylepšení umožňuje všem prohlížečům zobrazit základní obsah webové stránky, zatímco umožňuje pouze nejvýkonnějším prohlížečům zobrazit bohatý obsah. Soubory JavaScriptu a CSS, které jsou součástí stylu jQuery Mobile, pomáhají mobilním prohlížečům přizpůsobit obsah na obrazovce, aniž byste museli provádět změny v kódu stránky.

      jQuery-mobile-library-included-in-the-template

      Mobilní knihovna jQuery, která je součástí šablony

    • Kód založený na HTML5

      Mobile-application-template-using-HTML5-markup

      Šablona mobilní aplikace využívající kód HTML5 (Login.cshtml a index.cshtml)

  4. Stisknutím klávesy F5 spusťte řešení.

  5. Otevřete emulátor Windows Phone 7.

  6. Na úvodní obrazovce telefonu otevřete Internet Explorer. Podívejte se na adresu URL, kde desktopová aplikace začala, a přejděte na tuto adresu URL z telefonu (např. http://localhost:[PortNumber]/).

  7. Teď můžete zadat přihlašovací stránku nebo se podívat na stránku o produktu. Všimněte si, že styl webu je založen na nové aplikaci Metro pro mobilní zařízení. Šablona projektu ASP.NET MVC 4 se na mobilních zařízeních správně zobrazí a zajistí, aby byly všechny prvky stránky viditelné a povolené. Všimněte si, že odkazy v záhlaví jsou dostatečně velké, aby bylo možné kliknout nebo klepnout.

    Stránky šablony projektu v mobilním zařízení

    Stránky šablony projektu v mobilním zařízení

  8. Nová šablona také používá metaznačku Viewport. Většina mobilních prohlížečů definuje šířku pro okno virtuálního prohlížeče nebo "oblast zobrazení", která je větší než skutečná šířka mobilního zařízení. To umožňuje mobilním prohlížečům zobrazit celou webovou stránku ve virtuálním displeji. Metaznačku Viewport umožňuje webovým vývojářům nastavit šířku, výšku a měřítko oblasti prohlížeče na mobilních zařízeních . Šablona ASP.NET MVC 4 pro mobilní aplikace nastaví oblast zobrazení na šířku zařízení ("width=device-width") v šabloně rozložení (Views\Shared_Layout.cshtml), aby všechny stránky měly nastavenou šířku obrazovky zařízení. Všimněte si, že metaznačku Viewport nezmění výchozí zobrazení prohlížeče.

  9. Otevřete soubor _Layout.cshtml, který se nachází v zobrazeních | Sdílená složka a okomentujte metaznačku Viewport. Spusťte aplikaci, pokud ještě není otevřená, a podívejte se na rozdíly.

...
 <meta charset="utf-8" />
 <title>@ViewBag.Title</title> 
 @* <meta name="viewport" content="width=device-width" /> *@
...

Web po komentování metaznačku oblasti zobrazení

Web po komentování metaznačku oblasti zobrazení 10. V sadě Visual Studio stisknutím kláves SHIFT + F5 zastavte ladění aplikace. 11. Odkomentujte metaznačku oblasti zobrazení.

...
 <meta charset="utf-8" />
 <title>@ViewBag.Title</title> 
   <meta name="viewport" content="width=device-width" /> 
...

Úloha 3 – použití adaptivního vykreslování

V této úloze se dozvíte další metodu, jak správně vykreslit webovou stránku na mobilních zařízeních a webových prohlížečích současně bez jakéhokoli přizpůsobení. Už jste použili metaznačku Viewport s podobným účelem. Teď se setkáte s další výkonnou metodou: adaptivní vykreslování.

Adaptivní vykreslování je technika, která používá dotazy médií CSS3 k přizpůsobení stylu použitého na stránku. Dotazy na média definují podmínky uvnitř šablony stylů style a seskupují styly CSS za určité podmínky. Pouze pokud je podmínka pravdivá, styl se použije na deklarované objekty.

Flexibilita poskytovaná technikou adaptivního vykreslování umožňuje jakékoli přizpůsobení pro zobrazení webu na různých zařízeních. Na jedné šabloně stylů můžete definovat tolik stylů, kolik chcete, aniž byste museli psát kód logiky a zvolit styl. Proto je to velmi elegantní způsob, jak přizpůsobit styly stránek, protože snižuje množství duplikovaného kódu a logiky pro účely vykreslování. Na druhou stranu by se spotřeba šířky pásma zvětšovala, protože velikost souborů CSS se může zvětšit na okraj.

Pomocí techniky adaptivního vykreslování se váš web zobrazí správně bez ohledu na prohlížeč. Měli byste ale zvážit, jestli se jedná o větší zatížení šířky pásma.

Poznámka:

Základní formát mediálního dotazu je: @media [Rozsah: vše | handheld | tisk | projekce | obrazovka] ([vlastnost:hodnota] a ... [property:value])

Příklady multimediálních dotazů: >@media všechna a (max-width: 1000px) a (min-width: 700px) {}: Pro všechna rozlišení mezi 700px a 1000px.

@media obrazovky a (min-width: 400px) a (max-width: 700px) { ... }: Pouze pro obrazovky. Rozlišení musí být v rozsahu 400 až 700 pixelů.

@media handheld a (min-width: 20em), obrazovka a (min-width: 20em) { ... }: Pro kapesní zařízení (mobilní zařízení) a obrazovky. Minimální šířka musí být větší než 20em.

Další informace o tom najdete na webu W3C.

Teď prozkoumáte, jak funguje adaptivní vykreslování, což zlepšuje čitelnost výchozí šablony webu ASP.NET MVC 4.

  1. Otevřete PhotoGallery.sln řešení, které jste vytvořili v úkolu 1, a vyberte projekt PhotoGallery. Stisknutím klávesy F5 spusťte řešení.

  2. Změňte šířku prohlížeče tak, že nastavíte okna na polovinu nebo menší než čtvrtinu původní velikosti. Všimněte si, co se stane s položkami v záhlaví: Některé prvky se nezobrazí v viditelné oblasti záhlaví.

  3. Otevřete soubor Site.css z Průzkumníka řešení sady Visual Studio, který se nachází ve složce projektu obsahu . Stisknutím kombinace kláves CTRL+F otevřete integrované vyhledávání v sadě Visual Studio a napište @media dotaz na médium CSS.

    Podmínka dotazu na média definovaná v této šabloně funguje tímto způsobem: Pokud je velikost okna prohlížeče nižší než 850 pixelů, použijí se pravidla CSS, která jsou definovaná uvnitř tohoto bloku médií.

    Vyhledání dotazu na médium

    Vyhledání dotazu na médium

  4. Nahraďte hodnotu atributu max-width nastavenou v 850 px 10px, aby bylo možné zakázat adaptivní vykreslování, a stisknutím kombinace kláves CTRL + S uložte změny. Vraťte se do prohlížeče a stisknutím kombinace kláves CTRL+ F5 aktualizujte stránku změnami, které jste provedli. Všimněte si rozdílů na obou stránkách při úpravě šířky okna.

    Stránka používá <span class=@media styl vlevo a vpravo je styl vynechán" title="Na levé straně stránka používá styl @media vpravo, styl se vynechá" />

    Na levé straně stránka používá @media styl vpravo, styl se vynechá.

    Teď se podívejme, co se stane na mobilních zařízeních:

    Na levé straně stránka používá <span class=@media styl je vpravo vynechán" title="Na levé straně stránka používá styl @media vpravo, styl se vynechá" />

    Na levé straně stránka používá @media styl vpravo, styl se vynechá.

    I když si všimnete, že změny při vykreslení stránky ve webovém prohlížeči nejsou příliš významné, při použití mobilního zařízení se rozdíly stanou jasnější. Na levé straně obrázku vidíme, že vlastní styl zlepšil čitelnost.

    Adaptivní vykreslování se dá použít v mnoha dalších scénářích, což usnadňuje použití podmíněného stylu na web a řešení běžných problémů se stylem pomocí elegantního přístupu.

    Metaznačku Viewport a dotazy na média CSS nejsou specifické pro ASP.NET MVC 4, takže tyto funkce můžete využít v libovolné webové aplikaci.

  5. V sadě Visual Studio stisknutím kláves SHIFT + F5 zastavte ladění aplikace.

V tomto cvičení budete pracovat na aplikaci Galerie fotografií pro zobrazení fotek. Začnete se šablonou projektu ASP.NET MVC 4 a pak přidáte funkci pro načtení fotek ze služby a jejich zobrazení na domovské stránce.

V následujícím cvičení toto řešení aktualizujete, abyste vylepšili způsob zobrazení na mobilních zařízeních.

Úkol 1 – Vytvoření napodobení fotoslužy

V této úloze vytvoříte napodobení fotoslužbě, která načte obsah, který se zobrazí v galerii. Uděláte to tak, že přidáte nový kontroler, který jednoduše vrátí soubor JSON s daty každé fotky.

  1. Pokud ještě není otevřená sada Visual Studio, otevřete ji.

  2. Vyberte soubor | Nový | Příkaz nabídky Projekt V dialogovém okně Nový projekt vyberte Visual C# | Webová šablona ve stromu levého podokna a zvolte ASP.NET webovou aplikaci MVC 4. Pojmenujte projekt PhotoGallery, vyberte umístění (nebo ponechte výchozí) a klikněte na OK. Alternativně můžete pokračovat v práci z existujícího ASP.NET řešení internetové aplikace MVC 4 z cvičení 1 a přeskočit další krok.

  3. V dialogovém okně Nový ASP.NET projektu MVC 4 vyberte šablonu projektu internetové aplikace a klikněte na tlačítko OK. Ujistěte se, že jste jako modul zobrazení vybrali Razor.

  4. V Průzkumník řešení klikněte pravým tlačítkem na složku App_Data projektu a vyberte Přidat | Existující položka Přejděte do složky Source\Assets\App_Data tohoto cvičení a přidejte soubor Photos.json .

  5. Vytvořte nový kontroler s názvem PhotoController. Uděláte to tak, že kliknete pravým tlačítkem myši na složku Kontrolery , přejdete na Přidat a vyberete Kontroler. Dokončete název kontroleru, ponechte šablonu prázdného kontroleru MVC a klikněte na Přidat.

    Přidání PhotoControlleru

    Přidání PhotoControlleru

  6. Nahraďte metodu Index následující akcí Galerie a vraťte obsah ze souboru JSON, který jste nedávno přidali do projektu.

    (Fragment kódu – ASP.NET MVC 4 Lab – Ex02 – Akce galerie)

    public class PhotoController : Controller
{
   public ActionResult Gallery()
   {
      return this.File("~/App_Data/Photos.json", "application/json");
   }
}

  7. Stisknutím klávesy F5 spusťte řešení a pak přejděte na následující adresu URL, abyste mohli otestovat napodobenou fotoslužbě: http://localhost:[port]/photo/gallery (hodnota [port] závisí na aktuálním portu, na kterém byla aplikace spuštěna). Požadavek na tuto adresu URL by měl načíst obsah souboru Photos.json .

    Testování napodobené fotoslužy

    Testování napodobené fotoslužy

Ve skutečné implementaci můžete k implementaci služby Fotogalerie použít ASP.NET webové rozhraní API . ASP.NET webové rozhraní API je architektura, která usnadňuje vytváření služeb HTTP, které se dostanou do široké škály klientů, včetně prohlížečů a mobilních zařízení. ASP.NET webové rozhraní API je ideální platformou pro vytváření aplikací RESTful v rozhraní .NET Framework.

Úkol 2 – zobrazení galerie fotografií

V tomto úkolu aktualizujete domovskou stránku tak, aby zobrazovala galerii fotografií pomocí napodobené služby, kterou jste vytvořili v prvním úkolu tohoto cvičení. Přidáte soubory modelu a aktualizujete zobrazení galerie.

  1. V sadě Visual Studio stisknutím kláves SHIFT + F5 zastavte ladění aplikace.

  2. Vytvořte třídu Fotografie ve složce Models. Uděláte to tak, že kliknete pravým tlačítkem myši na složku Modely , vyberete Přidat a kliknete na Třída. Potom nastavte název na Photo.cs a klikněte na Přidat.

  3. Do třídy Photo přidejte následující členy.

    (Fragment kódu – ASP.NET MVC 4 Lab – Ex02 – Foto model)

    public class Photo
{
    public string Title { get; set; }

    public string FileName { get; set; }

    public string Description { get; set; }

    public DateTime UploadDate { get; set; }
}

  4. Otevřete soubor HomeController.cs ze složky Kontrolery.

  5. Přidejte následující příkazy using.

    (Fragment kódu – ASP.NET MVC 4 Lab – Ex02 – HomeController Usings)

    using System.Net.Http;
using System.Web.Script.Serialization;
using Newtonsoft.Json;
using PhotoGallery.Models;

  6. Aktualizujte akci indexu tak, aby používala HttpClient k načtení dat galerie, a pak pomocí JavaScriptSerializer deserializovat na model zobrazení.

    (Fragment kódu – ASP.NET MVC 4 Lab – Ex02 – Akce indexu)

    public ActionResult Index()
{
    var client = new HttpClient();
    var response = client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme)).Result;
    var value = response.Content.ReadAsStringAsync().Result;

    var result = JsonConvert.DeserializeObject<List<Photo>>(value);

    return View(result);
}

  7. Otevřete soubor Index.cshtml umístěný ve složce Views\Home a nahraďte veškerý obsah následujícím kódem.

    Tento kód prochází všechny fotografie načtené ze služby a zobrazí je do neuspořádaného seznamu.

    (Fragment kódu – ASP.NET MVC 4 Lab - Ex02 - Photo List)

    @model List<PhotoGallery.Models.Photo>
@{
    ViewBag.Title = "Photo Gallery";
}

<ul class="thumbnails">
    @foreach (var photo in Model)
    {
        <li class="item">
            <a href="@Url.Content("~/photos/" + photo.FileName)">
                <img alt="@photo.Description" src="@Url.Content("~/photos/" + photo.FileName)" class="thumbnail-border" width="180" />
            </a>
                <span class="image-overlay">@photo.Title</span>
        </li>
    }
</ul>

  8. V Průzkumník řešení klikněte pravým tlačítkem na složku Obsah projektu a vyberte Přidat | Existující položka Přejděte do složky Source\Assets\Content v tomto cvičení a přidejte soubor Site.css . Budete muset potvrdit její nahrazení. Pokud máte otevřený Site.css soubor, budete muset soubor znovu načíst také.

  9. Otevřete Průzkumník souborů a zkopírujte celou složku Fotky umístěnou ve složce Source\Assets v tomto cvičení do kořenové složky projektu v Průzkumník řešení.

  10. Aplikaci spusťte. Teď byste měli vidět domovskou stránku zobrazující fotky v galerii.

    Fotogalerie

    Fotogalerie

  11. V sadě Visual Studio stisknutím kláves SHIFT + F5 zastavte ladění aplikace.

Cvičení 3: Přidání podpory pro mobilní zařízení

Jednou z klíčových aktualizací v ASP.NET MVC 4 je podpora vývoje mobilních zařízení. V tomto cvičení prozkoumáte nové funkce ASP.NET MVC 4 pro mobilní aplikace rozšířením řešení PhotoGallery, které jste vytvořili v předchozím cvičení.

Úloha 1 – instalace jQuery Mobile v aplikaci ASP.NET MVC 4

  1. Otevřete řešení Begin umístěné ve složce Source/Ex3-MobileSupport/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í.

  2. Otevřete konzolu Správce balíčků kliknutím na možnost nabídky Nástroje>NuGet Správce balíčků> Správce balíčků Konzola.

    Otevření konzoly Správce balíčků NuGet

    Otevření konzoly Správce balíčků NuGet

  3. V konzole Správce balíčků spuštěním následujícího příkazu nainstalujte balíček jQuery.Mobile.MVC.

    jQuery Mobile je opensourcová knihovna pro vytváření webového uživatelského rozhraní optimalizovaného pro dotykové ovládání. Balíček NuGet jQuery.Mobile.MVC obsahuje pomocné rutiny pro použití jQuery Mobile s aplikací ASP.NET MVC 4.

    Poznámka:

    Spuštěním následujícího příkazu stáhnete knihovnu jQuery.Mobile.MVC z Nugetu.

    PM

    Install-Package jQuery.Mobile.MVC

    Tento příkaz nainstaluje jQuery Mobile a některé pomocné soubory, včetně následujících:

    • Views/Shared/_Layout.Mobile.cshtml: je rozložení založené na jQuery Mobile optimalizované pro menší obrazovku. Když web obdrží požadavek z mobilního prohlížeče, nahradí původní rozložení (_Layout.cshtml) tímto.

    • Komponenta přepínače zobrazení: skládá se z částečného zobrazení Views/Shared/_ViewSwitcher.cshtml a kontroleru ViewSwitcherController.cs . Tato komponenta zobrazí odkaz v mobilních prohlížečích, aby uživatelé mohli přepnout na desktopovou verzi stránky.
      Projekt Fotogalerie s mobilní podporou

      Projekt Fotogalerie s mobilní podporou

  4. Zaregistrujte balíčky Mobile. Uděláte to tak, že otevřete Global.asax.cs soubor a přidáte následující řádek.

    (Fragment kódu – ASP.NET MVC 4 Lab – Ex03 – Registrace mobilních sad)

    protected void Application_Start()
{
     AreaRegistration.RegisterAllAreas();

     WebApiConfig.Register(GlobalConfiguration.Configuration);
     FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
     RouteConfig.RegisterRoutes(RouteTable.Routes);
     BundleConfig.RegisterBundles(BundleTable.Bundles);
     BundleMobileConfig.RegisterBundles(BundleTable.Bundles);
     AuthConfig.RegisterAuth();
}

  5. Spusťte aplikaci pomocí desktopového webového prohlížeče.

  6. Otevřete emulátor Windows Phone 7 umístěný v nabídce Start | Všechny programy | Windows Phone SDK 7.1 | Emulátor Windows Phone.

  7. Na úvodní obrazovce telefonu otevřete Internet Explorer. Podívejte se na adresu URL, kde aplikace začala, a přejděte na tuto adresu URL pomocí prohlížeče pro telefon (např. http://localhost:[PortNumber]/).

    Všimněte si, že vaše aplikace bude v emulátoru Windows Phone vypadat jinak, protože jQuery.Mobile.MVC vytvořil v projektu nové prostředky, které zobrazují zobrazení optimalizovaná pro mobilní zařízení.

    Všimněte si zprávy v horní části telefonu a zobrazte odkaz, který se přepne do zobrazení Plocha. Kromě toho rozložení _Layout.Mobile.cshtml vytvořené balíčkem, který jste nainstalovali, zahrnuje jiné rozložení v aplikaci.

    Poznámka:

    Zatím neexistuje žádný odkaz na návrat k mobilnímu zobrazení. Bude součástí novějších verzí.

    Mobilní zobrazení domovské stránky Galerie fotografií

    Mobilní zobrazení domovské stránky Galerie fotografií

  8. V sadě Visual Studio stisknutím kláves SHIFT + F5 zastavte ladění aplikace.

Úkol 2 – Vytváření mobilních zobrazení

V této úloze vytvoříte mobilní verzi zobrazení indexu s obsahem přizpůsobeným pro lepší vzhled v mobilních zařízeních.

  1. Zkopírujte zobrazení Views\Home\Index.cshtml a vložte ho, abyste vytvořili kopii, přejmenujte nový soubor na Index.Mobile.cshtml.

  2. Otevřete nové vytvořené zobrazení Index.Mobile.cshtml a nahraďte stávající <značku ul> tímto kódem. Tímto způsobem aktualizujete <značku ul> pomocí datových poznámek jQuery Mobile tak, aby používala mobilní motivy z jQuery.

    <ul data-role="listview" data-inset="true" data-filter="true">

    Poznámka:

    Všimněte si, že:

    • Atribut role dat nastavený na listview vykreslí seznam pomocí stylů listview.

    • Atribut data-inset nastavený na true zobrazí seznam s zaobleným ohraničením a okrajem.

    • Atribut filtru dat nastavený na true vygeneruje vyhledávací pole.

    Další informace o konvencích jQuery Mobile najdete v dokumentaci k projektu: [https://demos.jquerymobile.com/1.1.1/](https://demos.jquerymobile.com/1.1.1/)

  3. Stisknutím kombinace kláves CTRL+S uložte změny.

  4. Přepněte do emulátoru Windows Phone a aktualizujte web. Všimněte si nového vzhledu a chování seznamu galerie a také nového vyhledávacího pole umístěného v horní části. Potom do vyhledávacího pole (například Tulipány) zadejte slovo, které spustí hledání v galerii fotek.

    Galerie s použitím stylu listview s filtrováním

    Galerie s použitím stylu listview s filtrováním

    K shrnutí jste použili recept View Mobilizer k vytvoření kopie zobrazení indexu s příponou "mobilní". Tato přípona označuje, že ASP.NET MVC 4, že každý požadavek vygenerovaný z mobilního zařízení bude tuto kopii indexu používat. Kromě toho jste aktualizovali mobilní verzi zobrazení indexu tak, aby používala jQuery Mobile k vylepšení vzhledu a chování webu v mobilních zařízeních.

  5. Vraťte se do sady Visual Studio a otevřete Site.Mobile.css umístěné ve složce Obsah .

  6. Opravte umístění názvu fotky, aby se zobrazoval na pravé straně obrázku. Uděláte to tak, že do souboru Site.Mobile.css přidáte následující kód.

    CSS

    .ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li {
    padding: 0px !important;
}

li.item span.image-overlay
{
    position:relative;
    left:100px;
    top:-40px;
    height:0px;
    display:block;
}

  7. Stisknutím kombinace kláves CTRL+S uložte změny.

  8. Přepněte zpátky do emulátoru Windows Phone a aktualizujte web. Všimněte si, že název fotky je teď správně umístěný.

    Nadpis umístěný na pravé straně obrázku

    Nadpis umístěný na pravé straně obrázku

Úkol 3 – mobilní motivy jQuery

Každé rozložení a widget v jQuery Mobile je navržené kolem nové objektově orientované architektury CSS, která umožňuje použít kompletní jednotný vizuální návrh motivu pro weby a aplikace.

Výchozí motiv jQuery Mobile obsahuje 5 vzorníků, které jsou určené písmeny (a, b, c, d, e) pro stručnou referenci.

V této úloze aktualizujete mobilní rozložení tak, aby používalo jiný motiv než výchozí.

  1. Přepněte zpět do sady Visual Studio.

  2. Otevřete soubor _Layout.Mobile.cshtml umístěný v části Views\Shared.

  3. Najděte element div s datovou rolí nastavenou na "page" a aktualizujte motiv dat na "e".

    <div data-role="page" data-theme="e">

  4. Stisknutím kombinace kláves CTRL+S uložte změny.

  5. Aktualizujte web v emulátoru Windows Phone a všimněte si nového schématu barev.

    Mobilní rozložení s jiným barevným schématem

    Mobilní rozložení s jiným barevným schématem

Úkol 4 – Použití komponenty View-Switcher a přepsání funkcí prohlížeče

Konvencí pro webové stránky optimalizované pro mobilní zařízení je přidat odkaz, jehož text je něco jako desktopové zobrazení nebo režim full webu, který umožňuje uživatelům přepnout na desktopovou verzi stránky. Balíček jQuery.Mobile.MVC obsahuje ukázkovou komponentu view-switcher pro tento účel, která se používá v zobrazení _Layout.Mobile.cshtml.

Odkaz pro přepnutí do zobrazení plochy

Odkaz pro přepnutí do zobrazení plochy

Přepínač zobrazení používá novou funkci s názvem Přepsání prohlížeče. Tato funkce umožňuje vaší aplikaci zpracovávat požadavky tak, jako by přišly z jiného prohlížeče (uživatelského agenta) než z toho, ze které skutečně pocházejí.

V této úloze prozkoumáte ukázkovou implementaci přepínače zobrazení přidaného jQuery.Mobile.MVC a nové funkce přepsání prohlížeče v ASP.NET MVC 4.

  1. Přepněte zpět do sady Visual Studio.

  2. Otevřete zobrazení _Layout.Mobile.cshtml umístěné ve složce Views\Shared a všimněte si, že se na součást přepínače zobrazení odkazuje jako částečné zobrazení.

    Mobilní rozložení pomocí komponenty View-Switcher

    Mobilní rozložení pomocí komponenty View-Switcher

  3. Otevřete částečné zobrazení _ViewSwitcher.cshtml.

    Částečné zobrazení používá novou metodu ViewContext.HttpContext.GetOverriddenBrowser() k určení původu webového požadavku a zobrazení odpovídajícího odkazu pro přepnutí na zobrazení Desktop nebo Mobile.

    Metoda GetOverriddenBrowser vrací instanci HttpBrowserCapabilitiesBase , která odpovídá aktuálně nastavenému uživatelskému agentovi pro požadavek (skutečné nebo přepsání). Tuto hodnotu můžete použít k získání vlastností, jako je IsMobileDevice.

    Částečné zobrazení ViewSwitcher

    Částečné zobrazení ViewSwitcher

  4. Otevřete třídu ViewSwitcherController.cs umístěnou ve složce Kontrolery. Podívejte se, že SwitchView akce je volána odkazem v ViewSwitcher komponentě a všimněte si nových metod HttpContext.

    • Metoda HttpContext.ClearOverriddenBrowser() odebere všechny přepsaný uživatelský agent pro aktuální požadavek.

    • Metoda HttpContext.SetOverriddenBrowser() přepíše skutečnou hodnotu agenta uživatele požadavku pomocí zadaného uživatelského agenta.
      Ovladač ViewSwitcher
      Ovladač ViewSwitcher

      Přepsání prohlížeče je základní funkcí ASP.NET MVC 4, která je dostupná i v případě, že neinstalujete balíček jQuery.Mobile.MVC. Tato funkce však ovlivňuje pouze zobrazení, rozložení a částečné zobrazení a nemá vliv na žádné funkce, které závisí na objektu Request.Browser.

Úkol 5 – přidání přepínače zobrazení v zobrazení plochy

V této úloze aktualizujete rozložení plochy tak, aby zahrnovalo přepínač zobrazení. Umožníte tak mobilním uživatelům vrátit se do mobilního zobrazení při procházení desktopového zobrazení.

  1. Aktualizujte web v emulátoru Windows Phone.

  2. Klikněte na odkaz Zobrazení plochy v horní části galerie. Všimněte si, že v desktopovém zobrazení není žádný přepínač zobrazení, který vám umožní vrátit se do mobilního zobrazení.

  3. Vraťte se do sady Visual Studio a otevřete zobrazení _Layout.cshtml .

  4. Vyhledejte oddíl přihlášení a vložte volání pro vykreslení _ViewSwitcher částečného zobrazení pod _LogOnPartial částečným zobrazením. Změny pak uložíte stisknutím kombinace kláves CTRL+S .

    <div class="float-right">
    <section id="login">
        @Html.Partial("_LogOnPartial")

        @Html.Partial("_ViewSwitcher")
    </section>
    <nav>

  5. Stisknutím kombinace kláves CTRL+S uložte změny.

  6. Aktualizujte stránku v emulátoru Windows Phone a poklikáním na obrazovku přiblížení. Všimněte si, že domovská stránka teď zobrazuje odkaz mobilní zobrazení , který přepne z mobilního zobrazení na desktopové zobrazení.

    Přepínač zobrazení vykreslený v zobrazení plochy

    Přepínač zobrazení vykreslený v zobrazení plochy

  7. Přepněte znovu do zobrazení Mobilní zařízení a přejděte na stránku O aplikaci (http://localhost[port]/Domů/O aplikaci). Všimněte si, že i když jste nevytvořili zobrazení About.Mobile.cshtml, zobrazí se stránka O aplikaci pomocí mobilního rozložení (_Layout.Mobile.cshtml).

    Stránka O aplikaci

    Stránka O aplikaci

  8. Nakonec web otevřete v desktopovém webovém prohlížeči. Všimněte si, že na zobrazení plochy nemá vliv žádná z předchozích aktualizací.

    PhotoGallery desktopové zobrazení

    PhotoGallery desktopové zobrazení

Úkol 6 – vytváření nových režimů zobrazení

Funkce nových režimů zobrazení umožňuje aplikaci vybrat zobrazení v závislosti na prohlížeči, který požadavek generuje. Pokud například desktopový prohlížeč požádá o domovskou stránku, aplikace vrátí šablonu Views\Home\Index.cshtml . Pokud mobilní prohlížeč požádá o domovskou stránku, aplikace vrátí šablonu Views\Home\Index.mobile.cshtml .

V této úloze vytvoříte přizpůsobené rozložení pro zařízení iPhone a budete muset simulovat požadavky ze zařízení iPhone. K tomu můžete použít emulátor nebo simulátor iPhone (například Elektrický mobilní simulátor) nebo prohlížeč s doplňky, které upravují uživatelského agenta. Pokyny k nastavení řetězce uživatelského agenta v prohlížeči Safari pro emulaci iPhone naleznete v tématu Jak nechat Safari předstírat, že je to IE v David Alison blogu.

Všimněte si, že tato úloha je nepovinná a v průběhu cvičení můžete pokračovat bez jeho spuštění.

  1. V sadě Visual Studio stisknutím kláves SHIFT + F5 zastavte ladění aplikace.

  2. Otevřete Global.asax.cs a přidejte následující příkaz using.

    using System.Web.WebPages;

  3. Do metody Application_Start přidejte následující zvýrazněný kód.

    (Fragment kódu – ASP.NET MVC 4 Lab – Ex03 – iPhone DisplayMode)

    protected void Application_Start()
{
    // ...

    DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPhone")
    {
        ContextCondition = context =>
            context.Request.UserAgent != null &&
            context.Request.UserAgent.IndexOf("iPhone", StringComparison.OrdinalIgnoreCase) >= 0
    });
}

Zaregistrovali jste nový defaultDisplayMode s názvem "iPhone" v statickém seznamu DisplayModeProvider.Instance.Modes , který se bude shodovat s jednotlivými příchozími požadavky. Pokud příchozí požadavek obsahuje řetězec "iPhone", ASP.NET MVC najde zobrazení, jejichž název obsahuje příponu "iPhone". Parametr 0 označuje, jak je specifický nový režim; Toto zobrazení je například konkrétnější než obecné pravidlo .mobile, které odpovídá požadavkům z mobilních zařízení.

Po spuštění tohoto kódu, když prohlížeč iPhone vygeneruje požadavek, vaše aplikace použije rozložení Views\Shared\_Layout.iPhone.cshtml , které vytvoříte v dalších krocích.

Poznámka:

Tento způsob testování požadavku pro iPhone byl zjednodušen pro ukázkové účely a nemusí fungovat podle očekávání pro každý řetězec uživatelského agenta iPhone (například test je citlivý na malá a velká písmena).

  1. Vytvořte kopii souboru _Layout.Mobile.cshtml ve složce Views\Shared a přejmenujte kopii na "_Layout.iPhone.cshtml".
  2. Otevřete soubor _Layout.iPhone.cshtml , který jste vytvořili v předchozím kroku.
  3. Najděte element div s atributem data-role nastaveným na stránku a změňte atribut motivu dat na "a".
<body> 
    <div data-role="page" data-theme="a">
        @Html.Partial("_ViewSwitcher")
...

Teď máte ve své aplikaci ASP.NET MVC 4 3 rozložení:

  1. _Layout.cshtml: výchozí rozložení používané pro desktopové prohlížeče.

  2. _Layout.mobile.cshtml: výchozí rozložení použité pro mobilní zařízení.

  3. _Layout.iPhone.cshtml: specifické rozložení pro zařízení iPhone pomocí jiného barevného schématu k rozlišení od _Layout.mobile.cshtml.

  4. Stisknutím klávesy F5 spusťte aplikaci a přejděte na web v emulátoru Windows Phone.

  5. Otevřete simulátor iPhonu (pokyny k instalaci a konfiguraci simulátoru iPhonu najdete v dodatku C) a přejděte na web. Všimněte si, že každý telefon používá konkrétní šablonu.

    Použití různých zobrazení pro každé mobilní zařízení2

    Použití různých zobrazení pro každé mobilní zařízení

Cvičení 4: Použití asynchronních kontrolerů

Microsoft .NET Framework 4.5 zavádí nové jazykové funkce v jazyce C# a Visual Basic, které poskytují nový základ pro asynchrony v programování .NET. Díky tomuto novému základu se asynchronní programování podobá synchronnímu programování ( a o něco tak jednoduchého jako - synchronní programování). Nyní můžete psát asynchronní metody akcí v ASP.NET MVC 4 pomocí třídy AsyncController . Asynchronní metody akcí můžete použít pro dlouhotrvající požadavky vázané na procesor. Tím zabráníte tomu, aby webový server během zpracování požadavku nefungoval. Třída AsyncController se obvykle používá pro dlouhotrvající volání webové služby.

Toto cvičení vysvětluje základy asynchronní operace v ASP.NET MVC 4. Pokud chcete podrobnější informace, můžete se podívat na následující článek: [https://msdn.microsoft.com/library/ee728598%28v=vs.100%29.aspx](https://msdn.microsoft.com/library/ee728598%28v=vs.100%29.aspx)

Úloha 1 – implementace asynchronního kontroleru

  1. Otevřete řešení Begin umístěné ve složce Source/Ex4-Async/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í.

  2. Otevřete třídu HomeController.cs ze složky Kontrolery.

  3. Přidejte následující příkaz using.

    using System.Threading.Tasks;

  4. Aktualizujte HomeController třídu tak, aby dědila z AsyncController. Kontrolery odvozené z AsyncController umožňují ASP.NET zpracovávat asynchronní požadavky a mohou stále obsluhovat synchronní metody akcí.

    public class HomeController : AsyncController
{

  5. Přidejte asynchronní klíčové slovo do metody Index a nastavte ho tak, aby vrátil typ Task<ActionResult>. 

    public async Task<ActionResult> Index()
{
    ...

    Poznámka:

    Asynchronní klíčové slovo je jedním z nových klíčových slov, která rozhraní .NET Framework 4.5 poskytuje. Říká kompilátoru, že tato metoda obsahuje asynchronní kód. Objekt úlohy představuje asynchronní operaci, která se může v určitém okamžiku v budoucnu dokončit.

  6. Nahraďte klienta. Volání GetAsync() s úplnou asynchronní verzí pomocí klíčového slova await, jak je znázorněno níže.

    (Fragment kódu – ASP.NET cvičení MVC 4 – Ex04 – GetAsync)

    public async Task<ActionResult> Index()
{
    var client = new HttpClient();
    var response = await client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme));
    ...

    Poznámka:

    V předchozí verzi jste použili vlastnost Result z objektu Task k blokování vlákna, dokud se výsledek nevrátí (verze synchronizace).

    Přidání klíčového slova await říká kompilátoru, aby asynchronně čekal na úlohu vrácenou z volání metody. To znamená, že zbytek kódu se spustí jako zpětné volání až po dokončení očekávané metody. Další věcí, kterou je potřeba si všimnout, je, že nemusíte měnit blok try-catch, aby to fungovalo: výjimky, ke kterým dochází na pozadí nebo v popředí, budou stále zachyceny bez další práce pomocí obslužné rutiny poskytované architekturou.

  7. Změňte kód tak, aby pokračoval v asynchronní implementaci nahrazením řádků novým kódem, jak je znázorněno níže.

    (Fragment kódu – ASP.NET cvičení MVC 4 – Ex04 – ReadAsStringAsync)

    public async Task<ActionResult> Index()
{
    var client = new HttpClient();
    var response = await client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme));
    var value = await response.Content.ReadAsStringAsync();
    var result = await JsonConvert.DeserializeObjectAsync<List<Photo>>(value);

    return View(result);
}

  8. Aplikaci spusťte. Nebudete si všimnout žádných velkých změn, ale váš kód nezablokuje vlákno z fondu vláken, což zlepší využití prostředků serveru a zlepší výkon.

    Poznámka:

    Další informace o nových asynchronních programovacích funkcích najdete v testovacím prostředí Asynchronní programování v .NET 4.5 s C# a Visual Basicem, které jsou součástí sady Visual Studio Training Kit.

Úkol 2 – Zpracování časových limitů pomocí tokenů zrušení

Asynchronní metody akcí, které vracejí instance úloh, mohou také podporovat vypršení časového limitu. V této úloze aktualizujete kód metody indexu tak, aby zpracovával scénář vypršení časového limitu pomocí tokenu zrušení.

  1. Vraťte se do sady Visual Studio a stisknutím shift + F5 zastavte ladění.

  2. Do souboru HomeController.cs přidejte následující příkaz using.

    using System.Threading;

  3. Aktualizujte akci indexu tak, aby přijímala argument CancellationToken .

    public async Task<ActionResult> Index(CancellationToken cancellationToken)
{
    ...

  4. Aktualizujte volání GetAsync tak, aby předalo token zrušení.

    (Fragment kódu – ASP.NET MVC 4 Lab – Ex04 – SendAsync se CancellationTokenem)

    public async Task<ActionResult> Index(CancellationToken cancellationToken)
{
    var client = new HttpClient();
    var response = await client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme), cancellationToken);
    var value = await response.Content.ReadAsStringAsync();
    var result = await JsonConvert.DeserializeObjectAsync<List<Photo>>(value);

    return View(result);
}

  5. Ozdobte metodu Index atributem AsyncTimeout nastaveným na 500 milisekund a atribut HandleError nakonfigurovaný tak, aby zpracovával TaskCanceledException přesměrováním do zobrazení TimedOut.

    (Fragment kódu – ASP.NET MVC 4 Lab – Ex04 – Atributy)

    [AsyncTimeout(500)]
[HandleError(ExceptionType = typeof(TimeoutException), View = "TimedOut")]
public async Task<ActionResult> Index(CancellationToken cancellationToken)
{

  6. Otevřete třídu PhotoController a aktualizujte metodu Galerie tak, aby zpozdili spuštění 1000 milisekund (1 sekunda) pro simulaci dlouhotrvající úlohy.

    public ActionResult Gallery()
{
    System.Threading.Thread.Sleep(1000);

    return this.File("~/App_Data/Photos.json", "application/json");
}

  7. Otevřete soubor Web.config a povolte vlastní chyby přidáním následujícího prvku.

    <system.web>
  <customErrors mode="On"></customErrors>
  ...

  8. Vytvořte nové zobrazení v zobrazeních\Sdílený pojmenovaný časový limit a použijte výchozí rozložení. V Průzkumník řešení klikněte pravým tlačítkem myši na složku Views\Shared a vyberte Přidat | Zobrazit.

    Použití různých zobrazení pro každé mobilní zařízení

    Použití různých zobrazení pro každé mobilní zařízení

  9. Aktualizujte obsah zobrazení časového limitu, jak je znázorněno níže.

    @{
    ViewBag.Title = "TimedOut";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Timed Out!</h2>

  10. Spusťte aplikaci a přejděte na kořenovou adresu URL. Když jste přidali Thread.Sleep 1000 milisekund, zobrazí se chyba časového limitu vygenerovaná atributem AsyncTimeout a zachytit atributem HandleError .

    Došlo k výjimce časového limitu

    Došlo k výjimce časového limitu

Poznámka:

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

Shrnutí

V tomto praktickém cvičení jste zaznamenali některé nové funkce v ASP.NET MVC 4. Probrali jsme následující koncepty:

  • Využijte vylepšení šablon projektů ASP.NET MVC, včetně nové šablony projektu mobilní aplikace.
  • Použití atributu zobrazení HTML5 a dotazů na média CSS ke zlepšení zobrazení na mobilních zařízeních
  • Použití jQuery Mobile k progresivním vylepšením a k vytváření webového uživatelského rozhraní optimalizovaného pro dotykové ovládání
  • Vytváření zobrazení specifických pro mobilní zařízení
  • Použití komponenty view-switcher k přepínání mezi mobilními a desktopovými zobrazeními v aplikaci
  • Vytváření asynchronních kontrolerů pomocí podpory úloh

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

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.

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

Stisknutím klávesy Tab vyberte zvýrazněný fragment 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í.

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.

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

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 se sadou Windows 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

    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

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

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

    Průběh instalace

    Průběh instalace

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

    Dokončená instalace

    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

    Dlaždice VS Express pro web

Příloha C: Instalace simulátoru WebMatrix 2 a iPhone

Ke spuštění webu v simulovaném zařízení iPhone můžete použít rozšíření WebMatrix "Elektrický mobilní simulátor pro iPhone". Můžete také nakonfigurovat stejné rozšíření pro spuštění simulátoru ze sady Visual Studio 2012.

Úkol 1 – instalace nástroje WebMatrix 2

  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 WebMatrix 2.

  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 nástroje WebMatrix 2

    Instalace nástroje WebMatrix 2

  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

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

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

    Průběh instalace:

    Průběh instalace

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

    Instalace byla dokončena.

    Instalace byla dokončena.

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

Úloha 2 – instalace rozšíření simulátoru iPhone

  1. Spusťte Nástroj WebMatrix a otevřete libovolný existující web nebo vytvořte nový.

  2. Na pásu karet Domů klikněte na tlačítko Spustit a vyberte Přidat nový.

    Přidání nového rozšíření WebMatrix

    Přidání nového rozšíření WebMatrix

  3. Vyberte simulátor iPhone a klikněte na Nainstalovat.

    Procházení rozšíření WebMatrix

    Procházení rozšíření WebMatrix

  4. V podrobnostech balíčku klikněte na Nainstalovat a pokračujte v instalaci rozšíření.

    Rozšíření simulátoru iPhone

    Rozšíření simulátoru iPhone

  5. Přečtěte si a přijměte prodloužení EULA.

    Rozšíření WebMatrix EULA

    Rozšíření WebMatrix EULA

  6. Nyní můžete web spustit z webMatrix pomocí možnosti Simulátor iPhone.

    Spuštění pomocí iPhonu

    Spuštění pomocí iPhonu

Úloha 3 – Konfigurace sady Visual Studio 2012 pro spuštění simulátoru iPhone

  1. Otevřete Visual Studio 2012 a otevřete libovolný web nebo vytvořte nový projekt.

  2. Klikněte na šipku dolů z tlačítka Spustit a vyberte Procházet.

    Procházet pomocí

    Procházet pomocí

  3. V dialogovém okně Procházet klikněte na Přidat.

  4. V dialogovém okně Přidat program použijte následující hodnoty:

    • Program: C:\Users*{CurrentUser}*\AppData\Local\Microsoft\WebMatrix\Extensions\20\iPhoneSimulator\ElectricMobileSim\ElectricMobileSim.exe (odpovídajícím způsobem aktualizujte cestu)

    • Argumenty: "1"

    • Popisný název: simulátor iPhone

      Přidat program

      Přidání programu pro procházení

  5. Klikněte na OK a zavřete dialogy.

  6. Teď můžete spustit webové aplikace v simulátoru iPhone ze sady Visual Studio 2012.

    Procházení pomocí simulátoru iPhonu

    Procházení pomocí simulátoru iPhonu

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

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

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

  1. Přejděte na portál pro správu Windows 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 Windows 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 webu Windows Azure Portal

    Přihlášení k portálu pro správu Windows Azure

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

    Vytvoření nového webu

    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:

    Web Windows Azure je hostitelem webové aplikace běžící v cloudu, kterou můžete řídit a spravovat. Možnost Rychlé vytvoření umožňuje nasadit dokončenou webovou aplikaci na web Windows Azure mimo portál. Nezahrnuje kroky pro nastavení databáze.

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

    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

    Přechod na nový web

    Spuštěný 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

    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 na web Windows 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í na weby Windows Azure.

    Stažení profilu publikování webu

    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 na weby Windows Azure ze sady Visual Studio.

    Uložení souboru profilu publikování

    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 Windows Azure na řídicím panelu serveru sql Databases | Servers | . 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

    Ří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 add-client-ip-address-ok-button tlačítko.

    Přidání IP adresy klienta

    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

    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í aplikace

    Publikování webu

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

    Import profilu publikování

    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í

    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

    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

      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

    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

    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

    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 Windows Azure

    Aplikace publikovaná do Windows Azure