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

作成者: Rick AndersonBy Rick Anderson

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

経験豊富な開発者を対象としたより高度な概要については、Razor Pages の概要に関する記事を参照してください。For a more advanced introduction aimed at experienced developers, 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 build on in later tutorials.

ホームまたはインデックス ページ

必須コンポーネントPrerequisites

警告

Visual Studio 2017 を使用している場合、Visual Studio で動作しない .NET Core SDK のバージョンについては、dotnet/sdk issue #3124 を参照してください。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.

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

  • Visual Studio の [ファイル] メニューから、 [新規作成] > [プロジェクト] の順に選択します。From the Visual Studio File menu, select New > Project.

  • 新しい ASP.NET CoreWeb アプリケーションを作成し、 [次へ] を選択します。Create a new ASP.NET Core Web Application and select Next.

    新しい ASP.NET Core Web アプリケーション

  • プロジェクトに RazorPagesMovie という名前を付けます。Name the project RazorPagesMovie. コードのコピーおよび貼り付けを行う際に名前空間が一致するように、プロジェクトに RazorPagesMovie という名前を付けることが重要です。It's important to name the project RazorPagesMovie so the namespaces will match when you copy and paste code.

    新しい ASP.NET Core Web アプリケーション

  • ドロップダウンの [ASP.NET Core 2.2][Web アプリケーション] の順に選択し、 [作成] を選択します。Select ASP.NET Core 2.2 in the dropdown, Web Application, and then select Create.

新しい ASP.NET Core Web アプリケーション

次のスターター プロジェクトが作成されます。The following starter project is created:

ソリューション エクスプローラー

アプリを実行するRun the app

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

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

    このプロジェクトは SSL を使用するように構成されています。

    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.

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

    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.

  • アプリのホーム ページ上で、 [同意する] を選択して、追跡に同意します。On the app's home page, select Accept to consent to tracking.

    このアプリによって個人情報は追跡されません。しかし、欧州連合の一般データ保護規則 (GDPR) に準拠するための同意機能が必要な場合は、プロジェクト テンプレートにその機能が含められます。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).

    ホームまたはインデックス ページ

    次の図では、追跡に同意した後のアプリを示しています。The following image shows the app after you give consent to tracking:

    ホームまたはインデックス ページ

プロジェクト ファイルを確認する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 contains HTML markup with C# code using Razor syntax.
  • .cshtml.cs ファイル: ページ イベントを処理する C# コードが保存されます。A .cshtml.cs file that contains 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 files, such as HTML files, JavaScript files, and CSS files. 詳細については、ASP.NET Core の静的ファイル を参照してください。For more information, see ASP.NET Core の静的ファイル.

appSettings.jsonappSettings.json

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

Program.csProgram.cs

プログラムのエントリ ポイントが保存されます。Contains the entry point for the program. 詳細については、.NET での汎用ホスト を参照してください。For more information, see .NET での汎用ホスト.

Startup.csStartup.cs

cookie に対する同意が必要かどうかなど、アプリの動作を構成するコードが保存されます。Contains code that configures app behavior, such as whether it requires consent for cookies. 詳細については、ASP.NET Core でのアプリケーションのスタートアップ を参照してください。For more information, see ASP.NET Core でのアプリケーションのスタートアップ.

その他の技術情報Additional resources

次の手順Next steps

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

  • Razor ページ Web アプリを作成する。Created a Razor Pages web app.
  • アプリを実行する。Ran the app.
  • プロジェクト ファイルを確認する。Examined the project files.

このシリーズの次のチュートリアルに進んでください。Advance to the next tutorial in the series: