Cvičení – přizpůsobení projektu

  • 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á.

Poznámka:

Tento modul používá rozhraní příkazového řádku .NET (rozhraní příkazového řádku) a Visual Studio Code pro místní vývoj. Po dokončení tohoto modulu můžete použít koncepty pomocí sady Visual Studio (Windows) nebo pokračovat ve vývoji pomocí editoru Visual Studio Code (Windows, Linux a macOS).

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 .

Návod

Pokud máte nainstalovaný kompatibilní modul runtime kontejneru, můžete pomocí rozšíření Dev Containers otevřít úložiště v kontejneru s předinstalovanými nástroji.

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.

Návod

Netrávit příliš mnoho času kontrolou těchto změn. Vaši kolegové už udělali práci na vytvoření databáze a služby pro čtení a zápis pizz do databáze, ale neudělali žádné změny uživatelského rozhraní. V další lekci vytvoříte uživatelské rozhraní, které využívá jejich službu.

  • 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ů:

    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:

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

    Návod

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

Důležité

Při každém uložení souboru sledujte okno dotnet watch terminálu. Někdy může váš kód obsahovat to, co volá hrubou úpravu. To znamená, že kód, který jste změnili, nelze znovu zkompilovat bez restartování aplikace. Pokud se zobrazí výzva k restartování aplikace, stiskněte y (ano) nebo a (vždy). Aplikaci můžete kdykoli zastavit tak, že v okně terminálu dvakrát stisknete Ctrl+C a pak ji dotnet watch znovu spustíte.

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.