Samouczek: rozpoczynanie pracy ze stronami Razor w programie ASP.NET Core

Autor: Rick Anderson

Jest to pierwszy samouczek serii, który uczy podstaw tworzenia aplikacji internetowej ASP.NET Core Razor Pages.

Aby zapoznać się z bardziej zaawansowanym wprowadzeniem przeznaczonym dla deweloperów, którzy znają kontrolery i widoki, zobacz Wprowadzenie do Razor stron. Aby obejrzeć wprowadzenie wideo, zobacz Entity Framework Core dla początkujących.

Jeśli dopiero zaczynasz programować ASP.NET Core i nie masz pewności, które rozwiązanie ASP.NET Core internetowego interfejsu użytkownika najlepiej pasuje do Twoich potrzeb, zobacz Wybieranie interfejsu użytkownika podstawowego ASP.NET.

Na końcu tego samouczka będziesz mieć aplikację Razor internetową Pages, która zarządza bazą danych filmów.

Prerequisites

• Program Visual Studio 2022 z pakietem roboczym ASP.NET i tworzeniem aplikacji internetowych .

  

Visual Studio Code

• Visual Studio Code
• Zestaw deweloperski języka C# dla programu Visual Studio Code
• Zestaw SDK platformy .NET 9

Możesz postępować zgodnie z instrukcjami programu Visual Studio Code w systemach macOS, Linux lub Windows. Zmiany mogą być wymagane, jeśli używasz zintegrowanego środowiska projektowego (IDE) innego niż Visual Studio Code.

Tworzenie Razor aplikacji internetowej Pages

• Uruchom program Visual Studio i wybierz pozycję Nowy projekt.

• W oknie dialogowym Tworzenie nowego projektu wybierz pozycję ASP.NET Core Web App (Razor strony)>Dalej.

• W oknie dialogowym Konfigurowanie nowego projektu wprowadź wartość RazorPagesMovie w polu Nazwa projektu. Ważne jest, aby nazwać projekt RazorPagesMovie, zachowując dokładnie taki sam sposób pisania wielkich i małych liter, aby przestrzenie nazw były zgodne podczas kopiowania i wklejania przykładowego kodu.

• Wybierz Dalej.

• W oknie dialogowym Dodatkowe informacje :

  • Wybierz .NET 9.0.
  • Sprawdź: Nie używaj instrukcji najwyższego poziomu nie jest zaznaczone.

• Wybierz Utwórz.

  

  Zostanie utworzony następujący projekt startowy:

  

Aby uzyskać alternatywne podejścia do tworzenia projektu, zobacz Tworzenie nowego projektu w programie Visual Studio.

Visual Studio Code

W tym samouczku założono znajomość programu VS Code. Aby uzyskać więcej informacji, zobacz Wprowadzenie do programu VS Code.

• Wybierz pozycję Nowy terminal z menu Terminal , aby otworzyć zintegrowany terminal.

• Przejdź do katalogu (cd), który będzie zawierać projekt.

• Uruchom następujące polecenia:

  dotnet new webapp -o RazorPagesMovie
  code -r RazorPagesMovie
  

  Polecenie dotnet new tworzy nowy Razor projekt RazorPages w folderze RazorPagesMovie.

  Polecenie code otwiera folder RazorPagesMovie w bieżącym wystąpieniu programu Visual Studio Code.

Program Visual Studio Code może wyświetlić okno dialogowe z pytaniem: Czy ufasz autorom plików w tym folderze?

• Jeśli ufasz wszystkim plikom w folderze nadrzędnym, wybierz pozycję Ufaj autorom wszystkich plików w folderze nadrzędnym.
• Wybierz pozycję Tak. Ufam autorom, ponieważ folder projektu zawiera pliki wygenerowane przez platformę .NET.
• Gdy program Visual Studio Code zażąda dodania zasobów do kompilowania i debugowania projektu, wybierz pozycję Tak. Jeśli program Visual Studio Code nie oferuje dodawania zasobów kompilacji i debugowania, wybierz Wyświetl>Paletę poleceń i wpisz ".NET" w polu wyszukiwania. Z listy poleceń wybierz .NET: Generate Assets for Build and Debug polecenie .

Program Visual Studio Code dodaje .vscode folder z wygenerowanymi launch.json plikami i tasks.json .

Uruchom aplikację

Wybierz RazorPagesMovie w Eksploratorze rozwiązań, a następnie naciśnij Ctrl+F5, aby uruchomić aplikację bez debuggera.

Program Visual Studio wyświetla następujące okno dialogowe, gdy projekt nie jest jeszcze skonfigurowany do używania protokołu SSL:

Wybierz pozycję Tak , jeśli ufasz certyfikatowi SSL usług IIS Express.

Zostanie wyświetlone następujące okno dialogowe:

Wybierz pozycję Tak, jeśli wyrażasz zgodę na zaufanie certyfikatowi programistycznemu.

Aby uzyskać informacje na temat zaufania do przeglądarki Firefox, zobacz Błąd certyfikatu przeglądarki Firefox SEC_ERROR_INADEQUATE_KEY_USAGE.

Visual Studio:

• Uruchamia aplikację, która uruchamia Kestrel serwer.
• Uruchamia domyślną przeglądarkę pod adresem https://localhost:<port>, w której jest wyświetlany interfejs użytkownika aplikacji. <port> to losowy port przypisany podczas tworzenia aplikacji.

Zamknij okno przeglądarki.

Visual Studio Code

• Ufaj certyfikatowi programistycznemu HTTPS, uruchamiając następujące polecenie:

  dotnet dev-certs https --trust
  

  Poprzednie polecenie wyświetla następujące okno dialogowe, pod warunkiem, że certyfikat nie był wcześniej zaufany:

  

• Wybierz pozycję Tak, jeśli wyrażasz zgodę na zaufanie certyfikatowi programistycznemu.

  Aby uzyskać więcej informacji, zobacz sekcję Trust the ASP.NET Core HTTPS development certificate (Ufaj certyfikatowi programistycznemu ASP.NET Core HTTPS ) artykułu Wymuszanie protokołu SSL .

Aby uzyskać informacje na temat zaufania do przeglądarki Firefox, zobacz Błąd certyfikatu przeglądarki Firefox SEC_ERROR_INADEQUATE_KEY_USAGE.

W programie Visual Studio Code naciśnij Ctrl+F5, aby uruchomić aplikację bez debugowania.

W wierszu polecenia Wybierz debuger wybierz pozycję C#.

W oknie monitu Wybierz konfigurację uruchamiania, wybierz pozycję C#: RazorPagesMovie [https] RazorPagesMovie.

Domyślna przeglądarka została uruchomiona przy użyciu następującego adresu URL: https://localhost:<port> gdzie <port> to losowo wygenerowany numer portu.

Zamknij okno przeglądarki.

W programie Visual Studio Code z menu Uruchom wybierz pozycję Zatrzymaj debugowanie lub naciśnij Shift+F5 , aby zatrzymać aplikację.

Sprawdzanie plików projektu

Poniższe sekcje zawierają omówienie głównych folderów i plików projektu, z którymi będziesz pracować w kolejnych samouczkach.

Folder Pages

Zawiera Razor strony i pliki pomocnicze. Każda Razor strona jest parą plików:

• .cshtml Plik, który zawiera znaczniki HTML z kodem C# przy użyciu Razor składni.
• .cshtml.cs Plik, który zawiera kod C#, który obsługuje zdarzenia strony.

Pliki pomocnicze mają nazwy rozpoczynające się od podkreślenia. Na przykład plik konfiguruje elementy interfejsu _Layout.cshtml użytkownika wspólne dla wszystkich stron. _Layout.cshtml Konfiguruje menu nawigacji w górnej części strony i powiadomienie o prawach autorskich w dolnej części strony. Aby uzyskać więcej informacji, zobacz Layout in ASP.NET Core (Układ w programie ASP.NET Core).

folder wwwroot

Zawiera statyczne zasoby, takie jak pliki HTML, pliki JavaScript i pliki CSS. Aby uzyskać więcej informacji, zobacz Pliki statyczne w programie ASP.NET Core.

appsettings.json

Zawiera dane konfiguracji, takie jak parametry połączenia. Aby uzyskać więcej informacji, zobacz Configuration in ASP.NET Core (Konfiguracja w programie ASP.NET Core).

Program.cs

Zawiera następujący kod:

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseRouting();

app.UseAuthorization();

app.MapStaticAssets();
app.MapRazorPages();

app.Run();

Następujące wiersze kodu w tym pliku tworzą WebApplicationBuilder z wstępnie skonfigurowanymi wartościami domyślnymi, dodają Razor obsługę stron do kontenera Wstrzykiwania zależności (DI) i budują aplikację.

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();

var app = builder.Build();

Strona wyjątku dewelopera jest domyślnie włączona i zawiera przydatne informacje na temat wyjątków. Aplikacje produkcyjne nie powinny być uruchamiane w trybie programowania, ponieważ strona wyjątku dewelopera może wyciekać poufnych informacji.

Poniższy kod ustawia punkt końcowy wyjątku na /Error i włącza protokół HSTS (HTTP Strict Transport Security Protocol), gdy aplikacja nie jest uruchomiona w trybie programowania:

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

Na przykład powyższy kod jest uruchamiany, gdy aplikacja jest w trybie produkcyjnym lub testowym. Aby uzyskać więcej informacji, zobacz Use multiple environments in ASP.NET Core (Używanie wielu środowisk w programie ASP.NET Core).

Poniższy kod umożliwia korzystanie z różnych oprogramowania pośredniczącego:

• app.UseHttpsRedirection(); : przekierowuje żądania HTTP do protokołu HTTPS.
• app.UseRouting(); : dodaje trasę pasującą do potoku oprogramowania pośredniczącego. Aby uzyskać więcej informacji, zobacz Routing w ASP.NET Core.
• app.UseAuthorization(); : autoryzuje użytkownika do uzyskiwania dostępu do bezpiecznych zasobów. Ta aplikacja nie używa autoryzacji, dlatego ten wiersz może zostać usunięty.
• app.MapRazorPages();: konfiguruje routing punktów końcowych dla Razor stron.
• app.MapStaticAssets(); : optymalizowanie dostarczania zasobów statycznych w aplikacji, takich jak HTML, CSS, obrazy i JavaScript. Aby uzyskać więcej informacji, zobacz Co nowego w programie ASP.NET Core na platformie .NET 9.
• app.Run(); : uruchamia aplikację.

Rozwiązywanie problemów z ukończonym przykładem

Jeśli napotkasz problem, nie możesz go rozwiązać, porównaj kod z ukończonym projektem. Wyświetl lub pobierz ukończony projekt (jak pobrać).

Dalsze kroki

Dalej: Dodawanie modelu