Sdílet prostřednictvím


ASP.NET MVC 4 – základy

Autor: Web Camp Team

Stáhnout Web Camp Training Kit

Tato praktická cvičení je založená na hudebním úložišti MVC (Model View Controller), což je výukové aplikace, která představuje a vysvětluje podrobné postupy použití ASP.NET MVC a sady Visual Studio. V celém cvičení se naučíte jednoduchost, ale sílu používání těchto technologií společně. Začnete jednoduchou aplikací a sestavíte ji, dokud nebudete mít plně funkční ASP.NET webové aplikace MVC 4.

Toto cvičení funguje s ASP.NET MVC 4.

Pokud chcete prozkoumat ASP.NET verzi výukové aplikace MVC 3, najdete ji v MVC-Music-Store.

V tomto praktickém cvičení se předpokládá, že vývojář má zkušenosti s vývojovými technologiemi webu, jako je HTML a JavaScript.

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 na ASP.NET MVC 4 Fundamentals.

Aplikace Music Store

Webová aplikace Music Store, která bude vytvořena v rámci tohoto cvičení, se skládá ze tří hlavních částí: nakupování, pokladna a správa. Návštěvníci budou moct procházet alba podle žánru, přidat alba do košíku, zkontrolovat výběr a nakonec přejít k pokladně a přihlásit se a dokončit objednávku. Správci obchodu navíc budou moct spravovat dostupná alba i jejich hlavní vlastnosti.

Obrazovky Obchodu s hudbou

Obrazovky Obchodu s hudbou

ASP.NET MVC 4 Essentials

Aplikace Music Store bude sestavena pomocí kontroleru zobrazení modelu (MVC) – architektonického vzoru, který odděluje aplikaci do tří hlavních komponent:

  • Modely: Objekty modelu jsou části aplikace, které implementují logiku domény. Objekty modelu také často načítají a ukládají stav modelu v databázi.
  • Zobrazení: Zobrazení jsou komponenty, které zobrazují uživatelské rozhraní aplikace. Toto uživatelské rozhraní se obvykle vytváří z dat modelu. Příkladem je zobrazení pro úpravy alb, které zobrazuje textová pole a rozevírací seznam založený na aktuálním stavu objektu Album.
  • Kontrolery: Kontrolery jsou komponenty, které zpracovávají interakci uživatelů, manipulují s modelem a nakonec vyberou zobrazení pro vykreslení uživatelského rozhraní. V aplikaci MVC se v zobrazení zobrazují pouze informace; kontroler zpracovává uživatelský vstup a interakci a reaguje na ně.

Model MVC pomáhá vytvářet aplikace, které oddělují různé aspekty aplikace (logiku vstupu, obchodní logiku a logiku uživatelského rozhraní) a současně poskytují volné spojení mezi těmito prvky. Toto oddělení pomáhá při vytváření aplikace spravovat složitost, protože umožňuje soustředit se na jeden aspekt implementace najednou. Kromě toho model MVC usnadňuje testování aplikací, což také podporuje použití vývoje řízeného testy (TDD) pro vytváření aplikací.

Architektura ASP.NET MVC poskytuje alternativu k vzoru webových formulářů ASP.NET pro vytváření webových aplikací založených na ASP.NET MVC. Architektura ASP.NET MVC je odlehčená a vysoce testovatelná prezentační architektura, která (stejně jako u webových formulářů) je integrovaná se stávajícími funkcemi ASP.NET, jako jsou stránky předlohy a ověřování založené na členství, takže získáte veškerou sílu základní architektury .NET. To je užitečné, pokud už znáte ASP.NET webových formulářů, protože všechny knihovny, které už používáte, jsou k dispozici i v ASP.NET MVC 4.

Kromě toho volné spojení mezi třemi hlavními komponentami aplikace MVC také podporuje paralelní vývoj. Jeden vývojář může například pracovat na zobrazení, druhý vývojář může pracovat na logice kontroleru a třetí vývojář se může zaměřit na obchodní logiku v modelu.

Cíle

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

  • Vytvoření zcela nové aplikace ASP.NET MVC na základě kurzu aplikace Music Store
  • Přidání kontrolerů pro zpracování adres URL na domovskou stránku webu a pro procházení jeho hlavních funkcí
  • Přidání zobrazení pro přizpůsobení obsahu zobrazeného spolu s jeho stylem
  • Přidání tříd modelu, které budou obsahovat a spravovat data a logiku domény
  • Použití modelu zobrazení k předávání informací z akcí kontroleru do šablon zobrazení
  • Prozkoumání nové šablony ASP.NET MVC 4 pro internetové aplikace

Požadavky

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

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 C: Použití fragmentů kódu".

Cvičení

Toto praktické cvičení se skládá z následujících cvičení:

  1. Cvičení 1: Vytvoření projektu webové aplikace MusicStore ASP.NET MVC
  2. Cvičení 2: Vytvoření kontroleru
  3. Cvičení 3: Předání parametrů kontroleru
  4. Cvičení 4: Vytvoření zobrazení
  5. Cvičení 5: Vytvoření modelu zobrazení
  6. Cvičení 6: Použití parametrů v zobrazení
  7. Cvičení 7: Kolo kolem ASP.NET MVC 4 Nová šablona

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í projektu webové aplikace MusicStore ASP.NET MVC

V tomto cvičení se naučíte vytvořit aplikaci ASP.NET MVC v sadě Visual Studio 2012 Express pro web i její hlavní organizaci složek. Kromě toho se dozvíte, jak přidat nový kontroler a nastavit ho jako jednoduchý řetězec na domovské stránce aplikace.

Úkol 1 – vytvoření projektu webové aplikace ASP.NET MVC

  1. V této úloze vytvoříte prázdný projekt aplikace ASP.NET MVC pomocí šablony sady Visual Studio MVC. Spusťte VS Express pro web.

  2. V nabídce Soubor klepněte na tlačítko Nový projekt.

  3. V dialogovém okně Nový projekt vyberte typ projektu webové aplikace ASP.NET MVC 4, který se nachází v seznamu webových šablon visual C#.

  4. Změňte název na MvcMusicStore.

  5. Nastavte umístění řešení uvnitř nové složky Begin ve zdrojové složce tohoto cvičení, například [YOUR-HOL-PATH]\Source\Ex01-CreatingMusicStoreProject\Begin. Klikněte na OK.

    Dialogové okno Vytvořit nový projekt

    Dialogové okno Vytvořit nový projekt

  6. V dialogovém okně Nový ASP.NET projektu MVC 4 vyberte základní šablonu a ujistěte se, že je vybraný modul Zobrazení Razor. Klikněte na OK.

    Dialogové okno Nový ASP.NET projektu MVC 4

    Dialogové okno Nový ASP.NET projektu MVC 4

Úkol 2 – Zkoumání struktury řešení

Architektura ASP.NET MVC obsahuje šablonu projektu sady Visual Studio, která pomáhá vytvářet webové aplikace podporující vzor MVC. Tato šablona vytvoří novou webovou aplikaci ASP.NET MVC s požadovanými složkami, šablonami položek a položkami konfiguračního souboru.

V této úloze prozkoumáte strukturu řešení, abyste porozuměli prvkům, které jsou součástí, a jejich vztahům. Následující složky jsou součástí všech aplikací ASP.NET MVC, protože architektura ASP.NET MVC ve výchozím nastavení používá přístup konvence nad konfigurací a provádí některé výchozí předpoklady založené na konvencích vytváření názvů složek.

  1. Po vytvoření projektu zkontrolujte strukturu složek, která byla vytvořena v Průzkumník řešení na pravé straně:

    ASP.NET strukturu složek MVC v Průzkumník řešení

    ASP.NET strukturu složek MVC v Průzkumník řešení

    1. Kontrolery. Tato složka bude obsahovat třídy kontroleru. V aplikaci založené na MVC jsou kontrolery zodpovědné za zpracování interakce koncových uživatelů, manipulaci s modelem a nakonec zvolení zobrazení pro vykreslení uživatelského rozhraní.

      Poznámka:

      Architektura MVC vyžaduje, aby názvy všech kontrolerů končily na "Controller", například HomeController, LoginController nebo ProductController.

    2. Modely. Tato složka je poskytována pro třídy, které představují aplikační model pro webovou aplikaci MVC. To obvykle zahrnuje kód, který definuje objekty a logiku pro interakci s úložištěm dat. Objekty skutečného modelu se obvykle budou nacházet v samostatných knihovnách tříd. Při vytváření nové aplikace však můžete zahrnout třídy a pak je přesunout do samostatných knihoven tříd v pozdějším bodě vývojového cyklu.

    3. Zobrazení. Tato složka je doporučeným umístěním pro zobrazení, komponenty zodpovědné za zobrazení uživatelského rozhraní aplikace. Zobrazení používají soubory .aspx, .ascx, .cshtml a .master, kromě jiných souborů, které souvisejí s zobrazeními vykreslování. Složka Zobrazení obsahuje složku pro každý kontroler; složka má název s předponou controller-name. Pokud máte například řadič s názvem HomeController, složka Views bude obsahovat složku s názvem Domů. Když rozhraní ASP.NET MVC načte zobrazení, ve výchozím nastavení hledá soubor .aspx s požadovaným názvem zobrazení ve složce Views\controllerName (Views[ControllerName][Action].aspx) nebo (Views[ControllerName][Action].cshtml) pro zobrazení Razor.

      Poznámka:

      Kromě dříve uvedených složek používá webová aplikace MVC soubor Global.asax k nastavení výchozích globálních směrování adres URL a ke konfiguraci aplikace používá soubor Web.config .

Úkol 3 – přidání HomeControlleru

V ASP.NET aplikacích, které nepoužívají architekturu MVC, je interakce uživatelů uspořádaná kolem stránek a kolem vyvolávání a zpracování událostí z těchto stránek. Naproti tomu interakce uživatelů s ASP.NET aplikacemi MVC je uspořádaná kolem kontrolerů a jejich metod akcí.

Na druhou stranu ASP.NET rozhraní MVC mapuje adresy URL na třídy, které se označují jako kontrolery. Kontrolery zpracovávají příchozí požadavky, zpracovávají uživatelský vstup a interakce, provádějí odpovídající logiku aplikace a určují odpověď, která se má odeslat zpět klientovi (zobrazení HTML, stažení souboru, přesměrování na jinou adresu URL atd.). V případě zobrazení HTML třída kontroleru obvykle volá samostatnou komponentu zobrazení pro generování kódu HTML pro požadavek. V aplikaci MVC se v zobrazení zobrazují pouze informace; kontroler zpracovává uživatelský vstup a interakci a reaguje na ně.

V této úloze přidáte třídu Kontroleru, která bude zpracovávat adresy URL na domovskou stránku webu Music Store.

  1. Klikněte pravým tlačítkem myši na složku Kontrolery v rámci Průzkumník řešení, vyberte Příkaz Přidat a potom Kontroler:

    Přidání příkazu kontroleru

    Příkaz Přidat kontroler

  2. Zobrazí se dialogové okno Přidat kontroler . Pojmenujte kontroler HomeController a stiskněte Přidat.

    Snímek obrazovky s dialogovým oknem Přidat kontroler s dostupnými možnostmi pro vytvoření kontroleru

    Dialogové okno Přidat kontroler

  3. Soubor HomeController.cs se vytvoří ve složce Kontrolery . Pokud chcete, aby HomeController vrátil řetězec pro akci Index, nahraďte metodu Index následujícím kódem:

    (Fragment kódu – ASP.NET MVC 4 Fundamentals – Ex1 HomeController Index)

    public string Index()
    {
        return "Hello from Home";
    }
    

Úkol 4 – spuštění aplikace

V této úloze si aplikaci vyzkoušíte ve webovém prohlížeči.

  1. Stisknutím klávesy F5 spusťte aplikaci. Projekt je zkompilován a spustí se místní webový server iis. Místní webový server iis automaticky otevře webový prohlížeč odkazující na adresu URL webového serveru.

    Aplikace spuštěná ve webovém prohlížeči

    Aplikace spuštěná ve webovém prohlížeči

    Poznámka:

    Místní webový server služby IIS spustí web na náhodném bezplatném čísle portu. Na obrázku výše je web spuštěný http://localhost:50103/, takže používá port 50103. Číslo portu se může lišit.

  2. Zavřete prohlížeč.

Cvičení 2: Vytvoření kontroleru

V tomto cvičení se dozvíte, jak aktualizovat kontroler tak, aby implementovaly jednoduché funkce aplikace Music Store. Tento kontroler definuje metody akcí pro zpracování jednotlivých následujících konkrétních požadavků:

  • Stránka výpisu hudebních žánrů v Hudebním obchodě
  • Stránka pro procházení se seznamem všech hudebních alb pro určitý žánr
  • Stránka s podrobnostmi, která zobrazuje informace o konkrétním hudebním albu

V rámci tohoto cvičení tyto akce teď jednoduše vrátí řetězec.

Úkol 1 – přidání nové třídy StoreController

V této úloze přidáte nový kontroler.

  1. Pokud ještě není otevřený, spusťte VS Express pro Web 2012.

  2. V nabídce Soubor zvolte Otevřít projekt. V dialogovém okně Otevřít projekt přejděte na Zdroj\Ex02-CreatingAController\Begin, vyberte Begin.sln a klikněte na Otevřít. Alternativně můžete pokračovat s řešením, které jste získali po dokončení 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. Přidejte nový kontroler. Uděláte to tak, že kliknete pravým tlačítkem myši na složku Kontrolery v Průzkumník řešení, vyberete Přidat a potom příkaz Kontroler. Změňte název kontroleru na StoreController a klepněte na tlačítko Přidat.

    Snímek obrazovky s dialogovým oknem Přidat kontroler s pruhem pro zadání názvu kontroleru a možnosti pro výběr možností generování uživatelského rozhraní

    Dialogové okno Přidat kontroler

Úkol 2 – úprava akcí StoreControlleru

V této úloze upravíte metody kontroleru, které se nazývají akce. Akce zodpovídají za zpracování požadavků na adresy URL a určení obsahu, který by se měl odeslat zpět do prohlížeče nebo uživatele, který adresu URL vyvolal.

  1. StoreController třída již má Index metoda. Později ho použijete v tomto cvičení k implementaci stránky se seznamem všech žánrů hudebního obchodu. Prozatím nahraďte metodu Index následujícím kódem, který vrátí řetězec "Hello from Store.Index()":

    (Fragment kódu – ASP.NET základy MVC 4 – Index Ex2 StoreController)

    public string Index()
    {
      return "Hello from Store.Index()";
    }
    
  2. Přidejte metody Procházet a Podrobnosti . Uděláte to tak, že do StorControlleru přidáte následující kód:

    (Fragment kódu – ASP.NET základy MVC 4 – Ex2 StoreController BrowseAndDetails)

    // GET: /Store/Browse
    public string Browse()
    {
      return "Hello from Store.Browse()";
    }
    
    // GET: /Store/Details  
    public string Details()
    {
      return "Hello from Store.Details()";
    }
    

Úkol 3 – spuštění aplikace

V této úloze si aplikaci vyzkoušíte ve webovém prohlížeči.

  1. Stisknutím klávesy F5 spusťte aplikaci.

  2. Projekt začíná na domovské stránce. Změňte adresu URL a ověřte implementaci jednotlivých akcí.

    1. /Store. Zobrazí se zpráva "Hello from Store.Index()".

    2. /Store/Browse. Zobrazí se zpráva "Hello from Store.Browse()".

    3. /Store/Details. Zobrazí se zpráva "Hello from Store.Details()".

      Procházení StorBrowse

      Procházení /Store/Procházet

  3. Zavřete prohlížeč.

Cvičení 3: Předání parametrů kontroleru

Doteď jste vraceli konstantní řetězce z kontrolerů. V tomto cvičení se dozvíte, jak předat kontroleru parametry pomocí adresy URL a řetězce dotazu a pak provádět akce metody reagovat textem do prohlížeče.

Úkol 1 – přidání parametru žánru do StorControlleru

V této úloze použijete řetězec dotazu k odeslání parametrů do metody akce Browse v StoreController.

  1. Pokud ještě není otevřený, spusťte VS Express pro web.

  2. V nabídce Soubor zvolte Otevřít projekt. V dialogovém okně Otevřít projekt přejděte na Source\Ex03-PassingParametersToAController\Begin, vyberte Begin.sln a klikněte na Otevřít. Alternativně můžete pokračovat s řešením, které jste získali po dokončení 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 StoreController – třída. Uděláte to tak, že v Průzkumník řešení rozbalíte složku Kontrolery a poklikejte na StoreController.cs.

  4. Změňte metodu Browse a přidejte parametr řetězce pro požadavek na určitý žánr. ASP.NET MVC automaticky předá do této metody akce při vyvolání všechny parametry řetězce dotazu nebo po odeslání formuláře. Uděláte to tak, že nahradíte metodu Browse následujícím kódem:

    (Fragment kódu – ASP.NET MVC 4 – Základy – Ex3 StoreController BrowseMethod)

    // GET: /Store/Browse?genre=Disco   
    public string Browse(string genre)
    {
      string message = HttpUtility.HtmlEncode("Store.Browse, Genre = " + genre);
    
      return message;
    }
    

Poznámka:

Používáte metodu nástroje HttpUtility.HtmlEncode, abyste uživatelům zabránili v vkládání JavaScriptu do zobrazení s odkazem, jako je /Store/Browse? Žánr=<script>window.location='http://hackersite.com</script>.

Další vysvětlení najdete v tomto článku na webu Msdn.

Úkol 2 – spuštění aplikace

V této úloze vyzkoušíte aplikaci ve webovém prohlížeči a použijete parametr žánru.

  1. Stisknutím klávesy F5 spusťte aplikaci.

  2. Projekt začíná na domovské stránce. Chcete změnit adresu URL na /Store/Procházet? Žánr=Disco k ověření, že akce obdrží parametr žánru.

    Procházení ObchoduBrowseGenre=Disco

    Procházení /Store/Procházet? Žánr=Disco

  3. Zavřete prohlížeč.

Úkol 3 – Přidání parametru ID vloženého do adresy URL

V této úloze použijete adresu URL k předání parametru ID metodě akce Details StoreController. ASP.NET výchozí konvence směrování MVC je považovat segment adresy URL za názvem metody akce jako parametr s názvem ID. Pokud má vaše metoda akce parametr s názvem ID, ASP.NET MVC vám automaticky předá segment adresy URL jako parametr. V úložišti ADRES URL/ Podrobnosti/5 se ID interpretuje jako 5.

  1. Změňte metodu Details StoreController a přidejte int parametr s názvem ID. Chcete-li to provést, nahraďte metodu Details následujícím kódem:

    (Fragment kódu – ASP.NET MVC 4 Fundamentals – Ex3 StoreController DetailsMethod)

    // GET: /Store/Details/5    
    public string Details(int id)
    {
      string message = "Store.Details, ID = " + id;
    
      return message;
    }
    

Úkol 4 – spuštění aplikace

V této úloze vyzkoušíte aplikaci ve webovém prohlížeči a použijete parametr ID .

  1. Stisknutím klávesy F5 spusťte aplikaci.

  2. Projekt začíná na domovské stránce. Změňte adresu URL na /Store/Details/5 a ověřte, že akce obdrží parametr ID.

    Procházení StoreDetails5

    Procházení /Store/Podrobnosti/5

Cvičení 4: Vytvoření zobrazení

Zatím jste vraceli řetězce z akcí kontroleru. I když je to užitečný způsob, jak porozumět tomu, jak řadiče fungují, není to způsob, jakým se vytvářejí skutečné webové aplikace. Zobrazení jsou komponenty, které poskytují lepší přístup pro generování HTML zpět do prohlížeče pomocí souborů šablon.

V tomto cvičení se dozvíte, jak přidat stránku předlohy rozložení pro nastavení šablony pro běžný obsah HTML, šablonu stylů, která vylepšuje vzhled a chování webu, a nakonec šablonu zobrazení, která umožní HomeController vrátit HTML.

Úloha 1 – úprava souboru _layout.cshtml

Soubor ~/Views/Shared/_layout.cshtml umožňuje nastavit šablonu pro běžné html pro použití na celém webu. V této úloze přidáte stránku předlohy rozložení se společným záhlavím s odkazy na domovskou stránku a oblast Store.

  1. Pokud ještě není otevřený, spusťte VS Express pro web.

  2. V nabídce Soubor zvolte Otevřít projekt. V dialogovém okně Otevřít projekt přejděte na Zdroj\Ex04-CreatingAView\Begin, vyberte Begin.sln a klikněte na Otevřít. Alternativně můžete pokračovat s řešením, které jste získali po dokončení 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. Soubor _layout.cshtml obsahuje rozložení kontejneru HTML pro všechny stránky na webu. Obsahuje html element pro odpověď HTML, stejně jako< head> a< body> elementy.<> @RenderBody() v těle HTML identifikují oblasti, které budou moct šablony zobrazit, vyplnit dynamickým obsahem. (C#)

    <!DOCTYPE html>
    <html>
    <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width" />
         <title>@ViewBag.Title</title>
         @Styles.Render("~/Content/css")
         @Scripts.Render("~/bundles/modernizr")
    </head>
    <body>
         @RenderBody()
    
         @Scripts.Render("~/bundles/jquery")
         @RenderSection("scripts", required: false)
    </body>
    </html>
    
  4. Přidejte společné záhlaví s odkazy na domovskou stránku a oblast Store na všech stránkách webu. Chcete-li to provést, přidejte následující kód pod <základní> příkaz. (C#)

    <!DOCTYPE html>
    <html>
    <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width" />
         <title>@ViewBag.Title</title>
         @Styles.Render("~/Content/css")
         @Scripts.Render("~/bundles/modernizr")
    </head>
    <body>
         <header>
              <div class="content-wrapper">
                    <div class="float-left">
                         <p class="site-title">@Html.ActionLink("ASP.NET MVC Music Store", "Index", "Home")</p>
                    </div>
                    <div class="float-right">
                         <nav>
                              <ul id="menu">
                                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                                    <li>@Html.ActionLink("Store", "Index", "Store")</li>
                              </ul>
                         </nav>
                    </div>
              </div>
         </header>
         @RenderBody()
    
         @Scripts.Render("~/bundles/jquery")
         @RenderSection("scripts", required: false)
    </body>
    </html>
    
  5. Zahrňte div pro vykreslení základního oddílu každé stránky. Nahraďte @RenderBody() následujícím zvýrazněným kódem: (C#)

    ...
    <body>
         <header>
              <div class="content-wrapper">
                    <div class="float-left">
                         <p class="site-title">@Html.ActionLink("ASP.NET MVC Music Store", "Index", "Home")</p>
                    </div>
                    <div class="float-right">
                         <nav>
                              <ul id="menu">
                                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                                    <li>@Html.ActionLink("Store", "Index", "Store")</li>
                              </ul>
                         </nav>
                    </div>
              </div>
         </header>
         <div id="body">
              @RenderSection("featured", required: false)
              <section class="content-wrapper main-content clear-fix">
                    @RenderBody()
              </section>
         </div>
         ...
    </body>
    </html>
    

    Poznámka:

    Věděli jste? Visual Studio 2012 obsahuje fragmenty kódu, které usnadňují přidávání běžně používaného kódu v HTML, souborech kódu a dalších! Vyzkoušejte to tak, že zadáte div> a dvakrát stisknete klávesu TAB a vložíte úplnou značku div.<

Úkol 2 – přidání šablon stylů CSS

Prázdná šablona projektu obsahuje velmi zjednodušený soubor CSS, který obsahuje jenom styly používané k zobrazení základních formulářů a ověřovacích zpráv. K vylepšení vzhledu a chování webu použijete další šablony stylů CSS a obrázky (potenciálně poskytované návrhářem).

V tomto úkolu přidáte šablonu stylů CSS, která definuje styly webu.

  1. Soubor CSS a obrázky jsou součástí složky Source\Assets\Content v tomto cvičení. Pokud je chcete přidat do aplikace, přetáhněte jejich obsah z okna Průzkumníka Windows do Průzkumník řešení v sadě Visual Studio Express pro web, jak je znázorněno níže:

    Přetažení obsahu stylu

    Přetažení obsahu stylu

  2. Zobrazí se dialogové okno upozornění s žádostí o potvrzení nahrazení Site.css souboru a některých existujících obrázků. Zaškrtněte políčko Použít u všech položek a klikněte na tlačítko Ano.

Úkol 3 – přidání šablony zobrazení

V této úloze přidáte šablonu zobrazení pro vygenerování odpovědi HTML, která bude používat stránku předlohy rozložení a šablony stylů CSS přidané v tomto cvičení.

  1. Chcete-li použít šablonu View při procházení domovské stránky webu, budete nejprve muset označit, že místo vrácení řetězce, HomeController Index metoda vrátí View. Otevřete HomeController třída a změňte jeho Index metoda vrátit ActionResult a mít vrátit View().

    (Fragment kódu – ASP.NET MVC 4 Fundamentals – Ex4 HomeController Index)

    public class HomeController : Controller
    {
        //
        // GET: /Home/
    
        public ActionResult Index()
        {
            return this.View();
        }
    }
    
  2. Teď musíte přidat příslušnou šablonu zobrazení. Uděláte to tak, že kliknete pravým tlačítkem myši do metody akce Index a vyberete Přidat zobrazení. Tím se zobrazí dialogové okno Přidat zobrazení .

    Přidání zobrazení z metody Index

    Přidání zobrazení z metody Index

  3. Zobrazí se dialogové okno Přidat zobrazení pro vygenerování souboru šablony Zobrazení. Ve výchozím nastavení toto dialogové okno předem naplní název šablony View tak, aby odpovídal metodě akce, která ji použije. Vzhledem k tomu, že jste použili místní nabídku Přidat zobrazení v rámci metody akce Index v HomeController, má dialogové okno Přidat zobrazení index jako výchozí název zobrazení. Klikněte na tlačítko Přidat.

    Snímek obrazovky s dialogovým oknem Přidat zobrazení Zobrazí se dialogové okno s konkrétními možnostmi pro přidání šablony zobrazení.

    Dialogové okno Přidat zobrazení

  4. Visual Studio vygeneruje šablonu zobrazení Index.cshtml uvnitř složky Views\Home a pak ji otevře.

    Zobrazení domovského indexu vytvořené

    Zobrazení domovského indexu vytvořené

    Poznámka:

    název a umístění souboru Index.cshtml je relevantní a dodržuje výchozí ASP.NET zásady vytváření názvů MVC.

    Složka \Views*Home* odpovídá názvu kontroleru (Home Controller). Název šablony Zobrazení (Index) odpovídá metodě akce kontroleru, která zobrazí zobrazení.

    Díky tomu ASP.NET MVC nemusíte při použití této zásady vytváření názvů explicitně zadávat název nebo umístění šablony zobrazení.

  5. Vygenerovaná šablona zobrazení je založena na dříve definované šabloně _layout.cshtml . Aktualizujte vlastnost ViewBag.Title na Home a změňte hlavní obsah na Toto je domovská stránka, jak je znázorněno v kódu níže:

    @{
        ViewBag.Title = "Home";
    }
    
    <h2>This is the Home Page</h2>
    
  6. V Průzkumník řešení vyberte projekt MvcMusicStore a stisknutím klávesy F5 spusťte aplikaci.

Úkol 4: Ověření

Pokud chcete ověřit, že jste správně provedli všechny kroky v předchozím cvičení, pokračujte následujícím způsobem:

Při otevření aplikace v prohlížeči byste měli mít na paměti, že:

  1. Metoda akce indexu HomeController našla a zobrazila šablonu \Views\Home\Index.cshtml View, i když kód s názvem return View(), protože šablona View dodržovala standardní zásady vytváření názvů.

  2. Domovská stránka zobrazí uvítací zprávu definovanou v šabloně zobrazení \Views\Home\Index.cshtml .

  3. Domovská stránka používá šablonu _layout.cshtml , takže uvítací zpráva je obsažena ve standardním rozložení HTML webu.

    Zobrazení indexu domů s použitím definované stránky LayoutPage a stylu

    Zobrazení indexu domů s použitím definované stránky LayoutPage a stylu

Cvičení 5: Vytvoření modelu zobrazení

Zatím jste vytvořili pevně zakódované HTML zobrazení zobrazení, ale aby bylo možné vytvářet dynamické webové aplikace, šablona Zobrazení by měla přijímat informace z kontroleru. Jednou z běžných technik, která se má použít pro tento účel, je model ViewModel , který umožňuje kontroleru zabalit všechny informace potřebné k vygenerování příslušné odpovědi HTML.

V tomto cvičení se dozvíte, jak vytvořit třídu ViewModel a přidat požadované vlastnosti: počet žánrů v obchodě a seznam těchto žánrů. Aktualizujete také StoreController tak, aby používal vytvořený model ViewModel, a nakonec vytvoříte novou šablonu zobrazení, která zobrazí uvedené vlastnosti na stránce.

Úkol 1 – vytvoření třídy ViewModel

V této úloze vytvoříte třídu ViewModel, která bude implementovat scénář výpisu žánru Store.

  1. Pokud ještě není otevřený, spusťte VS Express pro web.

  2. V nabídce Soubor zvolte Otevřít projekt. V dialogovém okně Otevřít projekt přejděte na Source\Ex05-CreatingAViewModel\Begin, vyberte Begin.sln a klikněte na Otevřít. Alternativně můžete pokračovat s řešením, které jste získali po dokončení 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. Vytvořte složku ViewModels pro uložení modelu ViewModel. Uděláte to tak, že kliknete pravým tlačítkem na projekt MvcMusicStore nejvyšší úrovně, vyberete Přidat a potom Novou složku.

    Přidání nové složky

    Přidání nové složky

  4. Pojmenujte složku ViewModels.

    Složka ViewModels v Průzkumník řešení

    Složka ViewModels v Průzkumník řešení

  5. Vytvořte třídu ViewModel . Uděláte to tak, že kliknete pravým tlačítkem myši na nedávno vytvořenou složku ViewModels, vyberete Přidat a potom Novou položku. V části Kód zvolte položku Třídy a pojmenujte soubor StoreIndexViewModel.cs a klikněte na tlačítko Přidat.

    Přidání nové třídy

    Přidání nové třídy

    Vytváření StoreIndexViewModel – třída

    Vytváření StoreIndexViewModel – třída

Úkol 2 – přidání vlastností do třídy ViewModel

Aby bylo možné vygenerovat očekávanou odpověď HTML, jsou předány ze StorControlleru do šablony Zobrazení dva parametry: počet žánrů v úložišti a seznam těchto žánrů.

V této úloze přidáte tyto 2 vlastnosti do Třídy StoreIndexViewModel : NumberOfGenres (celé číslo) a Žánry (seznam řetězců).

  1. Přidejte Vlastnosti NumberOfGenres a Žánrs do třídy StoreIndexViewModel . Uděláte to tak, že do definice třídy přidáte následující 2 řádky:

    (Fragment kódu – ASP.NET MVC 4 Fundamentals – Ex5 StoreIndexViewModel – vlastnosti)

    public class StoreIndexViewModel
    {
        public int NumberOfGenres { get; set; }
    
        public List<string> Genres { get; set; }
    }
    

Poznámka:

Zápis { get; set; } využívá funkci automaticky implementovaných vlastností jazyka C#. Poskytuje výhody vlastnosti bez nutnosti deklarovat záložní pole.

Úloha 3 – aktualizace StoreController pro použití StoreIndexViewModel

StoreIndexViewModel třída zapouzdřuje informace potřebné k předání z Metody Index StoreController do šablony View za účelem vygenerování odpovědi.

V této úloze aktualizujete StoreController tak, aby používal StoreIndexViewModel.

  1. Otevřete StoreController – třída.

    Otevření třídy StoreController

    Otevření třídy StoreController

  2. Chcete-li použít StoreIndexViewModel třídy z StoreController, přidejte následující obor názvů v horní části kódu StoreController :

    (Fragment kódu – ASP.NET MVC 4 Fundamentals – Ex5 StoreIndexViewModel using ViewModel)

    using MvcMusicStore.ViewModels;
    
  3. Změňte metodu akce Index StoreController tak, aby vytvořila a naplní StoreIndexViewModel objektu a pak ji předá šabloně View, aby vygenerovala odpověď HTML s ním.

    Poznámka:

    V testovacím prostředí "ASP.NET MVC Models and Data Access" napíšete kód, který načte seznam žánrů úložiště z databáze. V následujícím kódu vytvoříte seznam fiktivních datových žánrů, které naplní StoreIndexViewModel.

    Po vytvoření a nastavení StoreIndexViewModel objektu se předá jako argument metodě View . To znamená, že šablona Zobrazení použije tento objekt k vygenerování odpovědi HTML s ním.

  4. Nahraďte metodu Index následujícím kódem:

    (Fragment kódu – ASP.NET MVC 4 – Metoda Index Ex5 StoreController)

    public ActionResult Index()
    {
        // Create a list of genres
        var genres = new List<string> {"Rock", "Jazz", "Country", "Pop", "Disco"};
    
        // Create our view model
        var viewModel = new StoreIndexViewModel { 
            NumberOfGenres = genres.Count(),
            Genres = genres
        };
    
        return this.View(viewModel);
    }
    

Poznámka:

Pokud neznáte jazyk C#, můžete předpokládat, že použití proměnné var znamená, že proměnná viewModel je zpožděná. To není správné – kompilátor jazyka C# používá odvození typu na základě toho, co přiřadíte proměnné k určení, že viewModel je typu StoreIndexViewModel. Také kompilováním místní proměnné viewModel jako typu StoreIndexViewModel získáte kontrolu času kompilace a podporu editoru kódu sady Visual Studio.

Úloha 4 – vytvoření šablony zobrazení, která používá StoreIndexViewModel

V této úloze vytvoříte šablonu Zobrazení, která bude používat StoreIndexViewModel objekt předaný z Controller k zobrazení seznamu žánrů.

  1. Před vytvořením nové šablony Zobrazení sestavíme projekt tak, aby dialogové okno Přidat zobrazení vědělo o StoreIndexViewModel třídy. Sestavte projekt tak , že vyberete položku nabídky Sestavení a potom Build MvcMusicStore.

    Sestavení projektu

    Sestavení projektu

  2. Vytvořte novou šablonu zobrazení. Uděláte to tak, že kliknete pravým tlačítkem myši do metody Index a vyberete Přidat zobrazení.

    Přidání zobrazení

    Přidání zobrazení

  3. Protože dialogové okno Přidat zobrazení bylo vyvoláno z StoreController, přidá šablonu Zobrazení ve výchozím nastavení do souboru \Views\Store\Index.cshtml . Zaškrtněte políčko Vytvořit zobrazení silného typu a pak jako třídu Model vyberte StoreIndexViewModel. Také se ujistěte, že je vybraný modul View Razor. Klikněte na tlačítko Přidat.

    Snímek obrazovky s dialogovým oknem Přidat zobrazení s dostupnými možnostmi a výběrem pro vytvoření třídy modelu se silnými typy

    Dialogové okno Přidat zobrazení

    Soubor šablony zobrazení \Views\Store\Index.cshtml je vytvořen a otevřen. Na základě informací zadaných v dialogovém okně Přidat zobrazení v posledním kroku očekává šablona View instanci StoreIndexViewModel jako data, která se mají použít k vygenerování odpovědi HTML. Všimněte si, že šablona dědí ViewPage<musicstore.viewmodels.storeindexviewmodel> v jazyce C#.

Úkol 5 – aktualizace šablony zobrazení

V tomto úkolu aktualizujete šablonu Zobrazení vytvořenou v posledním úkolu, aby se načetl počet žánrů a jejich názvy na stránce.

Poznámka:

K provedení kódu v šabloně View použijete syntaxi @ (často označovanou jako "kód nuggets").

  1. V souboru Index.cshtml ve složce Store nahraďte jeho kód následujícím kódem:
@model MvcMusicStore.ViewModels.StoreIndexViewModel

@{
    ViewBag.Title = "Browse Genres";
}

<h2>Browse Genres</h2>

<p>Select from @Model.NumberOfGenres genres</p>
  1. Promyčte seznam žánrů v StoreIndexViewModel a vytvořte seznam UL> HTML <pomocí smyčky foreach. (C#)
@model MvcMusicStore.ViewModels.StoreIndexViewModel

@{
    ViewBag.Title = "Browse Genres";
}

<h2>Browse Genres</h2>

<p>Select from @Model.NumberOfGenres genres</p>

<ul>
@foreach (string genreName in Model.Genres)
{
    <li>
        @genreName
    </li>
}
</ul>
  1. Stisknutím klávesy F5 spusťte aplikaci a procházejte /Store. Zobrazí se seznam žánrů předaných v StoreIndexViewModel objektu z StoreController do šablony View.

Zobrazení zobrazení seznamu žánrů

Zobrazení zobrazení seznamu žánrů

  1. Zavřete prohlížeč.

Cvičení 6: Použití parametrů v zobrazení

Ve cvičení 3 jste zjistili, jak předat parametry kontroleru. V tomto cvičení se naučíte používat tyto parametry v šabloně Zobrazení. Za tímto účelem se nejprve seznámíte s třídami modelu, které vám pomůžou spravovat data a logiku domény. Kromě toho se dozvíte, jak vytvářet odkazy na stránky uvnitř aplikace ASP.NET MVC, aniž byste se museli starat o věci, jako je kódování cest URL.

Úkol 1 – přidání tříd modelů

Na rozdíl od modelů ViewModel, které jsou vytvořeny pouze pro předávání informací z kontroleru do zobrazení, model třídy jsou sestaveny tak, aby obsahovaly a spravují data a logiku domény. V této úloze přidáte dvě třídy modelu, které představují tyto koncepty: Žánr a Album.

  1. Pokud ještě není otevřený, spusťte VS Express pro web.

  2. V nabídce Soubor zvolte Otevřít projekt. V dialogovém okně Otevřít projekt přejděte na Source\Ex06-UsingParametersInView\Begin, vyberte Begin.sln a klikněte na Otevřít. Alternativně můžete pokračovat s řešením, které jste získali po dokončení 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. Přidejte třídu Model žánru. Uděláte to tak, že kliknete pravým tlačítkem myši na složku Modely v Průzkumník řešení, vyberete Přidat a potom možnost Nová položka. V části Kód zvolte položku Třídy a pojmenujte soubor Genre.cs a klikněte na tlačítko Přidat.

    Přidání třídy

    Přidání nové položky

    Přidat třídu modelu žánru

    Přidat třídu modelu žánru

  4. Přidejte vlastnost Name do třídy Žánr. Uděláte to tak, že přidáte následující kód:

    (Fragment kódu – ASP.NET MVC 4 Fundamentals – Ex6 Žánr)

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    
    namespace MvcMusicStore.Models
    {
        public class Genre
        {
            public string Name { get; set; }
        }
    }
    
  5. Podle stejného postupu jako předtím přidejte třídu Album . Uděláte to tak, že kliknete pravým tlačítkem myši na složku Modely v Průzkumník řešení, vyberete Přidat a potom možnost Nová položka. V části Kód zvolte položku třídy a pojmenujte soubor Album.cs a klikněte na tlačítko Přidat.

  6. Přidejte dvě vlastnosti do třídy Album: Žánr a Název. Uděláte to tak, že přidáte následující kód:

    (Fragment kódu – ASP.NET MVC 4 Fundamentals – Ex6 Album)

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    
    namespace MvcMusicStore.Models
    {
        public class Album
        {
            public string Title { get; set; }
    
            public Genre Genre { get; set; }
        }
    }
    

Úkol 2 – Přidání modelu StoreBrowseViewModel

StoreBrowseViewModel se použije v této úloze k zobrazení alb, která odpovídají vybranému žánru. V této úloze vytvoříte tuto třídu a pak přidáte dvě vlastnosti pro zpracování žánru a seznamu alb.

  1. Přidejte StoreBrowseViewModel – třída. Uděláte to tak, že kliknete pravým tlačítkem na složku ViewModels v Průzkumník řešení, vyberete Přidat a pak možnost Nová položka. V části Kód zvolte položku Třídy a pojmenujte soubor StoreBrowseViewModel.cs a klikněte na tlačítko Přidat.

  2. Přidejte odkaz na modely ve třídě StoreBrowseViewModel . Chcete-li to provést, přidejte následující pomocí oboru názvů:

    (Fragment kódu – ASP.NET základy MVC 4 – Ex6 UsingModel)

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using MvcMusicStore.Models;
    
    namespace MvcMusicStore.ViewModels
    {
        public class StoreBrowseViewModel
        {
        }
    }
    
  3. Přidejte dvě vlastnosti do třídy StoreBrowseViewModel : Žánr a Alba. Uděláte to tak, že přidáte následující kód:

    (Fragment kódu – ASP.NET základy MVC 4 – Ex6 ModelProperties)

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using MvcMusicStore.Models;
    
    namespace MvcMusicStore.ViewModels
    {
        public class StoreBrowseViewModel
        {
            public Genre Genre { get; set; }
    
            public List<Album> Albums { get; set; }
        }
    }
    

Poznámka:

Co je List<Album> ?: Tato definice používá typ Seznam<T>, kde T omezuje typ, do kterého prvky tohoto seznamu patří, v tomto případě Album (nebo některý z jeho potomků).

Tato schopnost navrhovat třídy a metody, které odvozují specifikaci jednoho nebo více typů, dokud není deklarována třída nebo metoda a vytvoření instance klientským kódem je funkcí jazyka C#, který se nazývá Generics.

List<T> je obecný ekvivalent arrayList typu a je k dispozici v oboru názvů System.Collections.Generic . Jednou z výhod použití obecných typů je, že vzhledem k tomu, že je zadaný typ, nemusíte se starat o operace kontroly typů, jako je přetypování prvků do alba , stejně jako u ArrayList.

Úkol 3 – použití nového modelu ViewModel v Ovládacím panelu StoreController

V této úloze upravíte metody akce Procházet a Podrobnosti StoreController tak, aby používaly nový StoreBrowseViewModel.

  1. Přidejte odkaz na složku Models ve třídě StoreController . Chcete-li to provést, rozbalte složku Controllers v Průzkumník řešení a otevřete StoreController třídy. Pak přidejte následující kód:

    (Fragment kódu – ASP.NET základy MVC 4 – Ex6 UsingModelInController)

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    using MvcMusicStore.ViewModels;
    using MvcMusicStore.Models;
    
  2. Nahraďte metodu akce Browse pro použití StoreViewBrowseController třídy. Vytvoříte žánr a dva nové objekty Alba s fiktivními daty (v dalším praktickém cvičení budete využívat skutečná data z databáze). Uděláte to tak, že nahradíte metodu Browse následujícím kódem:

    (Fragment kódu – ASP.NET základy MVC 4 – Ex6 BrowseMethod)

    //
    // GET: /Store/Browse?genre=Disco
    
    public ActionResult Browse(string genre)
    {
        var genreModel = new Genre()
        {
            Name = genre
        };
    
        var albums = new List<Album>()
        {
            new Album() { Title = genre + " Album 1" },
            new Album() { Title = genre + " Album 2" }
        };
    
        var viewModel = new StoreBrowseViewModel()
        {
            Genre = genreModel,
            Albums = albums
        };
    
        return this.View(viewModel);
    }
    
  3. Nahraďte metodu akce Details pro použití StoreViewBrowseController třídy. Vytvoříte nový objekt Album , který se vrátí do zobrazení. Chcete-li to provést, nahraďte metodu Details následujícím kódem:

    (Fragment kódu – ASP.NET základy MVC 4 – Ex6 DetailsMethod)

    //
    // GET: /Store/Details/5
    
    public ActionResult Details(int id)
    {
      var album = new Album { Title = "Sample Album" };
    
      return this.View(album);
    }
    

Úkol 4 – přidání šablony zobrazení pro procházení

V tomto úkolu přidáte zobrazení pro procházení , které zobrazí alba nalezená pro určitý žánr.

  1. Před vytvořením nové šablony Zobrazení byste měli vytvořit projekt tak, aby dialogové okno Přidat zobrazení vědělo o třídě ViewModel , která se má použít. Sestavte projekt tak , že vyberete položku nabídky Sestavení a potom Build MvcMusicStore.

  2. Přidejte zobrazení pro procházení. Uděláte to tak, že kliknete pravým tlačítkem myši v metodě akce Procházet StoreController a kliknete na Přidat zobrazení.

  3. V dialogovém okně Přidat zobrazení ověřte, zda je název zobrazení procházet. Zaškrtněte políčko Vytvořit zobrazení silného typu a v rozevíracím seznamu Třídy modelu vyberte StoreBrowseViewModel. U ostatních polí ponechte výchozí hodnotu. Pak klikněte na Přidat.

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

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

  4. Upravte Soubor Browse.cshtml tak, aby zobrazoval informace o žánru a přistupoval k objektu StoreBrowseViewModel předaný šabloně zobrazení. Chcete-li to provést, nahraďte obsah následujícím kódem: (C#)

    @model MvcMusicStore.ViewModels.StoreBrowseViewModel
    
    @{
        ViewBag.Title = "Browse Albums";
    }
    
    <h2>Browsing Genre: @Model.Genre.Name</h2>
    
    <ul>
        @foreach (var album in Model.Albums)
        {
            <li>@album.Title</li>
        }
    </ul>
    

Úloha 5 – spuštění aplikace

V této úloze otestujete, že metoda Browse načte alba z akce Procházet metodu.

  1. Stisknutím klávesy F5 spusťte aplikaci.

  2. Projekt začíná na domovské stránce. Chcete změnit adresu URL na /Store/Procházet? Žánr=Disco k ověření, že akce vrací dvě alba.

    Procházení Obchodu Disko Albums

    Procházení Obchodu Disko Albums

Úkol 6 – zobrazení informací o konkrétním albu

V této úloze implementujete zobrazení Store/Details pro zobrazení informací o konkrétním albu. V tomto praktickém cvičení se vše, co zobrazíte o albu, je již obsaženo v šabloně Zobrazení . Takže místo vytvoření StoreDetailsViewModel třídy, použijete aktuální StoreBrowseViewModel šablony předat Album do něj.

  1. V případě potřeby zavřete prohlížeč a vraťte se do okna sady Visual Studio. Přidejte nové zobrazení podrobností pro metodu akce Podrobnosti StoreControlleru. Provedete to tak, že kliknete pravým tlačítkem myši na metodu Details ve třídě StoreController a kliknete na Přidat zobrazení.

  2. V dialogovém okně Přidat zobrazení ověřte, zda je název zobrazení podrobnosti. Zaškrtněte políčko Vytvořit zobrazení silného typu a v rozevíracím seznamu Třída modelu vyberte Album. U ostatních polí ponechte výchozí hodnotu. Pak klikněte na Přidat. Tím se vytvoří a otevře soubor \Views\Store\Details.cshtml .

    Přidání zobrazení podrobností

    Přidání zobrazení podrobností

  3. Upravte soubor Details.cshtml tak, aby zobrazoval informace o albu a přistupoval k objektu Album, který je předán šabloně zobrazení. Chcete-li to provést, nahraďte obsah následujícím kódem: (C#)

    @model MvcMusicStore.Models.Album
    
    @{
        ViewBag.Title = "Details";
    }
    
    <h2>Album: @Model.Title</h2>
    

Úkol 7 – spuštění aplikace

V této úloze otestujete, že zobrazení podrobností načte informace o albu z metody akce Podrobnosti.

  1. Stisknutím klávesy F5 spusťte aplikaci.

  2. Projekt začíná na domovské stránce. Změňte adresu URL na /Store/Details/5 a ověřte informace o albu.

    Podrobné informace o albech procházení

    Procházení podrobností alba

V tomto úkolu přidáte do zobrazení obchodu odkaz, který bude obsahovat odkaz v každém názvu žánru na příslušnou adresu URL /Store/Procházet . Tímto způsobem, když kliknete na žánr, například Disko, přejde na /Store/Browse?žánr=Disko URL.

  1. V případě potřeby zavřete prohlížeč a vraťte se do okna sady Visual Studio. Aktualizujte indexovou stránku a přidejte odkaz na stránku Procházet. Uděláte to tak, že v Průzkumník řešení rozbalíte složku Zobrazení, pak složku Store a poklikejte na stránku Index.cshtml.

  2. Přidejte odkaz do zobrazení Procházet označující vybraný žánr. Uděláte to tak, že v rámci <značek li> nahradíte následující zvýrazněný kód: (C#)

    @model MvcMusicStore.ViewModels.StoreIndexViewModel
    
    @{
        ViewBag.Title = "Browse Genres";
    }
    
    <h2>Browse Genres</h2>
    
    <p> Select from @Model.NumberOfGenres genres</p>
    
    <ul>
        @foreach (string genreName in Model.Genres) {
            <li>
                @Html.ActionLink(genreName, "Browse", new { genre = genreName }, null)
            </li>
            }
    </ul>
    

    Poznámka:

    jiný přístup by se odkazoval přímo na stránku s kódem podobný následujícímu:

    <a href="/Store/Browse?žánr=@genreName">@genreName</a&gt;

    I když tento přístup funguje, závisí na pevně zakódovaném řetězci. Pokud později řadič přejmenujete, budete muset tuto instrukci změnit ručně. Lepší alternativou je použití pomocné metody HTML. ASP.NET MVC obsahuje metodu pomocné rutiny HTML, která je k dispozici pro tyto úlohy. Pomocná metoda Html.ActionLink() usnadňuje vytváření odkazů HTML>< a zajišťuje, aby cesty URL byly správně zakódovány.

    Html.ActionLink má několik přetížení. V tomto cvičení použijete jeden, který má tři parametry:

    1. Text odkazu, který zobrazí název žánru
    2. Název akce kontroleru (Procházet)
    3. Směrujte hodnoty parametrů, zadejte název (Žánr) i hodnotu (Název žánru).

Úloha 9 – spuštění aplikace

V tomto úkolu otestujete, že se každý žánr zobrazí s odkazem na příslušnou adresu URL /Store/Procházet .

  1. Stisknutím klávesy F5 spusťte aplikaci.

  2. Projekt začíná na domovské stránce. Změňte adresu URL na /Store a ověřte, že každý žánr odkazuje na příslušnou adresu URL /Store/Browse .

    Procházení žánrů s odkazy na stránku Procházet

    Procházení žánrů s odkazy na stránku Procházet

Úloha 10 – Předání hodnot pomocí kolekce Dynamic ViewModel

V této úloze se naučíte jednoduchou a výkonnou metodu předávání hodnot mezi kontrolerem a zobrazením bez provedení jakýchkoli změn v modelu. ASP.NET MVC 4 poskytuje kolekci ViewModel, která se dá přiřadit k libovolné dynamické hodnotě a přistupovat také uvnitř kontrolerů a zobrazení.

Dynamickou kolekci ViewBag teď použijete k předání seznamu "žánrů hvězdic" z kontroleru do zobrazení. Zobrazení Index storu bude mít přístup k modelu ViewModel a zobrazí informace.

  1. V případě potřeby zavřete prohlížeč a vraťte se do okna sady Visual Studio. Otevřete StoreController.cs a upravte metodu Index a vytvořte seznam žánrů s hvězdičkami do kolekce ViewModel:

    public ActionResult Index()
    {
        // Create list of genres
        var genres = new List<string> { "Rock", "Jazz", "Country", "Pop", "Disco" };
    
        // Create your view model
        var viewModel = new StoreIndexViewModel
        {
            NumberOfGenres = genres.Count,
            Genres = genres
        };
    
        ViewBag.Starred = new List<string> { "Rock", "Jazz" };
    
        return this.View(viewModel);
    }
    

    Poznámka:

    Pro přístup k vlastnostem můžete také použít syntaxi ViewBag["Starred"].

  2. Ikona hvězdičky "starred.png" je součástí složky Source\Assets\Images v tomto cvičení. Pokud ho chcete přidat do aplikace, přetáhněte jejich obsah z okna Průzkumníka Windows do Průzkumník řešení v sadě Visual Web Developer Express, jak je znázorněno níže:

    Přidání hvězdicového obrázku do řešení

    Přidání hvězdicového obrázku do řešení

  3. Otevřete soubor Store/Index.cshtml a upravte obsah. Přečtete vlastnost "hvězdička" v kolekci ViewBag a zeptáte se, jestli je aktuální název žánru v seznamu. V takovém případě se napravo od odkazu na žánr zobrazí ikona hvězdičky. (C#)

    @model MvcMusicStore.ViewModels.StoreIndexViewModel
    
    @{
         ViewBag.Title = "Browse Genres";
    }
    
    <h2>Browse Genres</h2>
    
    <p>Select from @Model.NumberOfGenres genres</p>
    
    <ul>
         @foreach (string genreName in Model.Genres)
         {
              <li>
                    @Html.ActionLink(genreName, "Browse", new { genre = genreName }, null)
    
                    @if (ViewBag.Starred.Contains(genreName))
                    { 
                         <img src="../../Content/Images/starred.png" alt="Starred element" />
                    }
              </li>
         }
    </ul>
    <br />
    <h5><img src="../../Content/Images/starred.png" alt="Starred element" />Starred genres 20% Off!</h5>
    

Úkol 11 – spuštění aplikace

V tomto úkolu otestujete, že hvězdné žánry zobrazují ikonu hvězdičky.

  1. Stisknutím klávesy F5 spusťte aplikaci.

  2. Projekt začíná na domovské stránce. Změňte adresu URL na /Store , abyste ověřili, že každý doporučený žánr má respektující popisek:

    Procházení žánrů s prvky s hvězdičkou

    Procházení žánrů s prvky s hvězdičkou

Cvičení 7: Kolem ASP.NET nové šablony MVC 4

V tomto cvičení prozkoumáte vylepšení v šablonách projektů ASP.NET MVC 4 a podíváte se na nejrelevantnější funkce nové šablony.

Úkol 1: Zkoumání šablony internetové aplikace ASP.NET MVC 4

  1. Pokud ještě není otevřený, spusťte VS Express pro web.

  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 webovou aplikaci ASP.NET MVC 4. Pojmenujte projekt MusicStore a aktualizujte název řešení na Začátek, vyberte umístění (nebo ponechte výchozí) a klikněte na OK.

    Vytvoření nového projektu ASP.NET MVC 4

    Vytvoření nového projektu ASP.NET MVC 4

  3. V dialogovém okně Nový ASP.NET projekt MVC 4 vyberte šablonu projektu internetové aplikace a klepněte na tlačítko OK. Všimněte si, že jako modul zobrazení můžete vybrat Razor nebo ASPX.

    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 zobrazte obnovenou šablonu. Můžete si prohlédnout následující funkce:

    1. Šablony moderního stylu

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

      ASP.NET MVC 4 restyled šablon

      ASP.NET MVC 4 restyled šablon

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

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

  6. Teď můžete prozkoumat řešení a vyzkoušet si některé nové funkce představené ASP.NET MVC 4 v šabloně projektu.

    ASP.NET MVC4-internet-application-project-template

    Šablona projektu internetové aplikace ASP.NET MVC 4

    1. Kód HTML5

      Procházením zobrazení šablon zjistíte nové značky motivu, například otevřít zobrazení About.cshtml v domovské složce.

      Nová šablona s využitím značek Razor a HTML5

      Nová šablona s využitím značek Razor a HTML5

    2. Zahrnuté knihovny JavaScriptu

      1. jQuery: jQuery zjednodušuje procházení dokumentů HTML, zpracování událostí, animace a interakce Ajax.

      2. Uživatelské rozhraní jQuery: Tato knihovna poskytuje abstrakce pro interakci s nízkou úrovní a animaci, pokročilé efekty a widgety s možností motivu, které jsou postavené na knihovně jQuery JavaScript.

        Poznámka:

        O uživatelském rozhraní jQuery a jQuery se můžete dozvědět v [http://docs.jquery.com/](http://docs.jquery.com/).

      3. KnockoutJS: 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 ASP.NET MVC 3 jsou knihovny uživatelského rozhraní jQuery a jQuery také součástí ASP.NET MVC 4.

        Poznámka:

        Další informace o knihovně KnockOutJS získáte na tomto odkazu: http://learn.knockoutjs.com/.

      4. Modernizace: Tato knihovna se spouští automaticky a web je kompatibilní se staršími prohlížeči při použití technologií HTML5 a CSS3.

        Poznámka:

        Další informace o knihovně Modernr naleznete na tomto odkazu: http://www.modernizr.com/.

    3. SimpleMembership zahrnuté v řešení

      SimpleMembership byla navržena jako náhrada za předchozí systém ASP.NET role a zprostředkovatele členství. Má mnoho nových funkcí, které vývojářům usnadňují flexibilnější zabezpečení webových stránek.

      Šablona Internetu už nastavila několik věcí pro integraci SimpleMembership, například AccountController je připraven používat OAuthWebSecurity (pro registraci účtu OAuth, přihlášení, správu atd.) a zabezpečení webu.

      SimpleMembership Zahrnuté v řešení

      SimpleMembership Zahrnuté v řešení

      Poznámka:

      Další informace o OAuthWebSecurity najdete na webu MSDN.

Poznámka:

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


Shrnutí

Dokončením tohoto praktického cvičení jste se naučili základy ASP.NET MVC:

  • Základní prvky aplikace MVC a jejich interakce
  • Vytvoření aplikace ASP.NET MVC
  • Postup přidání a konfigurace kontrolerů pro zpracování parametrů předávaného prostřednictvím adresy URL a řetězce dotazu
  • Postup přidání stránky předlohy rozložení pro nastavení šablony pro společný obsah HTML, šablonu stylů pro vylepšení vzhledu a chování a šablony zobrazení pro zobrazení obsahu HTML
  • Jak použít model ViewModel pro předávání vlastností do šablony Zobrazení k zobrazení dynamických informací
  • Použití parametrů předaných kontrolerů v šabloně Zobrazení
  • Jak přidat odkazy na stránky v aplikaci ASP.NET MVC
  • Přidání a používání dynamických vlastností v zobrazení
  • Vylepšení v šablonách projektů ASP.NET MVC 4

Příloha A: 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.

    Instalace byla dokončena.

    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 B: 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

Příloha C: 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í.

Pokud chcete přidat fragment 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.

  1. Vyberte Vložit fragment kódu následovaný mými fragmenty kódu.
  2. 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