チュートリアル: ASP.NET Core の Razor Pages の概要Tutorial: Get started with Razor Pages in ASP.NET Core

09/15/2020

これは、ASP.NET Core の Razor Pages Web アプリの構築の基礎について説明する、シリーズの最初のチュートリアルです。This is the first tutorial of a series that teaches the basics of building an ASP.NET Core Razor Pages web app.

コントローラーとビューを使い慣れた開発者向けの詳細情報については、「Razor Pages の概要」を参照してください。For a more advanced introduction aimed at developers who are familiar with controllers and views, see Introduction to Razor Pages.

シリーズの最後には、映画のデータベースを管理できるアプリができあがります。At the end of the series, you'll have an app that manages a database of movies.

サンプルコードを表示またはダウンロードします (ダウンロード方法)。View or download sample code (how to download).

このチュートリアルでは、次の作業を行いました。In this tutorial, you:

Razor Pages Web アプリを作成する。Create a Razor Pages web app.
アプリを実行します。Run the app.
プロジェクトファイルを確認するExamine the project files.

このチュートリアルの最後には、以降のチュートリアルで拡張する作業用 Razor Pages Web アプリができあがります。At the end of this tutorial, you'll have a working Razor Pages web app that you'll enhance in later tutorials.

[ホーム] または [Index] ページ

必須コンポーネントPrerequisites

ASP.NET および Web 開発 ワークロードを含む Visual Studio 2019 16.8 以降Visual Studio 2019 16.8 or later with the ASP.NET and web development workload
.NET 5.0 SDK 以降.NET 5.0 SDK or later

Razor Pages Web アプリを作成するCreate a Razor Pages web app

Visual Studio を開始し、 [新しいプロジェクトの作成] を選択します。Start Visual Studio and select Create a new project. 詳細については、「Visual Studio で新しいプロジェクトを作成する」を参照してください。For more information, see Create a new project in Visual Studio.
[新しいプロジェクト] ダイアログで、 [ASP.NET Core Web アプリケーション] 、 [次へ] の順に選択します。In the Create a new project dialog, select ASP.NET Core Web Application, and then select Next.
[新しいプロジェクトの構成] ダイアログで、 [プロジェクト名] に「RazorPagesMovie」と入力します。In the Configure your new project dialog, enter RazorPagesMovie for Project name. サンプルコードのコピーおよび貼り付けを行う際に名前空間が一致するように、プロジェクトに RazorPagesMovie という (大文字と小文字が一致する) 名前を付けることが重要です。It's important to name the project RazorPagesMovie, including matching the capitalization, so the namespaces will match when you copy and paste example code.
［作成］ を選択しますSelect Create.
[新しい ASP.NET Core Web アプリケーションの作成] ダイアログで、次のものを選択します。In the Create a new ASP.NET Core web application dialog, select:
1. ドロップダウンで [.NET Core] と [ASP.NET Core 5.0].NET Core and ASP.NET Core 5.0 in the dropdowns.
2. Web アプリケーション。Web Application.
3. Create。Create.
次のスタータープロジェクトが作成されます。The following starter project is created:

統合ターミナルを開きます。Open the integrated terminal.
プロジェクトを格納するディレクトリ (cd) に変更します。Change to the directory (cd) which will contain the project.
次のコマンドを実行します。Run the following commands:
```
dotnet new webapp -o RazorPagesMovie
code -r RazorPagesMovie
```
- dotnet new コマンド: RazorPagesMovie フォルダーに新しい Razor Pages プロジェクトが作成されます。The dotnet new command creates a new Razor Pages project in the RazorPagesMovie folder.
- code コマンドを実行すると、Visual Studio Code の現在のインスタンス内で RazorPagesMovie フォルダーが開きます。The code command opens the RazorPagesMovie folder in the current instance of Visual Studio Code.

アプリを実行するRun the app

Ctrl + F5 キーを押して、デバッガーなしで実行します。Press Ctrl+F5 to run without the debugger.

Visual Studio に次のダイアログが表示されます。Visual Studio displays the following dialog:

IIS Express SSL 証明書を信頼する場合、[はい] を選択します。Select Yes if you trust the IIS Express SSL certificate.

次のダイアログが表示されます。The following dialog is displayed:

開発証明書を信頼することに同意する場合は、 [はい] を選択します。Select Yes if you agree to trust the development certificate.

Firefox ブラウザーを信頼する方法の詳細については、「Firefox SEC_ERROR_INADEQUATE_KEY_USAGE 証明書エラー」を参照してください。For information on trusting the Firefox browser, see Firefox SEC_ERROR_INADEQUATE_KEY_USAGE certificate error.

Visual Studio で IIS Express が開始され、アプリが実行されます。Visual Studio starts IIS Express and runs the app. アドレスバーには、example.com などではなく、localhost:port# が表示されます。The address bar shows localhost:port# and not something like example.com. これは、localhost がローカルコンピューターの標準のホスト名であるためです。That's because localhost is the standard hostname for the local computer. localhost では、ローカルコンピューターからの Web 要求のみが処理されます。Localhost only serves web requests from the local computer. Visual Studio が Web プロジェクトを作成する場合は、Web サーバーにランダムポートが使用されます。When Visual Studio creates a web project, a random port is used for the web server.

次のコマンドを実行し、HTTPS 開発証明書を信頼します。Trust the HTTPS development certificate by running the following command:
```
dotnet dev-certs https --trust
```
上記のコマンドは、Linux では機能しません。The preceding command doesn't work on Linux. 証明書を信頼する方法については、Linux ディストリビューションのドキュメントを参照してください。See your Linux distribution's documentation for trusting a certificate.

上記のコマンドでは、次のダイアログが表示されます。The preceding command displays the following dialog:
開発証明書を信頼することに同意する場合は、 [はい] を選択します。Select Yes if you agree to trust the development certificate.

詳細については、ASP.NET Core HTTPS 開発証明書の信頼に関する記事をご覧くださいSee Trust the ASP.NET Core HTTPS development certificate for more information.

Firefox ブラウザーを信頼する方法の詳細については、「Firefox SEC_ERROR_INADEQUATE_KEY_USAGE 証明書エラー」を参照してください。For information on trusting the Firefox browser, see Firefox SEC_ERROR_INADEQUATE_KEY_USAGE certificate error.

Ctrl + F5 キーを押して、デバッガーなしで実行します。Press Ctrl-F5 to run without the debugger.

Visual Studio Code で Kestrel が開始され、ブラウザーが起動して、http://localhost:5001 に移動します。Visual Studio Code starts Kestrel, launches a browser, and navigates to http://localhost:5001. アドレスバーには、example.com などではなく、localhost:port# が表示されます。The address bar shows localhost:port# and not something like example.com. これは、localhost がローカルコンピューターの標準のホスト名であるためです。That's because localhost is the standard hostname for local computer. localhost では、ローカルコンピューターからの Web 要求のみが処理されます。Localhost only serves web requests from the local computer.

Visual Studio for Mac で次のポップアップが表示されます。Visual Studio for Mac displays the following popup:

HTTPS 開発証明書が見つかりませんでした。

開発証明書を信頼する場合は、[はい] を選択します。Select Yes if you trust the development certificate.

次のダイアログが表示されます。The following dialog is displayed:

セキュリティ警告のダイアログ

パスワードを入力して、[OK] を選択します。Enter your password and select OK

開発証明書を信頼することに同意する場合は、 [はい] を選択します。Select Yes if you agree to trust the development certificate.

詳細については、ASP.NET Core HTTPS 開発証明書の信頼に関する記事をご覧くださいSee Trust the ASP.NET Core HTTPS development certificate for more information

Visual Studio から Opt-Cmd-Return キーを押して、デバッガーなしで実行します。From Visual Studio, press Opt-Cmd-Return to run without the debugger. または、メニューバーに移動して [実行] > [デバッグなしで開始] を選択します。Alternatively, navigate to the menu bar and go to Run>Start Without Debugging.

Visual Studio は Kestrel を開始し、ブラウザーを起動して、http://localhost:5001 に移動します。Visual Studio starts Kestrel, launches a browser, and navigates to http://localhost:5001.

プロジェクトファイルを確認するExamine the project files

以降のチュートリアルで使用するメインプロジェクトフォルダーとファイルの概要を次に示します。Here's an overview of the main project folders and files that you'll work with in later tutorials.

Pages フォルダーPages folder

Razor ページとサポートファイルが含まれます。Contains Razor pages and supporting files. 各 Razor ページは、次のファイルのペアとなります。Each Razor page is a pair of files:

.cshtml ファイル: HTML マークアップと、Razor 構文を使用した C# コードが保存されます。A .cshtml file that has HTML markup with C# code using Razor syntax.
.cshtml.cs ファイル: ページイベントを処理する C# コードが保存されます。A .cshtml.cs file that has C# code that handles page events.

サポートファイルには、アンダースコアで始まる名前が付けられます。Supporting files have names that begin with an underscore. たとえば、 _Layout.cshtml ファイルでは、すべてのページに共通の UI 要素が構成されます。For example, the _Layout.cshtml file configures UI elements common to all pages. このファイルでは、ページの上部に表示されるナビゲーションメニューと、ページの下部に表示される著作権の通知が設定されます。This file sets up the navigation menu at the top of the page and the copyright notice at the bottom of the page. 詳細については、「ASP.NET Core でのレイアウト」を参照してください。For more information, see ASP.NET Core でのレイアウト.

wwwroot フォルダーwwwroot folder

HTML ファイル、JavaScript ファイル、CSS ファイルなどの静的アセットが保存されます。Contains static assets, like HTML files, JavaScript files, and CSS files. 詳細については、「ASP.NET Core の静的ファイル」を参照してください。For more information, see ASP.NET Core の静的ファイル.

appsettings.json

接続文字列などの構成データが保存されます。Contains configuration data, like connection strings. 詳細については、「ASP.NET Core の構成」を参照してください。For more information, see ASP.NET Core の構成.

Program.csProgram.cs

アプリのエントリポイントが保存されます。Contains the entry point for the app. 詳細については、「ASP.NET Core の .NET 汎用ホスト」を参照してください。For more information, see ASP.NET Core の .NET 汎用ホスト.

Startup.csStartup.cs

アプリの動作を構成するコードが含まれています。Contains code that configures app behavior. 詳細については、「ASP.NET Core でのアプリケーションのスタートアップ」を参照してください。For more information, see ASP.NET Core でのアプリケーションのスタートアップ.

次の手順Next steps

次へ: モデルの追加Next: Add a model