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 zapoznać się z wprowadzeniem do wideo, zobacz Entity Framework Core dla początkujących.

Jeśli dopiero zaczynasz programowanie na platformie ASP.NET Core i nie masz pewności, które rozwiązanie internetowego interfejsu użytkownika platformy ASP.NET Core najlepiej pasuje do Twoich potrzeb, zobacz Wybór interfejsu użytkownika platformy ASP.NET Core.

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

Wymagania wstępne

Program Visual Studio

• Program Visual Studio 2022 (wersja zapoznawcza ) z obciążeniem tworzenia aplikacji internetowych i ASP.NET.

  

Visual Studio Code

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

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

Program Visual Studio

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

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

• W oknie dialogowym Konfigurowanie nowego projektu wprowadź wartość RazorPagesMovie w polu Nazwa projektu. Ważne jest, aby nazwać projekt RazorPagesFilm, w tym dopasowanie liter, więc przestrzenie nazw będą zgodne podczas kopiowania i wklejania przykładowego kodu.

• Wybierz Dalej.

• W oknie dialogowym Dodatkowe informacje:

  • Wybierz pozycję .NET 9.0 (wersja zapoznawcza).
  • Sprawdź: nie używaj instrukcji najwyższego poziomu jest niezaznaczone.

• Wybierz pozycję 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 Pages w folderze RazorPagesFilm .

  Polecenie code otwiera folder RazorPagesFilm 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 pozycję 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ę

Program Visual Studio

Wybierz pozycję RazorPagesFilm w Eksplorator rozwiązań, a następnie naciśnij Ctrl+F5, aby uruchomić aplikację bez debugera.

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 przeglądarce 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 przeglądarce Firefox, zobacz Błąd certyfikatu przeglądarki Firefox SEC_ERROR_INADEQUATE_KEY_USAGE.

W programie Visual Studio Code naciśnij Ctrl+F5 (Windows) lub ⌘+F5 (macOS), aby uruchomić aplikację bez debugowania.

W wierszu polecenia Wybierz debuger wybierz pozycję C#.

W wierszu polecenia Wybierz konfigurację uruchamiania wybierz pozycję C#: RazorPagesFormatowanie [https] RazorPagesFilm.

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 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 platformy ASP.NET Core.

appsettings.json

Zawiera dane konfiguracji, takie jak parametry połączenia. Aby uzyskać więcej informacji, zobacz Konfiguracja na platformie 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 wstępnie skonfigurowane wartości domyślne, dodaj Razor obsługę stron do kontenera Wstrzykiwanie zależności (DI) i kompiluje 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. Więcej informacji można znaleźć w temacie Używanie wielu środowisk na platformie 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 na platformie 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(); : zoptymalizuj dostarczanie zasobów statycznych w aplikacji, takich jak HTML, CSS, obrazy i javaScript, które mają być obsługiwane. Aby uzyskać więcej informacji, zobacz Co nowego w programie ASP.NET Core 9.0.
• 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ć).

Następne kroki

Dalej: Dodawanie modelu