Övning – Lägga till en ny Razor-sida

  • 10 minuter

I föregående lektion hämtade du källkoden för Contoso Pizza-projektet och sedan gjorde du några enkla ändringar på startsidan. I den här lektionen lägger du till en ny Razor-sida i projektet.

Skapa sidan Pizzalista

Om du vill skapa en ny Razor-sida använder du .NET CLI.

  1. Eftersom terminalen blockeras av dotnet watch kommandot öppnar du en annan terminal genom att högerklicka på mappen ContosoPizza i Utforskaren och välja Öppna i integrerad terminal.

  2. I det nya terminalfönstret anger du följande kommando:

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

    Kommandot ovan:

    • Skapar dessa två filer i ContosoPizza.Pages namnområdet:
      • PizzaList.cshtml – Razor-sidan
      • PizzaList.cshtml.cs – den medföljande PageModel klassen
    • Lagrar båda filerna i projektets underkatalog Pages .

  3. Lägg :

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

    Detta anger elementet <title> för sidan.

  4. Lägg till följande kod i slutet av filen:

    <h1>Pizza List 🍕</h1>

<!-- New Pizza form will go here -->

<!-- List of pizzas will go here -->

    Detta lägger till en rubrik på sidan, samt två HTML-kommentarsplatshållare för funktioner som du lägger till senare.

  5. Spara filen. Om du använder GitHub Codespaces sparas filen automatiskt.

  6. Gå tillbaka till terminalen som kör dotnet watchoch välj Ctrl+R för att läsa in appen igen och identifiera de nya filerna.

Lägg till sidan Pizzalista i navigeringsmenyn

Det skulle vara ett bra tillfälle att testa sidan, men sidan kan inte nås i webbläsaren eftersom den ännu inte är länkad i navigeringsmenyn. Du länkar den nu.

  1. Öppna Sidor/Delad/_Layout.cshtml.

  2. I -elementet med klassen (börjar på rad 21) noterar du de <ul> element som innehåller länkarna navbar-nav och <li>. Lägg till följande kod i slutet av listan efter elementet <li> som innehåller sekretesslänken:

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

    Detta lägger till en länk till sidan PizzaList i navigeringsmenyn.

  3. Spara filen. Webbläsarfliken med appen uppdateras automatiskt för att visa ändringarna. Om du använder GitHub Codespaces sparas filen automatiskt, men du måste uppdatera webbläsarfliken manuellt.

  4. Välj länken Pizzalista 🍕 i navigeringsmenyn. Sidan Pizzalista visas.

Registrera Klassen PizzaService med containern för beroendeinmatning

Sidan Pizzalista beror på objektet PizzaService för att hämta listan över pizzor. Du använder beroendeinmatning för att ange PizzaService objektet på sidan. PizzaService Registrera först klassen med containern.

  1. Öppna Program.cs.

  2. I avsnittet som lägger till tjänster i containern lägger du till följande kod:

    builder.Services.AddScoped<PizzaService>();

    Den här koden registrerar PizzaService klassen med containern för beroendeinmatning. Metoden AddScoped anger att ett nytt PizzaService objekt ska skapas för varje HTTP-begäran. PizzaService Nu kan matas in i valfri Razor-sida.

  3. Spara filen. Om du använder GitHub Codespaces sparas filen automatiskt.

Visa en lista över pizzor

Nu ska vi ändra PageModel klassen för sidan Pizzalista för att hämta listan över pizzor från PizzaService objektet och lagra den i en egenskap.

  1. Öppna Pages/PizzaList.cshtml.cs.

  2. Lägg till följande using instruktioner överst i filen:

    using ContosoPizza.Models;
using ContosoPizza.Services;

    Dessa instruktioner importerar de Pizza typer och PizzaService som du ska använda på sidan.

  3. I namnområdesblocket ContosoPizza.Pages ersätter du hela PizzaListModel klassen med följande kod:

    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();
    }
}

    I koden ovan:

    • Ett privat skrivskyddat PizzaService namn _service skapas. Den här variabeln innehåller en referens till ett PizzaService objekt.
      • Nyckelordet readonly anger att värdet för variabeln _service inte kan ändras när det har angetts i konstruktorn.
    • En PizzaList egenskap definieras för att lagra listan över pizzor.
      • Typen IList<Pizza> anger att egenskapen PizzaList innehåller en lista över Pizza objekt.
      • PizzaList initieras för att default! indikera för kompilatorn att den kommer att initieras senare, så null-säkerhetskontroller krävs inte.
    • Konstruktorn accepterar ett PizzaService objekt.
      • Objektet PizzaService tillhandahålls genom beroendeinmatning.
    • En OnGet metod definieras för att hämta listan över pizzor från PizzaService objektet och lagra den i egenskapen PizzaList .

    Dricks

    Om du behöver hjälp med att förstå nullsäkerhet kan du läsa Null-säkerhet i C#.

  4. Spara filen. Om du använder GitHub Codespaces sparas filen automatiskt.

  5. Gå tillbaka till terminalen där dotnet watch kör och tryck på Ctrl + R för att ladda om appen med den redan registrerade tjänsten och den nya konstruktorn för PizzaListModel.

Visa listan över pizzor

Nu när sidan har åtkomst till listan över pizzor använder du den listan för att visa pizzorna på sidan.

  1. Öppna sidor/PizzaList.cshtml.

  2. Ersätt kommentaren <!-- List of pizzas will go here --> med följande kod:

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

    I koden ovan:

    • Ett <table> element skapas för att visa listan över pizzor.
    • Ett <thead> element skapas för att lagra tabellrubriken.
    • Uttalandet @foreach inuti <tbody> itererar över listan över pizzor.
      • Egenskapen Model refererar till objektet PizzaListModel som skapades i filen bakom koden.
      • Egenskapen PizzaList refererar till egenskapen PizzaList som definierades i filen code-behind.
    • Varje iteration av -instruktionen @foreach skapar ett <tr> element för att lagra pizzadata:
      • Razor-syntax används för att visa pizzadata i elementen <td> . Den här syntaxen används för att visa egenskaperna för objektet Pizza som lagras i variabeln pizza .
      • Price formateras med C#-stränginterpolation.
      • Ett ternary-uttryck används för att visa värdet för IsGlutenFree egenskapen som "✔️" eller en tom cell.
      • Ett formulär skapas för att ta bort pizzan.
        • Attributet asp-page-handler anger att formuläret ska skickas till Delete hanteraren i filen bakom koden. Du skapar den hanteraren i en senare lektion.
        • Attributet asp-route-id anger att Id objektets Pizza egenskap ska skickas till Delete hanteraren.

  3. Spara filen. I webbläsaren uppdateras sidan Pizzalista med listan över pizzor. Om du använder GitHub Codespaces sparas filen automatiskt, men du måste uppdatera webbläsarfliken manuellt.

Skärmbild av sidan Pizzalista med arbetslistan.

Snyggt jobbat! Du har skapat en Razor-sida som visar en lista med pizzor. I nästa lektion får du lära dig om tagghjälpare och sidhanterare.