Ćwiczenie — dostosowywanie projektu
Twój zespół podzielił pracę dla aplikacji do zarządzania zapasami pizzy. Twoi koledzy z zespołu utworzyli dla Ciebie aplikację internetową ASP.NET Core i utworzyli już usługę do odczytywania i zapisywania 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:
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
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ą dotnet new webapp
przy użyciu polecenia . 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 lekcji.
- Folder Models został dodany do projektu.
- Folder modelu zawiera klasę
Pizza
reprezentującą pizzę.
- Folder modelu zawiera klasę
- Folder Dane został dodany do projektu.
- Folder danych zawiera klasę reprezentującą
PizzaContext
kontekst bazy danych. Dziedziczy ona zDbContext
klasy w programie Entity Framework Core. Entity Framework Core to maper obiektowo-relacyjny (ORM), który ułatwia pracę z bazami danych.
- Folder danych zawiera klasę reprezentującą
- 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żywaPizzaContext
klasy do odczytywania i zapisywania pizzy w bazie danych. - Klasa jest zarejestrowana do wstrzykiwania zależności w Program.cs (wiersz 10).
- Folder services zawiera klasę
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 wyświetlany na karcie SQLite Explorer w okienku Eksplorator .
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 sparowany
PageModel
plik klasyStrony Razor są przechowywane w katalogu Pages . Jak wspomniano powyżej, każda strona Razor ma plik cshtml i plik klasy .cshtml.cs
PageModel
. KlasaPageModel
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 przedstawiono sposób mapowania adresów URL na nazwy plików:
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ę:
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.
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.
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.
Ś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.
Porównaj renderowaną stronę główną z plikami Pages/Index.cshtml w środowisku IDE:
- Obserwuj kombinację kodu HTML, Składnia Razor i C# w pliku.
- Składnia Razor jest oznaczona znakami
@
. - Kod języka C# jest ujęty w
@{ }
bloki. 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 ,IndexModel
który jest zdefiniowany w pages/Index.cshtml.cs).
- Składnia Razor jest oznaczona znakami
- Przejrzyj blok kodu języka C#.
- Kod ustawia wartość
Title
elementu w słownikuViewData
na "Strona główna". - Słownik
ViewData
służy do przekazywania danych między stroną Razor a klasąIndexModel
. - W czasie wykonywania
Title
wartość jest używana do ustawiania elementu strony<title>
.
- Kod ustawia wartość
- Obserwuj kombinację kodu HTML, Składnia Razor i C# w pliku.
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.
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 ma następujące działanie:
- Ustawia wartość elementu w słowniku
Title
ViewData
na "Strona główna dla miłośników pizzy". - Oblicza ilość czasu, który minął od czasu otwarcia firmy.
- Ustawia wartość elementu w słowniku
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 ma następujące działanie:
- 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 konwertowaniaTotalDays
właściwości zmiennejtimeInBusiness
na liczbę całkowitą. - Klasa
Convert
jest częściąSystem
przestrzeni nazw, która jest importowana automatycznie przez<ImplicitUsings>
element w pliku ContosoPizza.csproj .
- Znak jest używany do przełączania
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 kod może zawierać to, co wywołuje niegrzeczne edytowanie. 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.
Wprowadzono pierwsze zmiany na stronie Razor! W następnej lekcji dodasz nową stronę do aplikacji, aby wyświetlić listę pizz.