Ćwiczenie — dodawanie nowej strony Razor

  • 10 min

W poprzedniej lekcji uzyskano kod źródłowy projektu Contoso Pizza, a następnie wprowadzono pewne proste zmiany na stronie głównej. W tej lekcji dodasz nową stronę Razor do projektu.

Tworzenie strony Lista pizzy

Aby utworzyć nową stronę Razor, użyjesz interfejsu wiersza polecenia platformy .NET.

  1. Ponieważ terminal jest blokowany przez dotnet watch polecenie, otwórz kolejny terminal, klikając prawym przyciskiem myszy folder ContosoPizza w Eksploratorze i wybierz polecenie Otwórz w zintegrowanym terminalu.

  2. W nowym oknie terminalu wprowadź następujące polecenie:

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

    Poprzednie polecenie:

    • Tworzy te dwa pliki w ContosoPizza.Pages przestrzeni nazw:
      • PizzaList.cshtml — strona Razor
      • PizzaList.cshtml.cs — towarzyszącej PageModel klasie
    • Przechowuje oba pliki w podkatalogu Pages projektu.

  3. W pliku Pages/PizzaList.cshtml dodaj następujący kod wewnątrz @{ } bloku kodu:

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

    Spowoduje to ustawienie <title> elementu dla strony.

  4. Na końcu pliku dodaj następujący kod:

    <h1>Pizza List 🍕</h1>

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

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

    Spowoduje to dodanie nagłówka do strony, a także dwóch symboli zastępczych komentarza HTML dla funkcji, które zostaną dodane później.

  5. Zapisz plik. Jeśli używasz usługi GitHub Codespaces, plik jest zapisywany automatycznie.

  6. Wróć do terminalu z systemem dotnet watch, a następnie wybierz Ctrl+R , aby ponownie załadować aplikację i wykryć nowe pliki.

Dodawanie strony Lista pizzy do menu nawigacyjnego

Jest to dobry moment na przetestowanie strony, ale nie można uzyskać dostępu do strony w przeglądarce, ponieważ nie jest jeszcze połączona w menu nawigacji. Połączysz go teraz.

  1. Otwórz plik Pages/Shared/_Layout.cshtml.

  2. W elemecie <ul> z klasą navbar-nav (rozpoczyna się w wierszu 21) zanotuj <li> elementy zawierające linki do stron strona główna i prywatność . Dodaj następujący kod na końcu listy po <li> elemecie zawierającym link Prywatność :

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

    Spowoduje to dodanie linku do strony PizzaList z menu nawigacji.

  3. Zapisz plik. Karta przeglądarki z aplikacją zostanie automatycznie odświeżona, aby wyświetlić zmiany. Jeśli używasz usługi GitHub Codespaces, plik jest zapisywany automatycznie, ale musisz ręcznie odświeżyć kartę przeglądarki.

  4. Wybierz link Lista 🍕 pizzy w menu nawigacji. Zostanie wyświetlona strona Lista pizzy.

Rejestrowanie klasy PizzaService za pomocą kontenera wstrzykiwania zależności

Strona Lista pizzy PizzaService zależy od obiektu w celu pobrania listy pizzy. Użyjesz iniekcji zależności, aby przekazać PizzaService obiekt do strony. Najpierw zarejestruj klasę w PizzaService kontenerze.

  1. Otwórz plik Program.cs.

  2. W sekcji, która dodaje usługi do kontenera, dodaj następujący kod:

    builder.Services.AddScoped<PizzaService>();

    Ten kod rejestruje klasę w PizzaService kontenerze wstrzykiwania zależności. Metoda AddScoped wskazuje, że dla każdego żądania HTTP należy utworzyć nowy PizzaService obiekt. Teraz można wstrzyknąć element PizzaService do dowolnej strony Razor.

  3. Zapisz plik. Jeśli używasz usługi GitHub Codespaces, plik jest zapisywany automatycznie.

Wyświetlanie listy pizz

Zmodyfikujmy klasę PageModel na stronie Lista pizzy, aby pobrać listę pizz z PizzaService obiektu i zapisać ją we właściwości .

  1. Otwórz stronę/PizzaList.cshtml.cs.

  2. Dodaj następujące using instrukcje na początku pliku:

    using ContosoPizza.Models;
using ContosoPizza.Services;

    Te instrukcje importuje Pizza typy i PizzaService , których będziesz używać na stronie.

  3. ContosoPizza.Pages W bloku przestrzeni nazw zastąp całą PizzaListModel klasę następującym kodem:

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

    Powyższy kod:

    • Zostanie utworzona prywatna PizzaService nazwa _service odczytu. Ta zmienna będzie przechowywać odwołanie do PizzaService obiektu.
      • Słowo readonly kluczowe wskazuje, że nie można zmienić wartości _service zmiennej po jej ustawieniu w konstruktorze.
    • Właściwość PizzaList jest definiowana do przechowywania listy pizz.
      • Typ IList<Pizza> wskazuje, że PizzaList właściwość będzie przechowywać listę Pizza obiektów.
      • PizzaList Jest inicjowany w celu default! wskazania kompilatorowi, że zostanie on zainicjowany później, więc kontrole bezpieczeństwa o wartości null nie są wymagane.
    • Konstruktor akceptuje PizzaService obiekt.
      • Obiekt PizzaService jest dostarczany przez wstrzyknięcie zależności.
    • Metoda jest definiowana OnGet w celu pobrania listy pizz z PizzaService obiektu i zapisania jej we PizzaList właściwości .

    Napiwek

    Jeśli potrzebujesz pomocy w zrozumieniu bezpieczeństwa wartości null, zobacz Bezpieczeństwo wartości null w języku C#.

  4. Zapisz plik. Jeśli używasz usługi GitHub Codespaces, plik jest zapisywany automatycznie.

  5. Wróć do terminalu uruchomionego dotnet watch i naciśnij Ctrl+R , aby ponownie załadować aplikację za pomocą zarejestrowanej usługi i nowego konstruktora dla polecenia PizzaListModel.

Wyświetlanie listy pizz

Teraz, gdy strona ma dostęp do listy pizz, użyjesz tej listy, aby wyświetlić pizze na stronie.

  1. Otwórz plik Pages/PizzaList.cshtml.

  2. Zastąp komentarz <!-- List of pizzas will go here --> następującym kodem:

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

    Powyższy kod:

    • Zostanie <table> utworzony element umożliwiający wyświetlenie listy pizz.
    • Tworzony <thead> jest element do przechowywania nagłówka tabeli.
    • Instrukcja @foreach wewnątrz <tbody> iteruje listę pizz.
      • Właściwość Model odwołuje się do PizzaListModel obiektu, który został utworzony w pliku za kodem.
      • Właściwość PizzaList odwołuje się do PizzaList właściwości zdefiniowanej w pliku za kodem.
    • Każda iteracja instrukcji @foreach tworzy <tr> element do przechowywania danych pizzy:
      • Składnia Razor służy do wyświetlania danych pizzy w elementach <td> . Ta składnia służy do wyświetlania właściwości Pizza obiektu przechowywanego w zmiennej pizza .
      • Price jest formatowany przy użyciu interpolacji ciągów języka C#.
      • Wyrażenieternary służy do wyświetlania wartości IsGlutenFree właściwości jako "✔️" lub pustej komórki.
      • Formularz jest tworzony w celu usunięcia pizzy.
        • Atrybut asp-page-handler wskazuje, że formularz powinien zostać przesłany do Delete programu obsługi w pliku za pomocą kodu. Ta procedura obsługi zostanie utworzona w kolejnej lekcji.
        • Atrybut asp-route-id wskazuje, że Id właściwość Pizza obiektu powinna zostać przekazana do Delete programu obsługi.

  3. Zapisz plik. W przeglądarce strona Lista pizzy odświeża się z listą pizzy. Jeśli używasz usługi GitHub Codespaces, plik jest zapisywany automatycznie, ale musisz ręcznie odświeżyć kartę przeglądarki.

Zrzut ekranu przedstawiający stronę Lista pizzy z listą roboczą.

Dobrze! Utworzono stronę Razor zawierającą listę pizz. W następnej lekcji dowiesz się więcej o pomocnikach tagów i programach obsługi stron.