Samouczek: wprowadzenie do Razor stron w ASP.NET CoreTutorial: Get started with Razor Pages in ASP.NET Core

Autor: Rick AndersonBy Rick Anderson

Jest to pierwszy samouczek dotyczący serii, który uczy się podstaw tworzenia Razor aplikacji sieci web ASP.NET Core Pages.This is the first tutorial of a series that teaches the basics of building an ASP.NET Core Razor Pages web app.

Aby uzyskać bardziej zaawansowane wprowadzenie do deweloperów, którzy znają kontrolery i widoki, zobacz wprowadzenie do Razor stron.For a more advanced introduction aimed at developers who are familiar with controllers and views, see Introduction to Razor Pages.

Na końcu serii będziesz mieć aplikację, która zarządza bazą danych filmów.At the end of the series, you'll have an app that manages a database of movies.

Wyświetlanie lub Pobieranie przykładowego kodu (jak pobrać).View or download sample code (how to download).

W tym samouczku zostały wykonane następujące czynności:In this tutorial, you:

  • CreateRazoraplikacja internetowa stron.Create a Razor Pages web app.
  • Uruchom aplikację.Run the app.
  • Przejrzyj pliki projektu.Examine the project files.

Na końcu tego samouczka będziesz mieć Razor aplikację sieci Web strony roboczej, którą można ulepszyć w kolejnych samouczkach.At the end of this tutorial, you'll have a working Razor Pages web app that you'll enhance in later tutorials.

Strona główna lub:: No-Loc (index)::: Page

Wymagania wstępnePrerequisites

CreateRazoraplikacja internetowa stronCreate a Razor Pages web app

  1. Uruchom program Visual Studio i wybierz Create Nowy projekt.Start Visual Studio and select Create a new project. Aby uzyskać więcej informacji, zobacz Create Nowy projekt w programie Visual Studio.For more information, see Create a new project in Visual Studio.

    ::: No-Loc (Create)::: nowy projekt z okna uruchamiania

  2. W oknie dialogowym Create Nowy projekt wybierz pozycję ASP.NET Core aplikacja sieci Web, a następnie wybierz przycisk dalej.In the Create a new project dialog, select ASP.NET Core Web Application, and then select Next.

    Nowa aplikacja sieci Web ASP.NET Core

  3. W oknie dialogowym Konfigurowanie nowego projektu wprowadź wartość RazorPagesMovie w polu Nazwa projektu.In the Configure your new project dialog, enter RazorPagesMovie for Project name. Ważne jest, aby nazwa Razor PagesMovie projektu, w tym pasujące do wielkości liter, więc przestrzenie nazw są zgodne podczas kopiowania i wklejania przykładowego kodu.It's important to name the project RazorPagesMovie, including matching the capitalization, so the namespaces will match when you copy and paste example code.

  4. Wybierz pozycję Create.Select Create.

    Nowa aplikacja sieci Web ASP.NET Core

  5. W oknie dialogowym Create Nowa aplikacja sieci Web ASP.NET Core wybierz pozycję:In the Create a new ASP.NET Core web application dialog, select:

    1. Platformy .NET Core i ASP.NET Core 5,0 na liście rozwijanej..NET Core and ASP.NET Core 5.0 in the dropdowns.
    2. Aplikacja sieci Web.Web Application.
    3. Create.Create.

    Nowa aplikacja sieci Web ASP.NET Core

    Tworzony jest następujący projekt początkowy:The following starter project is created:

    Eksplorator rozwiązań

Uruchamianie aplikacjiRun the app

  • Naciśnij klawisze CTRL + F5, aby uruchomić bez debugera.Press Ctrl+F5 to run without the debugger.

    Program Visual Studio wyświetla następujące okno dialogowe:Visual Studio displays the following dialog:

    Ten projekt jest skonfigurowany do korzystania z protokołu SSL.

    Wybierz opcję tak , jeśli ufasz certyfikatowi IIS Express protokołu SSL.Select Yes if you trust the IIS Express SSL certificate.

    Wyświetlane jest następujące okno dialogowe:The following dialog is displayed:

    Okno dialogowe ostrzeżenia o zabezpieczeniach

    Wybierz opcję tak , jeśli zgadzasz się ufać certyfikatowi Deweloperskiemu.Select Yes if you agree to trust the development certificate.

    Aby uzyskać informacje na temat zaufania do przeglądarki Firefox, zobacz firefox SEC_ERROR_INADEQUATE_KEY_USAGE Certificate Error.For information on trusting the Firefox browser, see Firefox SEC_ERROR_INADEQUATE_KEY_USAGE certificate error.

    Program Visual Studio jest uruchamiany IIS Express i uruchomi aplikację.Visual Studio starts IIS Express and runs the app. Na pasku adresu są wyświetlane inne elementy localhost:port# , takie jak example.com .The address bar shows localhost:port# and not something like example.com. Wynika to z tego, że localhost jest standardową nazwą hosta dla komputera lokalnego.That's because localhost is the standard hostname for the local computer. Host lokalny obsługuje tylko żądania sieci Web z komputera lokalnego.Localhost only serves web requests from the local computer. Podczas tworzenia projektu internetowego w programie Visual Studio dla serwera internetowego jest używany losowy port.When Visual Studio creates a web project, a random port is used for the web server.

Sprawdzanie plików projektuExamine the project files

Poniżej przedstawiono Omówienie folderów i plików projektu głównego, z których będziesz korzystać w kolejnych samouczkach.Here's an overview of the main project folders and files that you'll work with in later tutorials.

Folder stronPages folder

Zawiera Razor strony i pliki pomocnicze.Contains Razor pages and supporting files. Każda Razor strona to para plików:Each Razor page is a pair of files:

  • Plik . cshtml , który zawiera znaczniki HTML z kodem C# używając Razor składni.A .cshtml file that has HTML markup with C# code using Razor syntax.
  • Plik . cshtml.cs , który ma kod C#, który obsługuje zdarzenia strony.A .cshtml.cs file that has C# code that handles page events.

Pliki pomocnicze mają nazwy zaczynające się od znaku podkreślenia.Supporting files have names that begin with an underscore. Na przykład plik _Layout. cshtml służy do konfigurowania elementów interfejsu użytkownika wspólnych dla wszystkich stron.For example, the _Layout.cshtml file configures UI elements common to all pages. Ten plik konfiguruje menu nawigacji w górnej części strony i informacje o prawach autorskich w dolnej części strony.This file sets up the navigation menu at the top of the page and the copyright notice at the bottom of the page. Aby uzyskać więcej informacji, zobacz Układ w ASP.NET Core.For more information, see Układ w ASP.NET Core.

folder wwwrootwwwroot folder

Zawiera statyczne zasoby, takie jak pliki HTML, pliki JavaScript i pliki CSS.Contains static assets, like HTML files, JavaScript files, and CSS files. Aby uzyskać więcej informacji, zobacz Pliki statyczne w ASP.NET Core.For more information, see Pliki statyczne w ASP.NET Core.

appsettings.json

Zawiera dane konfiguracji, takie jak parametry połączenia.Contains configuration data, like connection strings. Aby uzyskać więcej informacji, zobacz Konfiguracja w ASP.NET Core.For more information, see Konfiguracja w ASP.NET Core.

Program.csProgram.cs

Zawiera punkt wejścia dla aplikacji.Contains the entry point for the app. Aby uzyskać więcej informacji, zobacz Host ogólny .NET w ASP.NET Core.For more information, see Host ogólny .NET w ASP.NET Core.

Startup.csStartup.cs

Zawiera kod, który konfiguruje zachowanie aplikacji.Contains code that configures app behavior. Aby uzyskać więcej informacji, zobacz Uruchamianie aplikacji w ASP.NET Core.For more information, see Uruchamianie aplikacji w ASP.NET Core.

Następne krokiNext steps

Jest to pierwszy samouczek dotyczący serii, który uczy się podstaw tworzenia Razor aplikacji sieci web ASP.NET Core Pages.This is the first tutorial of a series that teaches the basics of building an ASP.NET Core Razor Pages web app.

Aby uzyskać bardziej zaawansowane wprowadzenie do deweloperów, którzy znają kontrolery i widoki, zobacz wprowadzenie do Razor stron.For a more advanced introduction aimed at developers who are familiar with controllers and views, see Introduction to Razor Pages.

Na końcu serii będziesz mieć aplikację, która zarządza bazą danych filmów.At the end of the series, you'll have an app that manages a database of movies.

Wyświetlanie lub Pobieranie przykładowego kodu (jak pobrać).View or download sample code (how to download).

W tym samouczku zostały wykonane następujące czynności:In this tutorial, you:

  • CreateRazoraplikacja internetowa stron.Create a Razor Pages web app.
  • Uruchom aplikację.Run the app.
  • Przejrzyj pliki projektu.Examine the project files.

Na końcu tego samouczka będziesz mieć Razor aplikację sieci Web strony roboczej, która zostanie utworzona w kolejnych samouczkach.At the end of this tutorial, you'll have a working Razor Pages web app that you'll build on in later tutorials.

Strona główna lub:: No-Loc (index)::: Page

Wymagania wstępnePrerequisites

CreateRazoraplikacja internetowa stronCreate a Razor Pages web app

  • Z menu plik programu Visual Studio wybierz pozycję Nowy > projekt.From the Visual Studio File menu, select New > Project.

  • Create Nowa aplikacja sieci Web ASP.NET Core i kliknij przycisk dalej.Create a new ASP.NET Core Web Application and select Next. Nowa aplikacja sieci Web ASP.NET Corenew ASP.NET Core Web Application

  • Nazwij projekt Razor PagesMovie.Name the project RazorPagesMovie. Ważne jest, aby nazwa projektu Razor PagesMovie , tak aby przestrzenie nazw były zgodne podczas kopiowania i wklejania kodu.It's important to name the project RazorPagesMovie so the namespaces will match when you copy and paste code. Nowa aplikacja sieci Web ASP.NET Corenew ASP.NET Core Web Application

  • Wybierz pozycję ASP.NET Core 3,1 na liście rozwijanej, aplikacji sieci Web, a następnie wybierz pozycję Create .Select ASP.NET Core 3.1 in the dropdown, Web Application, and then select Create.

Nowa aplikacja sieci Web ASP.NET Core

Tworzony jest następujący projekt początkowy:The following starter project is created:

Eksplorator rozwiązań

Uruchamianie aplikacjiRun the app

  • Naciśnij klawisze CTRL + F5, aby uruchomić bez debugera.Press Ctrl+F5 to run without the debugger.

    Program Visual Studio wyświetla następujące okno dialogowe:Visual Studio displays the following dialog:

    Ten projekt jest skonfigurowany do korzystania z protokołu SSL.

    Wybierz opcję tak , jeśli ufasz certyfikatowi IIS Express protokołu SSL.Select Yes if you trust the IIS Express SSL certificate.

    Wyświetlane jest następujące okno dialogowe:The following dialog is displayed:

    Okno dialogowe ostrzeżenia o zabezpieczeniach

    Wybierz opcję tak , jeśli zgadzasz się ufać certyfikatowi Deweloperskiemu.Select Yes if you agree to trust the development certificate.

    Aby uzyskać informacje na temat zaufania do przeglądarki Firefox, zobacz firefox SEC_ERROR_INADEQUATE_KEY_USAGE Certificate Error.For information on trusting the Firefox browser, see Firefox SEC_ERROR_INADEQUATE_KEY_USAGE certificate error.

    Program Visual Studio jest uruchamiany IIS Express i uruchomi aplikację.Visual Studio starts IIS Express and runs the app. Na pasku adresu są wyświetlane inne elementy localhost:port# , takie jak example.com .The address bar shows localhost:port# and not something like example.com. Wynika to z tego, że localhost jest standardową nazwą hosta dla komputera lokalnego.That's because localhost is the standard hostname for the local computer. Host lokalny obsługuje tylko żądania sieci Web z komputera lokalnego.Localhost only serves web requests from the local computer. Podczas tworzenia projektu internetowego w programie Visual Studio dla serwera internetowego jest używany losowy port.When Visual Studio creates a web project, a random port is used for the web server.

Sprawdzanie plików projektuExamine the project files

Poniżej przedstawiono Omówienie folderów i plików projektu głównego, z których będziesz korzystać w kolejnych samouczkach.Here's an overview of the main project folders and files that you'll work with in later tutorials.

Folder stronPages folder

Zawiera Razor strony i pliki pomocnicze.Contains Razor pages and supporting files. Każda Razor strona to para plików:Each Razor page is a pair of files:

  • Plik . cshtml , który zawiera znaczniki HTML z kodem C# używając Razor składni.A .cshtml file that has HTML markup with C# code using Razor syntax.
  • Plik . cshtml.cs , który ma kod C#, który obsługuje zdarzenia strony.A .cshtml.cs file that has C# code that handles page events.

Pliki pomocnicze mają nazwy zaczynające się od znaku podkreślenia.Supporting files have names that begin with an underscore. Na przykład plik _Layout. cshtml służy do konfigurowania elementów interfejsu użytkownika wspólnych dla wszystkich stron.For example, the _Layout.cshtml file configures UI elements common to all pages. Ten plik konfiguruje menu nawigacji w górnej części strony i informacje o prawach autorskich w dolnej części strony.This file sets up the navigation menu at the top of the page and the copyright notice at the bottom of the page. Aby uzyskać więcej informacji, zobacz Układ w ASP.NET Core.For more information, see Układ w ASP.NET Core.

folder wwwrootwwwroot folder

Zawiera pliki statyczne, takie jak pliki HTML, pliki JavaScript i pliki CSS.Contains static files, like HTML files, JavaScript files, and CSS files. Aby uzyskać więcej informacji, zobacz Pliki statyczne w ASP.NET Core.For more information, see Pliki statyczne w ASP.NET Core.

appSettings.jsnaappSettings.json

Zawiera dane konfiguracji, takie jak parametry połączenia.Contains configuration data, like connection strings. Aby uzyskać więcej informacji, zobacz Konfiguracja w ASP.NET Core.For more information, see Konfiguracja w ASP.NET Core.

Program.csProgram.cs

Zawiera punkt wejścia dla programu.Contains the entry point for the program. Aby uzyskać więcej informacji, zobacz Host ogólny .NET w ASP.NET Core.For more information, see Host ogólny .NET w ASP.NET Core.

Startup.csStartup.cs

Zawiera kod, który konfiguruje zachowanie aplikacji.Contains code that configures app behavior. Aby uzyskać więcej informacji, zobacz Uruchamianie aplikacji w ASP.NET Core.For more information, see Uruchamianie aplikacji w ASP.NET Core.

Następne krokiNext steps

Jest to pierwszy samouczek dotyczący serii.This is the first tutorial of a series. Seria uczy się podstaw tworzenia Razor aplikacji sieci Web ASP.NET Core Pages.The series teaches the basics of building an ASP.NET Core Razor Pages web app.

Aby uzyskać bardziej zaawansowane wprowadzenie do deweloperów, którzy znają kontrolery i widoki, zobacz wprowadzenie do Razor stron.For a more advanced introduction aimed at developers who are familiar with controllers and views, see Introduction to Razor Pages.

Na końcu serii będziesz mieć aplikację, która zarządza bazą danych filmów.At the end of the series, you'll have an app that manages a database of movies.

Wyświetlanie lub Pobieranie przykładowego kodu (jak pobrać).View or download sample code (how to download).

W tym samouczku zostały wykonane następujące czynności:In this tutorial, you:

  • CreateRazoraplikacja internetowa stron.Create a Razor Pages web app.
  • Uruchom aplikację.Run the app.
  • Przejrzyj pliki projektu.Examine the project files.

Na końcu tego samouczka będziesz mieć Razor aplikację sieci Web strony roboczej, która zostanie utworzona w kolejnych samouczkach.At the end of this tutorial, you'll have a working Razor Pages web app that you'll build on in later tutorials.

Strona główna lub:: No-Loc (index)::: Page

Wymagania wstępnePrerequisites

Ostrzeżenie

Jeśli używasz programu Visual Studio 2017, zobacz problem z usługą dotnet/sdk #3124 , aby uzyskać informacje o wersjach zestaw .NET Core SDK, które nie współpracują z programem Visual Studio.If you use Visual Studio 2017, see dotnet/sdk issue #3124 for information about .NET Core SDK versions that don't work with Visual Studio.

CreateRazoraplikacja internetowa stronCreate a Razor Pages web app

  • Z menu plik programu Visual Studio wybierz pozycję Nowy > projekt.From the Visual Studio File menu, select New > Project.

  • Create Nowa aplikacja sieci Web ASP.NET Core i kliknij przycisk dalej.Create a new ASP.NET Core Web Application and select Next.

    Nowa aplikacja sieci Web ASP.NET Core

  • Nazwij projekt Razor PagesMovie.Name the project RazorPagesMovie. Ważne jest, aby nazwa projektu Razor PagesMovie , tak aby przestrzenie nazw były zgodne podczas kopiowania i wklejania kodu.It's important to name the project RazorPagesMovie so the namespaces will match when you copy and paste code.

    Nowa aplikacja sieci Web ASP.NET Core

  • Wybierz pozycję ASP.NET Core 2,2 na liście rozwijanej, aplikacji sieci Web, a następnie wybierz pozycję Create .Select ASP.NET Core 2.2 in the dropdown, Web Application, and then select Create.

Nowa aplikacja sieci Web ASP.NET Core

Tworzony jest następujący projekt początkowy:The following starter project is created:

Eksplorator rozwiązań

Uruchamianie aplikacjiRun the app

  • Naciśnij klawisze CTRL + F5, aby uruchomić bez debugera.Press Ctrl+F5 to run without the debugger.

    Uruchamianie aplikacji za pomocą klawiszy CTRL + F5 (tryb bez debugowania) umożliwia wprowadzanie zmian w kodzie, zapisywanie pliku, odświeżanie przeglądarki i wyświetlanie zmian w kodzie.Launching the app with Ctrl+F5 (non-debug mode) allows you to make code changes, save the file, refresh the browser, and see the code changes. Wielu deweloperów woli używać trybu bez debugowania, aby móc szybko uruchomić aplikację i wyświetlić zmiany.Many developers prefer to use non-debug mode to quickly launch the app and view changes.

    Program Visual Studio wyświetla następujące okno dialogowe:Visual Studio displays the following dialog:

    Ten projekt jest skonfigurowany do korzystania z protokołu SSL.

    Wybierz opcję tak , jeśli ufasz certyfikatowi IIS Express protokołu SSL.Select Yes if you trust the IIS Express SSL certificate.

    Wyświetlane jest następujące okno dialogowe:The following dialog is displayed:

    Okno dialogowe ostrzeżenia o zabezpieczeniach

    Wybierz opcję tak , jeśli zgadzasz się ufać certyfikatowi Deweloperskiemu.Select Yes if you agree to trust the development certificate.

    Aby uzyskać informacje na temat zaufania do przeglądarki Firefox, zobacz firefox SEC_ERROR_INADEQUATE_KEY_USAGE Certificate Error.For information on trusting the Firefox browser, see Firefox SEC_ERROR_INADEQUATE_KEY_USAGE certificate error.

    Program Visual Studio jest uruchamiany IIS Express i uruchomi aplikację.Visual Studio starts IIS Express and runs the app. Na pasku adresu są wyświetlane inne elementy localhost:port# , takie jak example.com .The address bar shows localhost:port# and not something like example.com. Wynika to z tego, że localhost jest standardową nazwą hosta dla komputera lokalnego.That's because localhost is the standard hostname for the local computer. Host lokalny obsługuje tylko żądania sieci Web z komputera lokalnego.Localhost only serves web requests from the local computer. Podczas tworzenia projektu internetowego w programie Visual Studio dla serwera internetowego jest używany losowy port.When Visual Studio creates a web project, a random port is used for the web server.

  • Na stronie głównej aplikacji wybierz pozycję Akceptuj , aby wyrazić zgodę na śledzenie.On the app's home page, select Accept to consent to tracking.

    Ta aplikacja nie śledzi informacji osobistych, ale szablon projektu zawiera funkcję zgody na wypadek, gdyby była niezbędna do przestrzegania Ogólne rozporządzenie o ochronie danych Unii Europejskiej (Rodo).This app doesn't track personal information, but the project template includes the consent feature in case you need it to comply with the European Union's General Data Protection Regulation (GDPR).

    Strona główna lub:: No-Loc (index)::: Page

    Na poniższej ilustracji przedstawiono aplikację po udzieleniu zgody na śledzenie:The following image shows the app after consent to tracking is provided:

    Strona główna lub:: No-Loc (index)::: Page

Sprawdzanie plików projektuExamine the project files

Poniżej przedstawiono Omówienie folderów i plików projektu głównego, z których będziesz korzystać w kolejnych samouczkach.Here's an overview of the main project folders and files that you'll work with in later tutorials.

Folder stronPages folder

Zawiera Razor strony i pliki pomocnicze.Contains Razor pages and supporting files. Każda Razor strona to para plików:Each Razor page is a pair of files:

  • Plik . cshtml , który zawiera znaczniki HTML z kodem C# używając Razor składni.A .cshtml file that has HTML markup with C# code using Razor syntax.
  • Plik . cshtml.cs , który ma kod C#, który obsługuje zdarzenia strony.A .cshtml.cs file that has C# code that handles page events.

Pliki pomocnicze mają nazwy zaczynające się od znaku podkreślenia.Supporting files have names that begin with an underscore. Na przykład plik _Layout. cshtml służy do konfigurowania elementów interfejsu użytkownika wspólnych dla wszystkich stron.For example, the _Layout.cshtml file configures UI elements common to all pages. Ten plik konfiguruje menu nawigacji w górnej części strony i informacje o prawach autorskich w dolnej części strony.This file sets up the navigation menu at the top of the page and the copyright notice at the bottom of the page. Aby uzyskać więcej informacji, zobacz Układ w ASP.NET Core.For more information, see Układ w ASP.NET Core.

Razor Strony pochodzą od PageModel .Razor Pages are derived from PageModel. Zgodnie z Konwencją PageModel Klasa pochodna ma nazwę <PageName>Model .By convention, the PageModel-derived class is named <PageName>Model.

folder wwwrootwwwroot folder

Zawiera pliki statyczne, takie jak pliki HTML, pliki JavaScript i pliki CSS.Contains static files, like HTML files, JavaScript files, and CSS files. Aby uzyskać więcej informacji, zobacz Pliki statyczne w ASP.NET Core.For more information, see Pliki statyczne w ASP.NET Core.

appSettings.jsnaappSettings.json

Zawiera dane konfiguracji, takie jak parametry połączenia.Contains configuration data, like connection strings. Aby uzyskać więcej informacji, zobacz Konfiguracja w ASP.NET Core.For more information, see Konfiguracja w ASP.NET Core.

Program.csProgram.cs

Zawiera punkt wejścia dla programu.Contains the entry point for the program. Aby uzyskać więcej informacji, zobacz Host ogólny .NET w ASP.NET Core.For more information, see Host ogólny .NET w ASP.NET Core.

Startup.csStartup.cs

Zawiera kod, który konfiguruje zachowanie aplikacji, na przykład czy wymaga zgody na polecenie cookie s.Contains code that configures app behavior, such as whether it requires consent for cookies. Aby uzyskać więcej informacji, zobacz Uruchamianie aplikacji w ASP.NET Core.For more information, see Uruchamianie aplikacji w ASP.NET Core.

Dodatkowe zasobyAdditional resources

Następne krokiNext steps