Gyakorlat – Új Razor-oldal hozzáadása

Befejeződött

Az előző leckében beszerezte a Contoso Pizza projekt forráskódját, majd végrehajtott néhány egyszerű módosítást a kezdőlapon. Ebben a leckében egy új Razor-lapot fog hozzáadni a projekthez.

A Pizzalista lap létrehozása

Új Razor-oldal létrehozásához a .NET parancssori felületet kell használnia.

1. Mivel a parancs letiltja a dotnet watch terminált, nyisson meg egy másik terminált a jobb gombbal az ExplorerContosoPizza mappájára kattintva, és válassza a Megnyitás az integrált terminálban lehetőséget.

2. Az új terminálablakban adja meg a következő parancsot:

   dotnet new page --name PizzaList --namespace ContosoPizza.Pages --output Pages
   

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

   • Ez a két fájl jön létre a ContosoPizza.Pages névtérben:
     • PizzaList.cshtml - a Razor oldal
     • PizzaList.cshtml.cs - a kísérő PageModel osztály
   • Mindkét fájlt a projekt Pages alkönyvtárában tárolja.

3. A Pages/PizzaList.cshtml fájlban adja hozzá a következő kódot a @{ } kódblokkban:

   ViewData["Title"] = "Pizza List 🍕";
   

   Ezzel beállítja a <title> lap elemét.

4. A fájl végén adja hozzá a következő kódot:

   <h1>Pizza List 🍕</h1>
   
   <!-- New Pizza form will go here -->
   
   <!-- List of pizzas will go here -->
   

   Ez hozzáad egy címsort a laphoz, valamint két HTML-megjegyzés helyőrzőt a később hozzáadandó funkciókhoz.

5. Mentse a fájlt. Ha GitHub Codespaces-t használ, a fájl automatikusan ment.

6. Térjen vissza a futó dotnet watchterminálhoz, és a Ctrl+R billentyűkombinációval töltse be újra az alkalmazást, és észlelje az új fájlokat.

A Pizzalista lap hozzáadása a navigációs menühöz

Ez jó alkalom lenne az oldal tesztelésére, de a lap nem érhető el a böngészőben, mert még nincs csatolva a navigációs menüben. Most összekapcsolja.

1. Nyissa meg a Pages/Shared/_Layout.cshtml fájlt.

2. <ul> Az osztályt tartalmazó navbar-nav elemben (a 21. sorban kezdődik) jegyezze fel a <li>Kezdőlap és adatvédelem lapra mutató hivatkozásokat tartalmazó elemeket. Adja hozzá a következő kódot a lista végéhez az <li>adatvédelmi hivatkozást tartalmazó elem után:

   <li class="nav-item">
       <a class="nav-link text-dark" asp-area="" asp-page="/PizzaList">Pizza List 🍕</a>
   </li>
   

   Ezzel hozzáad egy hivatkozást a PizzaList lapra a navigációs menühöz.

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.

4. A navigációs menüben válassza a Pizzalista 🍕 hivatkozást. Megjelenik a Pizzalista oldal.

A PizzaService osztály regisztrálása a függőséginjektálási tárolóval

A Pizza lista oldal attól függ, hogy az PizzaService objektum lekérje a pizzalistát. Függőséginjektálás használatával adja meg az PizzaService objektumot a lapnak. Először regisztrálja az osztályt PizzaService a tárolóval.

1. Nyissa meg Program.cs.

2. A tárolóhoz szolgáltatásokat hozzáadni kívánt szakaszban adja hozzá a következő kódot:

   builder.Services.AddScoped<PizzaService>();
   

   Ez a kód regisztrálja az osztályt PizzaService a függőséginjektálási tárolóval. A AddScoped metódus azt jelzi, hogy minden HTTP-kéréshez létre kell hozni egy új PizzaService objektumot. Most már PizzaService bármelyik Razor-oldalra beadható.

3. Mentse a fájlt. Ha GitHub Codespaces-t használ, a fájl automatikusan ment.

Pizzák listájának megjelenítése

Módosítsuk a PageModel Pizzalista lap osztályát, hogy lekérjük a pizzák listáját az PizzaService objektumból, és tároljuk egy tulajdonságban.

1. Nyissa meg a Pages/PizzaList.cshtml.cs fájlt.

2. Adja hozzá a következő using utasításokat a fájl elejéhez:

   using ContosoPizza.Models;
   using ContosoPizza.Services;
   

   Ezek az utasítások importálják a Pizza lapon használni kívánt típusokat és PizzaService típusokat.

3. ContosoPizza.Pages A névtérblokkon belül cserélje le a teljes PizzaListModel osztályt a következő kódra:

   public class PizzaListModel : PageModel
   {
       private readonly PizzaService _service;
       public IList<Pizza> PizzaList { get;set; } = default!;
   
       public PizzaListModel(PizzaService service)
       {
           _service = service;
       }
   
       public void OnGet()
       {
           PizzaList = _service.GetPizzas();
       }
   }
   

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

   • Létrejön egy privát írásvédett PizzaService név _service . Ez a változó egy PizzaService objektumra mutató hivatkozást fog tárolni.
     • A readonly kulcsszó azt jelzi, hogy a _service változó értéke nem módosítható a konstruktorban való beállítás után.
   • A PizzaList pizzák listájának tárolására egy tulajdonság van meghatározva.
     • A IList<Pizza> típus azt jelzi, hogy a PizzaList tulajdonság egy objektumlistát Pizza fog tartalmazni.
     • PizzaList inicializálva default! van, hogy jelezze a fordítónak, hogy később inicializálva lesz, ezért nincs szükség null biztonsági ellenőrzésekre.
   • A konstruktor elfogad egy objektumot PizzaService .
     • Az PizzaService objektumot függőséginjektálás biztosítja.
   • Egy OnGet metódust határozunk meg, amely lekéri a pizzák listáját az PizzaService objektumból, és tároljuk a PizzaList tulajdonságban.

   Tipp.

   Ha segítségre van szüksége a null biztonság megértéséhez, olvassa el a Null biztonság c#-ban című témakört.

4. Mentse a fájlt. Ha GitHub Codespaces-t használ, a fájl automatikusan ment.

5. Térjen vissza a futó dotnet watch terminálhoz, és nyomja le a Ctrl+R billentyűkombinációt az alkalmazás újratöltéséhez a regisztrált szolgáltatással és az új konstruktorral PizzaListModel.

A pizzák listájának megjelenítése

Most, hogy az oldal hozzáfér a pizzák listájához, ezzel a listával jelenítheti meg a pizzákat az oldalon.

1. Nyissa meg a Pages/PizzaList.cshtml fájlt.

2. Az <!-- List of pizzas will go here --> megjegyzést írja felül az alábbi kóddal:

   <table class="table mt-5">
       <thead>
           <tr>
               <th scope="col">Name</th>
               <th scope="col">Price</th>
               <th scope="col">Size</th>
               <th scope="col">Gluten Free</th>
               <th scope="col">Delete</th>
           </tr>
       </thead>
       <tbody>
       @foreach (var pizza in Model.PizzaList)
       {
           <tr>
               <td>@pizza.Name</td>
               <td>@($"{pizza.Price:C}")</td>
               <td>@pizza.Size</td>
               <td>@(pizza.IsGlutenFree ? "✔️" : string.Empty)</td>
               <td>
                   <form method="post" asp-page-handler="Delete" asp-route-id="@pizza.Id">
                       <button class="btn btn-danger">Delete</button>
                   </form>
               </td>
           </tr>
       }
       </tbody>
   </table>
   

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

   • Létrejön egy <table> elem a pizzák listájának megjelenítéséhez.
   • Létrejön egy <thead> elem a táblafejléc tárolásához.
   • Az @foreach iteráláson <tbody> belüli állítás a pizzák listájára ás.
     • A Model tulajdonság a PizzaListModel kód mögötti fájlban létrehozott objektumra hivatkozik.
     • A PizzaList tulajdonság a PizzaList mögöttes kódfájlban definiált tulajdonságra hivatkozik.
   • Az utasítás minden iterációja @foreach létrehoz egy <tr> elemet a pizzaadatok tárolásához:
     • A Razor szintaxis a pizzaadatok elemekben <td> való megjelenítésére szolgál. Ez a szintaxis a változóban tárolt objektum tulajdonságainak Pizza megjelenítésére pizza szolgál.
     • Price C# sztring interpolációval van formázva.
     • A függvény a tulajdonság értékét IsGlutenFree "✔️" vagy üres cellaként jeleníti meg.
     • A pizza törléséhez űrlap jön létre.
       • Az asp-page-handler attribútum azt jelzi, hogy az űrlapot a Delete kód mögötti fájl kezelőjének kell elküldeni. Ezt a kezelőt egy későbbi leckében fogja létrehozni.
       • Az asp-route-id attribútum azt jelzi, hogy az IdPizza objektum tulajdonságát át kell adni a Delete kezelőnek.

3. Mentse a fájlt. A böngészőben a Pizzalista oldal frissül a pizzák listájával. 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.

Gratulálunk! Létrehozott egy Razor-oldalt, amely megjeleníti a pizzák listáját. A következő leckében megismerheti a címkesegítőket és az oldalkezelőket.