Udostępnij za pośrednictwem


Zbuduj aplikację bazy danych filmów (część 2 — dodaj i stwórz szkielet modelu)

Uwaga

Nie jest to najnowsza wersja tego artykułu. Aby zapoznać się z bieżącą wersją, zobacz wersję artykułu .NET 9.

Ważne

Te informacje odnoszą się do produktu w wersji wstępnej, który może zostać znacząco zmodyfikowany, zanim zostanie wydany komercyjnie. Firma Microsoft nie udziela żadnych gwarancji, jawnych lub domniemanych, w odniesieniu do informacji podanych w tym miejscu.

Aby zapoznać się z bieżącą wersją, zobacz wersję artykułu .NET 9.

Ten artykuł jest drugą częścią Blazor samouczka aplikacji bazy danych filmów, który uczy podstaw tworzenia ASP.NET Core Blazor Web App z funkcjami do zarządzania bazą danych filmów.

W tym odcinku serii poradników:

  • Klasa jest dodawana do aplikacji reprezentującej film w bazie danych.
  • Usługi i narzędzia programu Entity Framework Core (EF Core) tworzą kontekst bazy danych i bazę danych. EF Core to maper obiektowo-relacyjny (O/RM), który upraszcza dostęp do danych. Najpierw piszesz klasy modeli, a EF Core tworzy bazę danych na podstawie tych klas, co nazywa się generowaniem szkieletu.
  • Dodatkowe narzędzia tworzą szkielet interfejsu użytkownika opartego na komponentach, umożliwiającego interakcję z rekordami filmowymi w bazie danych za pośrednictwem kontekstu bazy danych.

Dodawanie modelu danych

W Eksploratorze rozwiązań kliknij prawym przyciskiem myszy na BlazorWebAppMovies projekt i wybierz Dodaj>Nowy folder. Nadaj folderowi Modelsnazwę .

Kliknij folder Models prawym przyciskiem myszy. Wybierz Dodaj>klasę. Nazwij plik Movie.cs. Użyj następującej zawartości do pliku.

Dodaj folder do projektu o nazwie Models.

Dodaj plik klasy do Models folderu o nazwie Movie.cs. Użyj następującej zawartości do pliku.

Dodaj folder do projektu o nazwie Models.

Dodaj plik klasy do Models folderu o nazwie Movie.cs. Użyj następującej zawartości do pliku.

Models/Movie.cs:

using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace BlazorWebAppMovies.Models;

public class Movie
{
    public int Id { get; set; }

    public string? Title { get; set; }

    public DateOnly ReleaseDate { get; set; }

    public string? Genre { get; set; }

    [DataType(DataType.Currency)]
    [Column(TypeName = "decimal(18, 2)")]
    public decimal Price { get; set; }
}

Klasa Movie zawiera:

  • Właściwość identyfikatora rekordu (Id), która jest wymagana przez EF Core oraz bazę danych do śledzenia rekordów. W bazie danych Id właściwość jest kluczem podstawowym rekordu bazy danych.
  • Inne właściwości opisujące aspekty filmu:
    • Tytuł (Title)
    • Data wydania (ReleaseDate)
    • Gatunek (Genre)
    • Cena (Price)

Znak zapytania przy typie string wskazuje, że właściwość może mieć wartość null (może zawierać null).

Dostawca EF Core bazy danych wybiera typy danych na podstawie typów .NET właściwości modelu. Dostawca uwzględnia również inne metadane dostarczane przez System.ComponentModel.DataAnnotations, które są zestawem klas atrybutów umieszczonych powyżej właściwości modelu w następującym formacie, gdzie {ANNOTATION} jako symbol zastępujący jest nazwą adnotacji. Możesz umieścić wiele adnotacji w tym samym wierszu oddzielonym przecinkami wewnątrz nawiasów lub umieścić wiele adnotacji w osobnych wierszach, co jest podejściem przyjętym w tej serii samouczków.

[{ANNOTATION}]

Właściwość Price w Movie pliku klasy ma dwie adnotacje danych:

[DataType(DataType.Currency)]
[Column(TypeName = "decimal(18, 2)")]
public decimal Price { get; set; }

Te adnotacje określają:

  • Właściwość zawiera typ danych dla waluty.
  • Kolumna bazy danych to liczba dziesiętna składająca się z 18 cyfr, z dwiema miejscami po przecinku.

Więcej informacji na temat adnotacji danych, w tym dodawania adnotacji danych do walidacji, znajduje się w dalszej części serii samouczków.

Wybierz Kompiluj>Kompiluj rozwiązanie z paska menu lub naciśnij F6 na klawiaturze. Potwierdź w panelu Wynik, że kompilacja zakończyła się pomyślnie.

Dodawanie pakietów NuGet i narzędzi

Aby dodać wymagane pakiety i narzędzia NuGet, wykonaj następujące polecenia interfejsu wiersza polecenia .NET w Terminalu (menu >).

Wklej wszystkie następujące polecenia w wierszu polecenia (>) terminalu. Po wklejeniu wielu poleceń zostanie wyświetlone ostrzeżenie informujące o wykonaniu wielu poleceń. Odrzuć ostrzeżenie i kontynuuj operację wklejania.

Podczas wklejania wielu poleceń wszystkie polecenia są wykonywane z wyjątkiem ostatniego. Ostatnie polecenie nie jest wykonywane, dopóki nie naciśniesz Enter na klawiaturze.

dotnet tool install --global dotnet-aspnet-codegenerator
dotnet tool install --global dotnet-ef
dotnet add package Microsoft.EntityFrameworkCore.SQLite
dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design
dotnet add package Microsoft.EntityFrameworkCore.SqlServer
dotnet add package Microsoft.EntityFrameworkCore.Tools
dotnet add package Microsoft.AspNetCore.Components.QuickGrid
dotnet add package Microsoft.AspNetCore.Components.QuickGrid.EntityFrameworkAdapter
dotnet add package Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore

Ważne

Po wykonaniu pierwszych ośmiu poleceń upewnij się, że naciśnij Enter na klawiaturze, aby wykonać ostatnie polecenie.

Uwaga

Poprzednie polecenia to polecenia .NET CLI, a polecenia .NET CLI są wykonywane po ich wprowadzeniu w środowisku PowerShell, które jest domyślną powłoką poleceń w Terminalu programu VS Code.

Zapisz plik projektu.

Powyższe polecenia dodają:

W palecie poleceń (Ctrl+Shift+P) użyj .NET: Build polecenia , aby skompilować aplikację.

Upewnij się, że aplikacja została utworzona pomyślnie.

Dodawanie pakietów NuGet i narzędzi

Aby dodać wymagane pakiety i narzędzia NuGet, wykonaj następujące polecenia .NET CLI w powłoce poleceń otwartej w katalogu głównym projektu.

Wklej wszystkie następujące polecenia w wierszu polecenia (>) powłoki poleceń. Po wklejeniu wielu poleceń zostanie wyświetlone ostrzeżenie informujące o wykonaniu wielu poleceń. Odrzuć ostrzeżenie i kontynuuj operację wklejania.

Podczas wklejania wielu poleceń wszystkie polecenia są wykonywane z wyjątkiem ostatniego. Ostatnie polecenie nie jest wykonywane, dopóki nie naciśniesz Enter na klawiaturze.

dotnet tool install --global dotnet-aspnet-codegenerator
dotnet tool install --global dotnet-ef
dotnet add package Microsoft.EntityFrameworkCore.SQLite
dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design
dotnet add package Microsoft.EntityFrameworkCore.SqlServer
dotnet add package Microsoft.EntityFrameworkCore.Tools
dotnet add package Microsoft.AspNetCore.Components.QuickGrid
dotnet add package Microsoft.AspNetCore.Components.QuickGrid.EntityFrameworkAdapter
dotnet add package Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore

Zapisz plik projektu.

Powyższe polecenia dodają:

Otwórz powłokę poleceń w folderze głównym projektu i wykonaj polecenie dotnet build.

dotnet build

Upewnij się, że aplikacja została utworzona pomyślnie.

Zbuduj szkielet modelu

W tej sekcji model Movie jest używany do tworzenia szkieletu kontekstu bazy danych oraz interfejsu użytkownika w celu zarządzania filmami w bazie danych. Platforma szkieletowa .NET to framework do generowania kodu dla aplikacji .NET. Używasz szkieletowania do szybkiego dodawania kodu bazy danych i interfejsu użytkownika, który współdziała z modelami danych.

Kliknij prawym przyciskiem myszy Components/Pages folder i wybierz Dodaj>Nowy element szkieletowy:

Nowy element szkieletowy

Po otwarciu okna dialogowego Dodaj nowy element szkieletu przejdź do Zainstalowane>Wspólne>Blazor>RazorSkładnik, a następnie wybierz Razor. Kliknij przycisk Dodaj.

CRUD to skrót od tworzenia, odczytu, aktualizacji i usuwania. Generator tworzy, edytuje, usuwa, szczegółowo opisuje oraz indeksuje komponenty aplikacji.

Element szkieletu

Ukończ okno dialogowe Dodawanie Razor składników przy użyciu programu Entity Framework (CRUD):

  • Lista rozwijana Szablon zawiera inne szablony do tworzenia, edytowania, usuwania, wyświetlania szczegółów i elementów listy. Ta lista rozwijana jest przydatna, gdy trzeba utworzyć określony typ szkieletu składnika powiązanego z klasą modelu. Pozostaw listę rozwijaną Szablon ustawioną na CRUD, aby utworzyć szkielet pełnego zestawu komponentów.
  • Z listy rozwijanej Klasa modelu wybierz pozycję Film (BlazorWebAppFilms.Models).
  • W przypadku klasy DbContext wybierz przycisk + (znak plus).
  • W oknie dialogowym Dodawanie kontekstu danych generowana jest nazwa klasy . Użyj wartości domyślnej wygenerowanej. Kliknij przycisk Dodaj.
  • Po zamknięciu okna dialogowego modelu lista rozwijana Dostawca bazy danych jest domyślnie ustawiona na SQL Server. Podczas tworzenia aplikacji w przyszłości możesz wybrać odpowiedniego dostawcę dla używanej bazy danych. Dostępne opcje to SQLite, PostgreSQL i Azure Cosmos DB. Pozostaw listę rozwijaną Dostawca bazy danych ustawioną na SQL Server.
  • Wybierz Dodaj.

Dodawanie Razor składników przy użyciu okna dialogowego EF CRUD

W Terminalu (menu Terminal>Nowy Terminal) otwartym w katalogu głównym projektu, wykonaj następujące polecenie. SqLite jest używana jako baza danych dla użytkowników przyjmujących narzędzia programu VS Code dla tej serii samouczków.

dotnet aspnet-codegenerator blazor CRUD -dbProvider sqlite -dc BlazorWebAppMovies.Data.BlazorWebAppMoviesContext -m Movie -outDir Components/Pages

CRUD to skrót od tworzenia, odczytu, aktualizacji i usuwania. Generator blazor z szablonem CRUD tworzy komponenty do tworzenia, edytowania, usuwania, przeglądania detali i indeksu dla aplikacji.

W poniższej tabeli przedstawiono opcje generatora kodu ASP.NET Core używane w poprzednim poleceniu:

  • -dbProvider: Dostawca bazy danych do użycia. Opcje obejmują sqlserver (ustawienie domyślne), sqlite, cosmos, postgres.
  • -dc: Klasa DbContext do użycia, włączając przestrzeń nazw (BlazorWebAppMovies.Data).
  • -m: nazwa modelu.
  • -outDir: katalog wyjściowy wygenerowanych składników. Folder jest tworzony na podstawie nazwy modelu w katalogu wyjściowym w celu przechowywania składników (na przykład MoviePages w tym przypadku).

W powłoce poleceń otwartej w folderze głównym projektu wykonaj następujące polecenie. SQLite jest używana jako baza danych dla użytkowników korzystających z narzędzi interfejsu wiersza polecenia platformy .NET w tym kursie.

dotnet aspnet-codegenerator blazor CRUD -dbProvider sqlite -dc BlazorWebAppMovies.Data.BlazorWebAppMoviesContext -m Movie -outDir Components/Pages

CRUD to skrót od tworzenia, odczytu, aktualizacji i usuwania. Generator blazor z szablonem CRUD tworzy komponenty do tworzenia, edytowania, usuwania, przeglądania detali i indeksu dla aplikacji.

W poniższej tabeli przedstawiono opcje generatora kodu ASP.NET Core używane w poprzednim poleceniu:

  • -dbProvider: Dostawca bazy danych do użycia. Opcje obejmują sqlserver (ustawienie domyślne), sqlite, cosmos, postgres.
  • -dc: Klasa DbContext do użycia, włączając przestrzeń nazw (BlazorWebAppMovies.Data).
  • -m: nazwa modelu.
  • -outDir: katalog wyjściowy wygenerowanych składników. Folder jest tworzony na podstawie nazwy modelu w katalogu wyjściowym w celu przechowywania składników (na przykład MoviePages w tym przypadku).

Plik appsettings.json jest aktualizowany przy użyciu parametry połączenia używanego do nawiązywania połączenia z lokalną bazą danych. W poniższym przykładzie {CONNECTION STRING} jest ciągiem połączenia automatycznie generowanym przez szkielet.

"ConnectionStrings": {
  "BlazorWebAppMoviesContext": "{CONNECTION STRING}"
}

Ostrzeżenie

Nie przechowuj tajnych informacji aplikacji, parametrów połączenia, poświadczeń, haseł, osobistych numerów identyfikacyjnych (PIN), prywatnego kodu C#/.NET ani kluczy prywatnych i tokenów w kodzie po stronie klienta, który jest zawsze niebezpieczny. W środowiskach testowych/przejściowych i produkcyjnych kod po stronie Blazor serwera i internetowe interfejsy API powinny używać bezpiecznych przepływów uwierzytelniania, które unikają utrzymywania poświadczeń w kodzie projektu lub plikach konfiguracji. Poza lokalnymi testami programistycznymi zalecamy unikanie używania zmiennych środowiskowych do przechowywania poufnych danych, ponieważ zmienne środowiskowe nie są najbezpieczniejszym podejściem. W przypadku lokalnego testowania programistycznego narzędzie Secret Manager jest zalecane do zabezpieczania poufnych danych. Aby uzyskać więcej informacji, zobacz Bezpieczne utrzymywanie poufnych danych i poświadczeń.

Pliki utworzone i zaktualizowane za pomocą generowania szablonów

Proces szkieletowania tworzy następujące pliki składowe oraz plik kontekstu klasy bazy danych filmów:

  • Components/Pages/MoviePages
    • Create.razor: Tworzy nowe jednostki filmu.
    • Delete.razor: usuwa jednostkę filmu.
    • Details.razor: Pokazuje szczegóły obiektu filmu.
    • Edit.razor: Aktualizuje jednostkę filmu.
    • Index.razor: Wyświetla listę jednostek (rekordów) filmów w bazie danych.
  • Data/BlazorWebAppMoviesContext.cs: plik kontekstu bazy danych (DbContext).

Pliki składników w folderze MoviePages zostały szczegółowo opisane w następnej części tego samouczka. Kontekst bazy danych został opisany w dalszej części tego artykułu.

Jeśli folder MoviePages i zasoby nie są obecne po utworzeniu szkieletu, wróć do sekcji Szkielet modelu i utwórz ponownie szkielet modelu Movie, upewniając się, że wybierasz składnik Razor używający szkieletora Entity Framework (CRUD) w obszarze Zainstalowany>wspólny składnik>Blazor>Razor w oknie dialogowym Dodawanie nowego elementu szkieletu .

ASP.NET Core jest opracowany z użyciem wstrzykiwania zależności, które jest wzorcem projektowym oprogramowania w celu osiągnięcia odwrócenia kontroli (IoC) między klasami a ich zależnościami. Usługi, takie jak EF Core kontekst bazy danych, są rejestrowane za pomocą wstrzykiwania zależności podczas uruchamiania aplikacji. Te usługi są wstrzykiwane do Razor komponentów, aby mogły być używane przez te komponenty.

Składnik QuickGrid jest składnikiem Razor do wydajnego wyświetlania danych w formie tabelarycznej. Osoba odpowiedzialna za rusztowania umieszcza komponent QuickGrid w komponencie Index (Components/Pages/Index.razor), aby wyświetlić obiekty filmowe. Wywołanie AddQuickGridEntityFrameworkAdapter kolekcji usług dodaje adapter umożliwiający EF Core rozpoznawanie QuickGridwystąpień dostarczonych EF Core przez dostawcę IQueryable<T> i asynchroniczne rozwiązywanie zapytań bazy danych w celu zwiększenia wydajności.

W połączeniu z UseDeveloperExceptionPage, AddDatabaseDeveloperPageExceptionFilter przechwytuje wyjątki związane z bazą danych, które można rozwiązać za pomocą migracji Entity Framework. W przypadku wystąpienia tych wyjątków odpowiedź HTML jest generowana ze szczegółowymi informacjami na temat możliwych akcji w celu rozwiązania problemu.

Następujący kod jest dodawany do Program pliku przez szkielet:

builder.Services.AddDbContextFactory<BlazorWebAppMoviesContext>(options =>
    options.UseSqlServer(
        builder.Configuration.GetConnectionString("BlazorWebAppMoviesContext") ?? 
        throw new InvalidOperationException(
            "Connection string 'BlazorWebAppMoviesContext' not found.")));

builder.Services.AddQuickGridEntityFrameworkAdapter();

builder.Services.AddDatabaseDeveloperPageExceptionFilter();

Tworzenie początkowego schematu bazy danych przy użyciu EF Corefunkcji migracji

Funkcja migracji w programie EF Core:

  • Tworzy początkowy schemat bazy danych.
  • Przyrostowo aktualizuje schemat bazy danych, aby zachować synchronizację z modelem danych aplikacji. Istniejące dane w bazie danych są zachowywane.

EF Core stosuje podejście code-first do projektowania i konserwacji bazy danych:

  • Klasy jednostek są tworzone i aktualizowane najpierw w aplikacji.
  • Baza danych jest tworzona i aktualizowana na podstawie klas jednostek aplikacji.

Jest to odwrotna procedura podejścia opartego na bazie danych, w której baza danych została zaprojektowana, skompilowana i zaktualizowana jako pierwsza. Wdrożenie EF Core"code-first" ma na celu przyspieszenie procesu tworzenia aplikacji, ponieważ większość trudnych i czasochłonnych procedur tworzenia i zarządzania bazami danych jest obsługiwana w sposób przejrzysty przez narzędzia EF Core, dzięki czemu można skupić się na tworzeniu aplikacji.

W tej sekcji usługi połączone programu Visual Studio są używane do wydawania EF Core poleceń, które:

  • Dodaj migrację początkową.
  • Zaktualizuj bazę danych przy użyciu migracji początkowej.

W Eksplorator rozwiązań kliknij dwukrotnie pozycję Połączone usługi. W obszarze SQL Server Express LocalDB w sekcji Zależności usługi, wybierz wielokropek (...), a następnie Dodaj migrację:

Interfejs użytkownika przedstawiający opcję

Nadaj migracji nazwę Migracja o nazwie InitialCreate, która opisuje migrację. Poczekaj na załadowanie kontekstu bazy danych w polu Nazwy klas DbContext, co może potrwać kilka sekund. Wybierz pozycję Zakończ , aby utworzyć migrację:

Dodaj nowe okno dialogowe migracji EF, wyświetlając nazwę migracji i kontekst bazy danych.

Po zakończeniu operacji wybierz przycisk Zamknij.

Dodanie migracji generuje kod w celu utworzenia początkowego schematu bazy danych. Schemat jest oparty na modelu określonym w pliku DbContext.

Ponownie wybierz wielokropek (...), a następnie polecenie Aktualizuj bazę danych :

Interfejs użytkownika przedstawiający opcję

Otworzy się okno dialogowe Aktualizowanie bazy danych z najnowszą migracją. Poczekaj na zaktualizowanie pola Nazwy klas DbContext i załadowanie wcześniejszych migracji, co może potrwać kilka sekund. Wybierz przycisk Zakończ:

Aktualizowanie bazy danych przy użyciu najnowszego okna dialogowego migracji z kontekstem bazy danych

Polecenie aktualizacji bazy danych wykonuje migracje metod Up, które nie zostały zastosowane w pliku kodu migracji utworzonym przez narzędzie szkieletowe. W takim przypadku polecenie wykonuje metodę Up w Migrations/{TIME STAMP}_InitialCreate.cs pliku, która tworzy bazę danych. Symbol {TIME STAMP} to znacznik czasu.

Po zakończeniu operacji wybierz przycisk Zamknij.

Kliknij prawym przyciskiem myszy BlazorWebAppMovies plik projektu (BlazorWebAppMovies.csproj) i wybierz polecenie Otwórz w zintegrowanym terminalu.

Otwiera się okno terminalu z wierszem polecenia w katalogu projektu, który zawiera plik oraz plik projektu aplikacji .

Wykonaj następujące polecenie .NET CLI, aby dodać migrację początkową. Polecenie migrations generuje kod w celu utworzenia początkowego schematu bazy danych. Schemat jest oparty na modelu określonym w pliku DbContext. Argument InitialCreate służy do nazywania migracji. Można użyć dowolnej nazwy, ale konwencja polega na użyciu nazwy, która opisuje migrację.

dotnet ef migrations add InitialCreate

Po zakończeniu poprzedniego polecenia zaktualizuj bazę danych poleceniem update. Polecenie update wykonuje metodę Up na migracjach, które nie zostały zastosowane w pliku kodu migracji utworzonym przez szkielet. W tym przypadku polecenie wykonuje migracje metod w pliku Up, co powoduje utworzenie bazy danych. Symbol {TIME STAMP} to znacznik czasu.

dotnet ef database update

W folderze głównym projektu wykonaj następujące polecenie .NET CLI, aby dodać migrację inicjalną. Polecenie migrations generuje kod w celu utworzenia początkowego schematu bazy danych. Schemat jest oparty na modelu określonym w pliku DbContext. Argument InitialCreate służy do nazywania migracji. Można użyć dowolnej nazwy, ale konwencja polega na użyciu nazwy, która opisuje migrację.

dotnet ef migrations add InitialCreate

Po zakończeniu poprzedniego polecenia zaktualizuj bazę danych poleceniem update. Polecenie update wykonuje metodę Up na migracjach, które nie zostały zastosowane w pliku kodu migracji utworzonym przez szkielet. W tym przypadku polecenie wykonuje migracje metod w pliku Up, co powoduje utworzenie bazy danych. Symbol {TIME STAMP} to znacznik czasu.

dotnet ef database update

Kontekst BlazorWebAppMoviesContext bazy danych (Data/BlazorWebAppMoviesContext.cs):

  • Pochodzi z Microsoft.EntityFrameworkCore.DbContext.
  • Określa, które jednostki są uwzględnione w modelu danych.
  • Koordynuje funkcjonalność EF Core, taką jak operacje CRUD, dla modelu Movie.
  • DbSet<TEntity> Zawiera właściwość dla zestawu encji Movie. W terminologii ef zestaw jednostek zwykle odpowiada tabeli bazy danych. Jednostka odpowiada wierszowi w tabeli.

Nazwa łańcucha połączenia jest przekazywana do kontekstu przez wywołanie metody na obiekcie DbContextOptions. W przypadku rozwoju lokalnego parametry połączenia są odczytywane z pliku appsettings.json.

Ostrzeżenie

Nie przechowuj tajnych informacji aplikacji, parametrów połączenia, poświadczeń, haseł, osobistych numerów identyfikacyjnych (PIN), prywatnego kodu C#/.NET ani kluczy prywatnych i tokenów w kodzie po stronie klienta, który jest zawsze niebezpieczny. W środowiskach testowych/przejściowych i produkcyjnych kod po stronie Blazor serwera i internetowe interfejsy API powinny używać bezpiecznych przepływów uwierzytelniania, które unikają utrzymywania poświadczeń w kodzie projektu lub plikach konfiguracji. Poza lokalnymi testami programistycznymi zalecamy unikanie używania zmiennych środowiskowych do przechowywania poufnych danych, ponieważ zmienne środowiskowe nie są najbezpieczniejszym podejściem. W przypadku lokalnego testowania programistycznego narzędzie Secret Manager jest zalecane do zabezpieczania poufnych danych. Aby uzyskać więcej informacji, zobacz Bezpieczne utrzymywanie poufnych danych i poświadczeń.

Testowanie aplikacji

Uruchom aplikację.

Dodaj /movies do adresu URL na pasku adresu przeglądarki, aby przejść do strony filmów Index .

Po załadowaniu strony Index, wybierz link Create New.

Dodaj film do bazy danych. W poniższym przykładzie klasyczny film science-fiction The Matrix (©1999 Warner Bros. Entertainment Inc.) został dodany jako pierwszy wpis filmowy. Wybranie Create przycisku powoduje dodanie filmu do bazy danych:

Dodawanie filmu Macierz do bazy danych za pomocą składnika

Po wybraniu Create przycisku dane filmu są publikowane na serwerze i zapisywane w bazie danych.

W wersji .NET 9, debuger Visual Studio może zatrzymać się w linii NavigationException, która nawiguję z powrotem do strony Index.

Regresja debugera: w wywołaniu NavigateTo zostaje zgłoszony wyjątek nawigacji.

Aby rozwiązać ten problem:

  1. Usuń zaznaczenie pola wyboru dla opcji Przerwanie, gdy ten typ wyjątku jest obsługiwany przez użytkownika.
  2. Wybierz przycisk Kontynuuj na pasku menu, aby kontynuować wykonywanie.

Wyjątek nie jest zgłaszany, gdy metoda NavigateTo jest wykonywana w dalszej części serii samouczków.

W programie .NET 10 lub nowszym:

  • Aktualizacje sposobu, w jaki NavigateTo zarządza nawigacją, nie powodują nigdy NavigationException.
  • Debuger programu Visual Studio nie przerywa przetwarzania NavigateTo wywołań z prawidłowym punktem końcowym.

Gdy aplikacja powróci do Index strony, zostanie wyświetlona dodana jednostka:

Film Macierz pokazany na stronie

Edit Otwórz stronę. Edytuj rekord filmu i zapisz zmiany.

Delete Sprawdź stronę, ale nie usuwaj filmu Macierz z bazy danych. Obecność tego rekordu filmu jest cenna w następnym kroku samouczka, gdzie analizowany jest generowany kod HTML i ulepsza się wyświetlane dane. Jeśli film został już usunięty, dodaj film do bazy danych ponownie przy użyciu Create strony przed przejściem do następnej części serii samouczków.

Zatrzymaj aplikację

Zatrzymaj aplikację przy użyciu jednej z następujących metod:

  • Zamknij okno przeglądarki.
  • W programie Visual Studio, albo:
    • Użyj przycisku Zatrzymaj na pasku menu programu Visual Studio:

      Przycisk zatrzymania w pasku menu programu Visual Studio

    • Naciśnij Shift+F5 na klawiaturze.

Zatrzymaj aplikację, korzystając z następującego podejścia:

  1. Zamknij okno przeglądarki.
  2. W programie VS Code wykonaj jedną z następujących czynności:
    • Z menu Uruchom wybierz pozycję Zatrzymaj debugowanie.
    • Naciśnij Shift+F5 na klawiaturze.

Zatrzymaj aplikację, korzystając z następującego podejścia:

  1. Zamknij okno przeglądarki.
  2. W konsoli naciśnij Ctrl+C.

Rozwiązywanie problemów przy użyciu ukończonego przykładu

Jeśli napotkasz problem podczas wykonywania samouczka, którego nie można rozwiązać w tekście, porównaj kod z ukończonym projektem w Blazor repozytorium przykładów:

Blazor przykładowe repozytorium GitHub (dotnet/blazor-samples)

Wybierz folder najnowszej wersji. Przykładowy folder dla projektu tego samouczka nosi nazwę BlazorWebAppMovies.

Dodatkowe zasoby

EF Core dokumentacja:

Matrix jest prawem autorskim Warner Bros. Entertainment Inc.

Następne kroki