Ćwiczenie — dostosowywanie projektu

  • 12 min

Twój zespół podzielił pracę nad aplikacją do zarządzania stanami magazynowymi pizzy. Członkowie Twojego zespołu stworzyli dla Ciebie aplikację internetową ASP.NET Core i opracowali już usługę do odczytu i zapisu danych pizzy w bazie danych. Przypisano Cię do pracy na stronie Lista pizzy, która będzie wyświetlać listę pizz i umożliwia dodawanie nowych pizz do bazy danych. Zaczniemy od zapoznania się z projektem, aby zrozumieć, jak jest ona zorganizowana.

Uwaga

W tym module używany jest interfejs wiersza polecenia platformy .NET (interfejs wiersza polecenia) i program Visual Studio Code na potrzeby programowania lokalnego. Po ukończeniu tego modułu można zastosować koncepcje przy użyciu programu Visual Studio (Windows) lub dalszego programowania przy użyciu programu Visual Studio Code (Windows, Linux i macOS).

Uzyskiwanie plików projektu

Jeśli używasz usługi GitHub Codespaces, wystarczy otworzyć repozytorium w przeglądarce, wybrać pozycję Kod, a następnie utworzyć nową przestrzeń kodu w main gałęzi.

Jeśli nie używasz usługi GitHub Codespaces, uzyskaj pliki projektu i otwórz je w programie Visual Studio Code, wykonując następujące czynności:

  1. Otwórz powłokę poleceń i sklonuj projekt z usługi GitHub przy użyciu wiersza polecenia:

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

  2. Przejdź do mslearn-create-razor-pages-aspnet-core katalogu i otwórz projekt w programie Visual Studio Code:

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

Napiwek

Jeśli masz zainstalowane zgodne środowisko uruchomieniowe kontenera, możesz użyć rozszerzenia Dev Containers , aby otworzyć repozytorium w kontenerze ze wstępnie zainstalowanymi narzędziami.

Przeglądanie pracy kolegów z zespołu

Pośmińmy chwilę, aby zapoznać się z istniejącym kodem w folderze ContosoPizza. Projekt jest aplikacją internetową platformy ASP.NET Core utworzoną przy użyciu polecenia dotnet new webapp. Zmiany wprowadzone przez kolegów z drużyny zostały opisane poniżej.

Napiwek

Nie poświęcaj zbyt dużo czasu na przeglądanie tych zmian. Twoi koledzy z zespołu wykonali już pracę nad utworzeniem bazy danych i usługą odczytu i zapisu pizzy w bazie danych, ale nie wprowadzili żadnych zmian w interfejsie użytkownika. Utworzysz interfejs użytkownika, który korzysta z ich usługi w następnej jednostce.

  • Folder Models został dodany do projektu.
    • Folder modelu zawiera klasę Pizza reprezentującą pizzę.
  • Folder Dane został dodany do projektu.
    • Folder danych zawiera klasę reprezentującą PizzaContext kontekst bazy danych. Dziedziczy z klasy DbContext w ramach Entity Framework Core. Entity Framework Core to maper obiektowo-relacyjny (ORM), który ułatwia pracę z bazami danych.
  • Folder Usługi został dodany do projektu.
    • Folder services zawiera klasę PizzaService , która uwidacznia metody wyświetlania listy i dodawania pizzy.
    • Klasa PizzaService używa klasy PizzaContext do odczytywania i zapisywania pizz w bazie danych.
    • Klasa jest zarejestrowana do wstrzykiwania zależności w Program.cs (wiersz 10).

Program Entity Framework Core wygenerował również kilka rzeczy:

  • Wygenerowano folder Migrations.
    • Folder migrations zawiera kod umożliwiający utworzenie schematu bazy danych.
  • Wygenerowano plik bazy danych SQLite ContosoPizza.db .
    • Jeśli masz zainstalowane rozszerzenie SQLite (lub używasz usługi GitHub Codespaces), możesz wyświetlić bazę danych, klikając plik prawym przyciskiem myszy i wybierając polecenie Otwórz bazę danych. Schemat bazy danych jest pokazany na karcie SQLite Explorer w okienku Eksploratora.

Przeglądanie struktury projektu Razor Pages

Wszystkie inne elementy w projekcie pozostają niezmienione od momentu utworzenia projektu. W poniższej tabeli opisano strukturę projektu wygenerowaną przez dotnet new webapp polecenie .

Nazwa/nazwisko opis
Stron/ Zawiera strony Razor i pliki pomocnicze. Każda strona Razor ma plik cshtml i plik klasy .cshtml.csPageModel.
wwwroot/ Zawiera statyczne pliki zasobów, takie jak HTML, JavaScript i CSS.
ContosoPizza.csproj Zawiera metadane konfiguracji projektu, takie jak zależności.
Program.cs Służy jako punkt wejścia aplikacji i konfiguruje zachowanie aplikacji, takie jak routing.

Inne godne uwagi obserwacje:

  • Pliki stron Razor i ich powiązany PageModel plik klasy

    Strony Razor są przechowywane w katalogu Pages . Jak wspomniano powyżej, każda strona Razor ma plik cshtml i plik klasy .cshtml.csPageModel. Klasa PageModel umożliwia rozdzielenie logiki i prezentacji strony Razor, definiuje procedury obsługi stron dla żądań oraz hermetyzuje właściwości danych i logikę w zakresie jej strony Razor.

  • Struktura katalogu Pages i żądania routingu

    Platforma Razor Pages używa struktury katalogów Pages jako konwencji routingu żądań. W poniższej tabeli pokazano, jak adresy URL odpowiadają nazwom plików.

    adres URL Mapuje na stronę Razor
    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

    Podfoldery w katalogu Pages są używane do organizowania stron Razor. Jeśli na przykład istnieje katalog Pages/Products , adresy URL będą odzwierciedlać strukturę:

    adres URL Mapuje na stronę Razor
    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

  • Układ i inne pliki udostępnione

    Istnieje kilka plików, które są współużytkowane na wielu stronach. Te pliki określają typowe elementy układu i import strony. W poniższej tabeli opisano przeznaczenie każdego pliku.

    Plik opis
    _ViewImports.cshtml Importuje przestrzenie nazw i klasy używane na wielu stronach.
    _ViewStart.cshtml Określa układ domyślny dla wszystkich stron Razor.
    Pages/Shared/_Layout.cshtml Jest to układ określony przez _ViewStart.cshtml plik. Implementuje typowe elementy układu na wielu stronach.
    Pages/Shared/_ValidationScriptsPartial.cshtml Udostępnia funkcje sprawdzania poprawności dla wszystkich stron.

Uruchamianie projektu po raz pierwszy

Uruchommy projekt, abyśmy mogli zobaczyć go w akcji.

  1. Kliknij prawym przyciskiem myszy folder ContosoPizza w Eksploratorze i wybierz polecenie Otwórz w zintegrowanym terminalu. Spowoduje to otwarcie okna terminalu w kontekście folderu projektu.

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

    dotnet watch

    To polecenie:

    • Kompiluje projekt.
    • Uruchamia aplikację.
    • Wyszukuje zmiany plików i uruchamia ponownie aplikację po wykryciu zmiany.

  3. Środowisko IDE wyświetla monit o otwarcie aplikacji w przeglądarce. Kliknij pozycję Otwórz w przeglądarce.

    Napiwek

    Aplikację można również otworzyć, wyszukując adres URL w oknie terminalu. Przytrzymaj Ctrl i kliknij adres URL, aby otworzyć go w przeglądarce.

  4. Porównaj renderowaną stronę główną z plikami Pages/Index.cshtml w środowisku IDE:

    • Obserwuj kombinację kodu HTML, składni Razor i kodu C# w pliku.
      • Składnia Razor jest oznaczona znakami @ .
      • Kod języka C# jest zawarty w blokach @{ }. Zanotuj dyrektywy w górnej części pliku:
      • Dyrektywa @page określa, że ten plik jest stroną Razor.
      • Dyrektywa @model określa typ modelu dla strony (w tym przypadku , IndexModelktóry jest zdefiniowany w pages/Index.cshtml.cs).
    • Przejrzyj blok kodu języka C#.
      • Kod ustawia wartość Title elementu w słowniku ViewData na "Strona główna".
      • Słownik ViewData służy do przekazywania danych między stroną Razor a klasą IndexModel .
      • W czasie wykonywania wartość Title jest używana do ustawienia elementu strony <title>.

Pozostaw aplikację uruchomioną w oknie terminalu. Użyjemy go w kolejnych lekcjach. Pozostaw też kartę przeglądarki z uruchomioną aplikacją Contoso Pizza. Wprowadzisz zmiany w aplikacji, a przeglądarka zostanie automatycznie odświeżona, aby wyświetlić zmiany.

Dostosowywanie strony docelowej

Wprowadźmy kilka zmian na stronie docelowej, aby uczynić ją bardziej odpowiednią dla aplikacji pizzy.

  1. W pliku Pages/Index.cshtml zastąp kod w bloku kodu C#następującym kodem:

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

    Powyższy kod:

    • Ustawia wartość elementu Title w słowniku ViewData na "Dom dla miłośników pizzy".
    • Oblicza ilość czasu, który minął od czasu otwarcia firmy.

  2. Zmodyfikuj kod HTML w następujący sposób:

    • Zastąp <h1> element następującym kodem:

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

    • Zastąp <p> element następującym kodem:

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

    Powyższy kod:

    • Zmienia nagłówek na "Witamy w firmie Contoso Pizza".
    • Przedstawia liczbę dni, które minęły od momentu otwarcia firmy.
      • Znak @ jest używany do przełączania z języka HTML na składnię Razor.
      • Metoda Convert.ToInt32 służy do konwertowania TotalDays właściwości zmiennej timeInBusiness na liczbę całkowitą.
      • Klasa Convert jest częścią System przestrzeni nazw, która jest importowana automatycznie przez <ImplicitUsings> element w pliku ContosoPizza.csproj .

  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.

Ważne

Za każdym razem, gdy zapiszesz plik, zachowaj oko na okno dotnet watch terminalu. Czasami twój kod może zawierać to, co nazywa niegrzeczną zmianą. Oznacza to, że zmieniony kod nie może zostać ponownie skompilowany bez ponownego uruchomienia aplikacji. Jeśli zostanie wyświetlony monit o ponowne uruchomienie aplikacji, naciśnij przycisk y (tak) lub a (zawsze). Zawsze można zatrzymać aplikację, naciskając dwukrotnie Ctrl+C w oknie terminalu, a następnie ponownie uruchomić ją, uruchamiając dotnet watch ponownie.

Dokonałeś swoich pierwszych zmian na stronie Razor! W następnej lekcji dodasz nową stronę do aplikacji, aby wyświetlić listę pizz.