ASP.NET Core MVC の概要

作成者: Rick Anderson

このチュートリアルでは、コントローラーとビューを使用した ASP.NET Core MVC の Web 開発について説明します。 ASP.NET Core の Web 開発の経験がない場合は、入門者向けであるこのチュートリアルの Razor Pages バージョンを検討してください。 UI 開発について、 Pages、MVC、Razor を比較している、Blazorに関する記事を参照してください。

これは、コントローラーとビューを使用した ASP.NET Core MVC Web 開発について説明するシリーズの最初のチュートリアルです。

シリーズの最後には、映画のデータを管理、検証および表示するアプリができあがります。 学習内容は次のとおりです。

• Web アプリを作成する。
• モデルを追加してスキャフォールディングする。
• データベースを使用する。
• 検索と検証を追加する。

サンプル コードを表示またはダウンロードします (ダウンロード方法)。

必須コンポーネント

Visual Studio

• Visual Studio 2022 と ASP.NET と Web 開発ワークロード。

  

Visual Studio Code

• Visual Studio Code
• Visual Studio Code 用の C# 開発キット
• .NET 9 SDK

Visual Studio Code の手順は、macOS、Linux、または Windows 上で従うことができます。 Visual Studio Code 以外の統合開発環境 (IDE) を使用する場合は、変更が必要になる場合があります。

Web アプリを作成する

Visual Studio

• Visual Studio を起動し、 [新しいプロジェクトの作成] を選択します。
• [新しいプロジェクトの作成] ダイアログで、[ASP.NET Core Web アプリ (Model-View-Controller)]>[次へ] の順に選択します。
• [新しいプロジェクトの構成] ダイアログで、次のようにします。
  • MvcMovie に「」と入力します。 プロジェクトに MvcMovie という名前を付けることが重要です。 コードをコピーする際に、大文字と小文字の区別が各 namespace と一致する必要があります。
  • プロジェクトの場所は任意の場所に設定できます。
• [次へ] を選択します。
• [追加情報] ダイアログで、次を行います。
  • .NET 9.0 (Standard Term Support) を選択します。
  • 最上位レベルのステートメントを使用しない がオフになっていることを確認します。
• ［作成］ を選択します

プロジェクトを作成する別の方法など詳細については、「Visual Studio で新しいプロジェクトを作成する」をご覧ください。

Visual Studio により、作成した MVC プロジェクトに既定のプロジェクト テンプレートが使用されます。 作成したプロジェクトは:

• 動作するアプリです。
• 基本的なスターター プロジェクトです。

Visual Studio Code

このチュートリアルは VS Code の知識があることを前提としています。 詳細については、VS Code の概要に関するページと「Visual Studio Code ヘルプ」を参照してください。

• [ターミナル] メニューから [新しいターミナル] を選択して [統合ターミナル] を開きます。

• プロジェクトを格納するディレクトリに移動します (cd)。 プロジェクトは任意の場所に配置できます。

• 次のコマンドを実行します。

  dotnet new mvc -o MvcMovie
  code -r MvcMovie
  

  dotnet new コマンドは、MvcMovie フォルダー内に新しい ASP.NET Core MVC プロジェクトを作成します。

  code コマンドを実行すると、Visual Studio Code の現在のインスタンス内で MvcMovie フォルダーが開きます。

Visual Studio Code で "このフォルダー内のファイルの作成者を信頼しますか?" と尋ねるダイアログ ボックスが表示されることがあります。

• 親フォルダー内のすべてのファイルを信頼する場合は、[親フォルダー内のすべてのファイルの作成者を信頼します] を選択します。
• プロジェクト フォルダーには .NET によって生成されたファイルが含まれているので、[はい、作成者を信頼します] を選択します。
• Visual Studio Code でプロジェクトのビルドとデバッグを行うための資産を追加するように求められたら、[はい] を選択します。 Visual Studio Code でビルドとデバッグの資産を追加するように求められない場合は、[表示]>[コマンド パレット] の順に選択し、検索ボックスに「.NET」と入力します。 コマンドの一覧から、.NET: Generate Assets for Build and Debug コマンドを選択します。

Visual Studio Code により、生成されたファイル .vscode と launch.json を含む tasks.json フォルダーが追加されます。

アプリを実行する

Visual Studio

• Ctrl+F5 キーを押してデバッガーなしでアプリを実行します。

  SSL を使用するようにプロジェクトがまだ構成されていない場合、Visual Studio に次のダイアログが表示されます。

  

  IIS Express SSL 証明書を信頼する場合、[はい] を選択します。

  次のダイアログが表示されます。

  

  開発証明書を信頼することに同意する場合は、 [はい] を選択します。

  Firefox ブラウザーを信頼する方法の詳細については、「Firefox SEC_ERROR_INADEQUATE_KEY_USAGE 証明書エラー」を参照してください。

Visual Studio によってアプリが実行され、既定のブラウザーが開かれます。

アドレス バーには、localhost:<port#> などではなく、example.com が表示されます。 ローカル コンピューターの標準的なホスト名は localhost です。 Visual Studio が Web プロジェクトを作成する場合は、Web サーバーにランダム ポートが使用されます。

Ctrl+F5 キーを押してデバッグなしでアプリを起動することで、以下を実行できます。

• コードを変更します。
• ファイルを保存します。
• ブラウザーをすぐに更新して、コードの変更を確認します。

[デバッグ] メニューから、デバッグ モードまたは非デバッグ モードでアプリを起動できます。

アプリをデバッグするには、ツール バーの [https] ボタンを選択します。

次の図はアプリを示しています。

• ブラウザー ウィンドウを閉じます。 Visual Studio によってアプリケーションが停止されます。

Visual Studio Code

• 次のコマンドを実行し、HTTPS 開発証明書を信頼します。

  dotnet dev-certs https --trust
  

  証明書が以前に信頼されていない場合、前のコマンドでは次のダイアログが表示されます。

  

• 開発証明書を信頼することに同意する場合は、 [はい] を選択します。

  詳細については、「SSL の適用」に関する記事の「ASP.NET Core HTTPS 開発証明書の信頼」セクションをご覧ください。

Firefox ブラウザーを信頼する方法の詳細については、「Firefox SEC_ERROR_INADEQUATE_KEY_USAGE 証明書エラー」を参照してください。

• Visual Studio Code で、Ctrl+F5 キー (Windows)/^+F5 キー (macOS) を押してデバッグなしでアプリを実行します。

  Visual Studio Code:

  • Kestrel を起動します。
  • ブラウザーを起動します。
  • https://localhost:<port#> に移動します。

  アドレス バーには、localhost:<port#> などではなく、example.com が表示されます。 ローカル コンピューターの標準的なホスト名は localhost です。 localhost では、ローカル コンピューターからの Web 要求のみが処理されます。

Ctrl + F5 キーを選択してデバッグなしでアプリを起動すると、次の操作を行えます。

• コードを変更します。

• ファイルを保存します。

• ブラウザーをすぐに更新して、コードの変更を確認します。

  

• ブラウザー ウィンドウを閉じます。

• Visual Studio Code の "実行" メニューから "デバッグの停止" を選択するか、ShiftF5 キーを選択してアプリを停止します。+

Visual Studio

Visual Studio ヘルプ

• Visual Studio を使用した C# コードのデバッグについて理解する
• Visual Studio IDE へようこそ

Visual Studio Code

Visual Studio Code ヘルプ

• 作業の開始

• デバッグ

• 統合ターミナル

• キーボード ショートカット

  • macOS のキーボード ショートカット
  • Linux のキーボード ショートカット
  • Windows のキーボード ショートカット

このシリーズの次のチュートリアルでは、MVC について説明し、コードの作成を開始します。

次へ: コントローラーの追加