Gyakorlat – A projekt testreszabása

  • 12 perc

Csapata felosztotta a pizzaleltár-kezelő alkalmazás munkáját. A csapattagok létrehozták Önnek a ASP.NET Core webalkalmazást, és már létrehoztak egy szolgáltatást, amely pizzaadatokat olvas és ír egy adatbázisba. Ön a Pizzalista lapon kapott munkát, amely megjeleníti a pizzák listáját, és lehetővé teszi, hogy új pizzákat vegyen fel az adatbázisba. Kezdjük a projekt áttekintésével, hogy megismerjük a rendszerezés módját.

Feljegyzés

Ez a modul a .NET CLI-t (parancssori felületet) és a Visual Studio Code-ot használja a helyi fejlesztéshez. A modul elvégzése után a Visual Studio (Windows) használatával vagy a Visual Studio Code (Windows, Linux és macOS) használatával folytathatja a fejlesztést.

A projektfájlok beszerzése

GitHub Codespaces használata esetén egyszerűen nyissa meg az adattárat a böngészőben, válassza a Kód lehetőséget, majd hozzon létre egy új kódteret az main ágon.

Ha nem GitHub Codespace-eket használ, szerezze be a projektfájlokat, és nyissa meg őket a Visual Studio Code-ban az alábbi lépésekkel:

  1. Nyisson meg egy parancssort, és klónozza a projektet a GitHubról a parancssor használatával:

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

  2. Lépjen a mslearn-create-razor-pages-aspnet-core könyvtárra, és nyissa meg a projektet a Visual Studio Code-ban:

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

Tipp.

Ha telepítve van egy kompatibilis tároló-futtatókörnyezet, a Dev Containers bővítmény használatával megnyithatja az adattárat egy tárolóban az előre telepített eszközökkel.

Csapattagok munkájának áttekintése

Szánjunk egy kis időt, hogy megismerkedjünk a ContosoPizza mappában található meglévő kóddal. A projekt egy ASP.NET Core-webalkalmazás, amelyet a dotnet new webapp parancs használatával hoztak létre. A csapattagok által végzett módosításokat az alábbiakban ismertetjük.

Tipp.

Ne töltsön túl sok időt a módosítások áttekintésével. A csapattagok már elvégezték az adatbázis és a szolgáltatás létrehozásán végzett munkát, hogy pizzákat olvassanak és írjanak az adatbázisba, de felhasználói felületi módosításokat nem hajtottak végre. A következő leckében egy olyan felhasználói felületet fog létrehozni, amely a szolgáltatásukat használja.

  • Hozzáadtunk egy Models mappát a projekthez.
    • A modellmappa egy Pizza pizzát jelképező osztályt tartalmaz.
  • Egy Adatmappa lett hozzáadva a projekthez.
    • Az adatmappa egy olyan osztályt PizzaContext tartalmaz, amely az adatbázis-környezetet jelöli. Az Entity Framework Core osztályától DbContext öröklődik. Az Entity Framework Core egy objektum-relációs leképező (ORM), amely megkönnyíti az adatbázisok használatát.
  • A projekthez egy Szolgáltatások mappa lett hozzáadva.
    • A szolgáltatási mappa egy osztályt PizzaService tartalmaz, amely a pizzák listázására és hozzáadására használható módszereket teszi elérhetővé.
    • Az PizzaService osztály az PizzaContext osztály használatával olvas és ír pizzákat az adatbázisba.
    • Az osztály a függőséginjektáláshoz van regisztrálva a Program.cs (10. sor).

Az Entity Framework Core is létrehozott néhány dolgot:

  • Létre lett hozva egy Migrations mappa.
    • A Migrálások mappa az adatbázisséma létrehozásához szükséges kódot tartalmazza.
  • Létrejött az SQLite-adatbázisfájl ContosoPizza.db .
    • Ha telepítve van az SQLite-bővítmény (vagy GitHub Codespacest használ), az adatbázis megtekintéséhez kattintson a jobb gombbal a fájlra, és válassza az Adatbázis megnyitása parancsot. Az adatbázisséma az Explorer panel SQLite Explorer lapján jelenik meg.

Tekintse át a Razor Pages projektstruktúráját

A projekt minden más része változatlan marad a projekt létrehozásakor. Az alábbi táblázat a parancs által létrehozott projektstruktúrát dotnet new webapp ismerteti.

Név Leírás
Oldalak/ Razor-oldalakat és kiszolgáló fájlokat tartalmaz. Minden Razor-laphoz tartozik egy .cshtml fájl és egy .cshtml.csPageModel osztályfájl.
wwwroot/ Olyan statikus objektumfájlokat tartalmaz, mint a HTML, a JavaScript és a CSS.
ContosoPizza.csproj Projektkonfiguráció metaadatait, például függőségeket tartalmaz.
Program.cs Az alkalmazás belépési pontjaként szolgál, és konfigurálja az alkalmazás viselkedését, például az útválasztást.

Egyéb figyelemre méltó megfigyelések:

  • Razor-lapfájlok és párosított PageModel osztályfájljuk

    A Razor-lapok a Pages könyvtárban vannak tárolva. Ahogy fentebb említettük, minden Razor-oldal .cshtml. Az PageModel osztály lehetővé teszi a Razor-lapok logikájának és bemutatójának elkülönítését, meghatározza a kérelmek lapkezelőit, és beágyazza a Razor-lapra vonatkozó adattulajdonságokat és logikát.

  • A Pages címtárszerkezete és útválasztási kérései

    A Razor Pages a Pages címtárstruktúráját használja az útválasztási kérések konvenciójaként. Az alábbi táblázat azt mutatja be, hogy az URL-címek hogyan képeznek le fájlneveket:

    URL Térképek Razor-lapra
    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

    A Lapok könyvtár almappái razor-lapok rendszerezésére szolgálnak. Ha például egy Pages/Products könyvtár lenne, az URL-címek a következő struktúrát tükröznék:

    URL Térképek Razor-lapra
    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

  • Elrendezés és egyéb megosztott fájlok

    Több fájl is van, amelyek több oldalon vannak megosztva. Ezek a fájlok határozzák meg a gyakori elrendezési elemeket és a lapimportálást. Az alábbi táblázat az egyes fájlok célját ismerteti.

    Fájl Leírás
    _ViewImports.cshtml Importálja a több oldalon használt névtereket és osztályokat.
    _ViewStart.cshtml Az összes Razor-oldal alapértelmezett elrendezését adja meg.
    Pages/Shared/_Layout.cshtml Ez a fájl által _ViewStart.cshtml megadott elrendezés. Közös elrendezési elemeket valósít meg több oldalon.
    Pages/Shared/_ValidationScriptsPartial.cshtml Érvényesítési funkciókat biztosít az összes oldal számára.

A projekt első futtatása

Futtassuk a projektet, hogy működés közben láthassuk.

  1. Kattintson a jobb gombbal a ContosoPizza mappára az Explorerben, és válassza a Megnyitás az integrált terminálban lehetőséget. Ezzel megnyit egy terminálablakot a projektmappa környezetében.

  2. A terminálablakban adja meg a következő parancsot:

    dotnet watch

    A parancs a következőket hajtja végre:

    • Létrehozza a projektet.
    • Elindítja az alkalmazást.
    • Figyeli a fájlmódosításokat, és újraindítja az alkalmazást, amikor változást észlel.

  3. Az IDE arra kéri, hogy nyissa meg az alkalmazást egy böngészőben. Válassza az Open in Browser (megnyitás a böngészőben) lehetőséget.

    Tipp.

    Az alkalmazást úgy is megnyithatja, hogy megkeresi az URL-címet a terminálablakban. Tartsa lenyomva a Ctrl billentyűt , és kattintson az URL-címre a böngészőben való megnyitásához.

  4. Hasonlítsa össze a renderelt kezdőlapot a Pages/Index.cshtml fájllal az IDE-ben:

    • Figyelje meg a HTML, a Razor Szintaxis és a C# kód kombinációját a fájlban.
      • A Razor Szintaxis karakterekkel @ van jelölve.
      • A C#-kód blokkokban @{ } található. Jegyezze fel a fájl tetején található irányelveket:
      • Az @page irányelv azt határozza meg, hogy ez a fájl egy Razor-oldal.
      • Az @model irányelv meghatározza a lap modelltípusát (ebben az esetben a IndexModelPages/Index.cshtml.cs definícióját).
    • Tekintse át a C#-kódblokkot.
      • A kód a szótárban lévő Title elem ViewData értékét "Kezdőlap" értékre állítja.
      • A ViewData szótár a Razor-oldal és az osztály közötti adatátadásra IndexModel szolgál.
      • Futásidőben az Title érték az oldal elemének beállítására <title> szolgál.

Hagyja futni az alkalmazást a terminálablakban. A közelgő egységekben fogjuk használni. Hagyja a böngészőlapot a futó Contoso Pizza alkalmazással is. Ön módosítja az alkalmazást, és a böngésző automatikusan frissül a módosítások megjelenítéséhez.

A kezdőlap testreszabása

Módosítsunk néhány módosítást a kezdőlapon, hogy relevánsabb legyen a pizzaalkalmazás számára.

  1. A Pages/Index.cshtml fájlban cserélje le a C# kódblokkban lévő kódot a következő kódra:

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

    A fenti kód a következőket végzi el:

    • A szótárban található TitleViewData elem értékét a "The Home for Pizza Lovers" (A Pizza szerelmeseinek otthona) értékre állítja.
    • Kiszámítja a vállalkozás megnyitása óta eltelt időt.

  2. Módosítsa a HTML-t az alábbiak szerint:

    • Cserélje le az <h1> elemet a következő kódra:

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

    • Cserélje le az <p> elemet a következő kódra:

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

    A fenti kód a következőket végzi el:

    • A címsort a következőre módosítja: "Üdvözli a Contoso Pizza".
    • Megjeleníti a vállalkozás megnyitása óta eltelt napok számát.
      • A @ karakter HTML-ről Razor Szintaxisra vált.
      • A Convert.ToInt32 metódus a változó tulajdonságát TotalDays egész számmá alakítjatimeInBusiness.
      • Az Convert osztály a System névtér része, amelyet a <ImplicitUsings> ContosoPizza.csproj fájl eleme automatikusan importál.

  3. Mentse a fájlt. Az alkalmazással rendelkező böngészőlap automatikusan frissül a módosítások megjelenítéséhez. GitHub Codespaces használata esetén a fájl automatikusan menti a fájlt, de manuálisan kell frissítenie a böngészőlapot.

Fontos

Tartsa szemmel a terminálablakot dotnet watch minden alkalommal, amikor menti a fájlt. Néha előfordulhat, hogy a kód durva szerkesztést tartalmaz. Ez azt jelenti, hogy a módosított kód nem fordítható újra az alkalmazás újraindítása nélkül. Ha a rendszer kéri az alkalmazás újraindítását, nyomja le az (igen) vagy y (mindig) billentyűt a . Az alkalmazást bármikor leállíthatja úgy, hogy kétszer lenyomja a Ctrl+C billentyűkombinációt a terminálablakban, majd újrafuttatva dotnet watch újraindítja.

Végrehajtotta első módosításait egy Razor-oldalon! A következő leckében egy új oldalt ad hozzá az alkalmazáshoz a pizzák listájának megjelenítéséhez.