• 12 min

Váš tým rozdělil práci pro aplikaci pro správu inventáře pizzy. Vaši spolužáci vytvořili webovou aplikaci ASP.NET Core za vás a už vytvořili službu pro čtení a zápis dat pizzy do databáze. Dostali jste přiřazenou práci na stránce Seznam pizz, která zobrazí seznam pizz a umožní vám přidat do databáze nové pizzy. Začneme prohlídkou projektu, abychom pochopili, jak je uspořádaná.

Získání souborů projektu

Pokud používáte GitHub Codespaces, stačí otevřít úložiště v prohlížeči, vybrat Code a pak ve větvi vytvořit nový prostor main kódu.

Pokud nepoužíváte GitHub Codespaces, získejte soubory projektu a otevřete je v editoru Visual Studio Code pomocí následujících kroků:

1. Otevřete příkazové prostředí a naklonujte projekt z GitHubu pomocí příkazového řádku:

   git clone https://github.com/MicrosoftDocs/mslearn-create-razor-pages-aspnet-core
   

2. Přejděte do mslearn-create-razor-pages-aspnet-core adresáře a otevřete projekt v editoru Visual Studio Code:

   cd mslearn-create-razor-pages-aspnet-core
   code .
   

Kontrola práce členů týmu

Chvíli se seznámíme s existujícím kódem ve složce ContosoPizza. Projekt je webová aplikace ASP.NET Core vytvořená pomocí dotnet new webapp příkazu. Změny provedené členy týmu jsou popsány níže.

• Do projektu byla přidána složka Models.
  • Složka modelu obsahuje Pizza třídu, která představuje pizzu.
• Do projektu byla přidána složka Data.
  • Datová složka obsahuje PizzaContext třídu, která představuje kontext databáze. Dědí z DbContext třídy v Entity Framework Core. Entity Framework Core je objektově-relační mapovač (ORM), který usnadňuje práci s databázemi.
• Do projektu byla přidána složka Services.
  • Složka služeb obsahuje PizzaService třídu, která zveřejňuje metody pro výpis a přidání pizzy.
  • Třída PizzaService používá PizzaContext třídu ke čtení a zápisu pizz do databáze.
  • Třída je registrována pro injektáž závislostí v Program.cs (řádek 10).

Entity Framework Core také vygeneroval několik věcí:

• Vygenerovala se složka Migrace.
  • Složka migrace obsahuje kód pro vytvoření schématu databáze.
• Vygeneroval se soubor databáze SQLite ContosoPizza.db .
  • Pokud máte nainstalované rozšíření SQLite (nebo používáte GitHub Codespaces), můžete databázi zobrazit tak, že na soubor kliknete pravým tlačítkem a vyberete Otevřít databázi. Schéma databáze je zobrazeno na kartě Průzkumník SQLite v podokně Průzkumník.

Kontrola struktury projektu Razor Pages

Všechno ostatní v projektu se nezmění od vytvoření projektu. Následující tabulka popisuje strukturu projektu vygenerovanou příkazem dotnet new webapp .

Název	Popis
Stránky/	Obsahuje Razor Pages a podpůrné soubory. Každá stránka Razor má soubor .cshtml a soubor třídy .cshtml.csPageModel.
wwwroot/	Obsahuje statické soubory prostředků, jako jsou HTML, JavaScript a CSS.
ContosoPizza.csproj	Obsahuje metadata konfigurace projektu, například závislosti.
Program.cs	Slouží jako vstupní bod aplikace a konfiguruje chování aplikace, jako je směrování.

Další důležité pozorování:

• Soubory stránky Razor a jejich spárovaný PageModel soubor třídy

  Stránky Razor jsou uloženy v adresáři Pages . Jak je uvedeno výše, každá stránka Razor má soubor .cshtml a soubor třídy .cshtml.csPageModel. Třída PageModel umožňuje oddělení logiky a prezentace stránky Razor Page, definuje obslužné rutiny stránek pro požadavky a zapouzdřuje vlastnosti dat a logiku vymezenou na stránku Razor Page.

• Adresářová struktura stránek a žádosti o směrování

  Razor Pages používá adresářovou strukturu Pages jako konvenci pro požadavky směrování. Následující tabulka ukazuje, jak se adresy URL mapují na názvy souborů:

  Adresa URL	Mapy na stránku Razor Page
  www.domain.com	Pages/Index.cshtml
  www.domain.com/Index	Pages/Index.cshtml
  www.domain.com/Privacy	Pages/Privacy.cshtml
  www.domain.com/Error	Pages/Error.cshtml

  Podsložky v adresáři Pages slouží k uspořádání stránek Razor Pages. Pokud by například existoval adresář Pages/Products, adresy URL by odrážely danou strukturu:

  Adresa URL	Mapy na stránku Razor Page
  www.domain.com/Products	Pages/Products/Index.cshtml
  www.domain.com/Products/Index	Pages/Products/Index.cshtml
  www.domain.com/Products/Create	Pages/Products/Create.cshtml

• Rozložení a další sdílené soubory

  Existuje několik souborů, které jsou sdíleny na více stránkách. Tyto soubory určují běžné prvky rozložení a importy stránek. Následující tabulka popisuje účel každého souboru.

  Soubor	Popis
  _ViewImports.cshtml	Importuje obory názvů a třídy, které se používají na více stránkách.
  _ViewStart.cshtml	Určuje výchozí rozložení pro všechny stránky Razor Pages.
  Pages/Shared/_Layout.cshtml	Toto je rozložení určené souborem _ViewStart.cshtml . Implementuje společné prvky rozložení na více stránkách.
  Pages/Shared/_ValidationScriptsPartial.cshtml	Poskytuje funkce ověřování pro všechny stránky.

První spuštění projektu

Pojďme projekt spustit, abychom ho viděli v akci.

1. Klikněte pravým tlačítkem na složku ContosoPizza v Průzkumníkovi a vyberte Otevřít v integrovaném terminálu. Otevře se okno terminálu v kontextu složky projektu.

2. V okně terminálu zadejte následující příkaz:

   dotnet watch
   

   Tento příkaz:

   • Vytvoří projekt.
   • Spustí aplikaci.
   • Sleduje změny souborů a restartuje aplikaci, když zjistí změnu.

3. Integrované vývojové prostředí vás vyzve k otevření aplikace v prohlížeči. Klikněte na Open in Browser (Otevřít v prohlížeči).

   Tip

   Aplikaci můžete otevřít také vyhledáním adresy URL v okně terminálu. Podržte klávesu Ctrl a kliknutím na adresu URL ji otevřete v prohlížeči.

4. Porovnejte vykreslenou domovskou stránku se stránkou Pages/Index.cshtml v integrovaném vývojovém prostředí:

   • Prohlédněte si kombinaci kódu HTML, Syntaxe Razor a C# v souboru.
     • Syntaxe Razor je označena @ znaky.
     • Kód jazyka C# je uzavřený v @{ } blocích. Poznamenejte si direktivy v horní části souboru:
     • Direktiva @page určuje, že tento soubor je stránka Razor Page.
     • Direktiva @model určuje typ modelu pro stránku (v tomto případě IndexModel, který je definován v Pages/Index.cshtml.cs).
   • Zkontrolujte blok kódu jazyka C#.
     • Kód nastaví hodnotu Title položky v rámci slovníku ViewData na "Domovská stránka".
     • Slovník ViewData se používá k předávání dat mezi stránkou Razor Page a IndexModel třídou.
     • Za běhu se Title hodnota používá k nastavení prvku stránky <title> .

Nechte aplikaci spuštěnou v okně terminálu. Použijeme ho v nadcházejících lekcích. Nechte také kartu prohlížeče se spuštěnou aplikací Contoso Pizza. V aplikaci provedete změny a prohlížeč se automaticky aktualizuje, aby se změny zobrazily.

Přizpůsobení cílové stránky

Pojďme na cílovou stránku udělat několik změn, aby byla relevantnější pro aplikaci pizza.

1. V souboru Pages/Index.cshtml nahraďte kód v bloku kódu jazyka C#následujícím kódem:

   ViewData["Title"] = "The Home for Pizza Lovers";
   TimeSpan timeInBusiness = DateTime.Now - new DateTime(2018, 8, 14);
   

   Předchozí kód:

   • Nastaví hodnotu Title položky ve slovníku ViewData na "The Home for Pizza Lovers".
   • Vypočítá dobu, která uplynula od otevření firmy.

2. Upravte kód HTML následujícím způsobem:

   • <h1> Nahraďte prvek následujícím kódem:

     <h1 class="display-4">Welcome to Contoso Pizza</h1>
     

   • <p> Nahraďte prvek následujícím kódem:

     <p class="lead">The best pizza in town for @Convert.ToInt32(timeInBusiness.TotalDays) days!</p>
     

   Předchozí kód:

   • Změní nadpis na "Vítejte ve společnosti Contoso Pizza".
   • Zobrazí počet dní, které uplynuly od otevření firmy.
     • Znak @ se používá k přepnutí z HTML na syntaxi Razor.
     • Metoda Convert.ToInt32 slouží k převodu TotalDays vlastnosti timeInBusiness proměnné na celé číslo.
     • Třída Convert je součástí System oboru názvů, který je automaticky importován elementem <ImplicitUsings> v souboru ContosoPizza.csproj .

3. Uložte soubor. Karta prohlížeče s aplikací se automaticky aktualizuje, aby se zobrazily změny. Pokud používáte GitHub Codespaces, soubor se uloží automaticky, ale budete muset kartu prohlížeče aktualizovat ručně.

Udělali jste první změny stránky Razor Page. V další lekci přidáte do aplikace novou stránku, která zobrazí seznam pizz.