• 12 分

チームは、ピザの在庫管理アプリの作業を分担しています。 チームメイトは、あなたのために ASP.NET Core Web アプリを作成し、ピザ データをデータベースに読み書きするサービスを既に構築しています。 あなたは、[ピザ リスト] ページの作業を割り当てられています。このページでは、ピザの一覧が表示され、新しいピザをデータベースに追加できます。 まず、プロジェクトの編成方法を理解するために、プロジェクトのツアーを行います。

プロジェクト ファイルを取得する

GitHub Codespaces を使用する場合は、ブラウザーでリポジトリを開き、[コード] を選択し、main ブランチに新しい codespace を作成するだけです。

GitHub Codespaces を使用しない場合は、プロジェクト ファイルを取得し、Visual Studio Code で次の手順を使用して開きます。

1. コマンド シェルを開き、次のコマンド ラインを使用して GitHub からプロジェクトを複製します。

   git clone https://github.com/MicrosoftDocs/mslearn-create-razor-pages-aspnet-core
   

2. mslearn-create-razor-pages-aspnet-core ディレクトリに移動し、Visual Studio Code でプロジェクトを開きます。

   cd mslearn-create-razor-pages-aspnet-core
   code .
   

チームメイトの作業を確認する

少し時間を取って、ContosoPizza フォルダー内の既存のコードについて理解することにしましょう。 プロジェクトは、dotnet new webapp コマンドを使用して作成された ASP.NET Core Web アプリです。 以下では、チームメイトが行った変更について説明します。

• プロジェクトに Models フォルダーが追加されました。
  • Models フォルダーには、ピザを表す Pizza クラスが含まれています。
• プロジェクトに Data フォルダーが追加されてました。
  • Data フォルダーには、データベース コンテキストを表す PizzaContext クラスが含まれています。 これは、Entity Framework Core の DbContext クラスを継承します。 Entity Framework Core は、データベースの操作を容易にするオブジェクト リレーショナル マッパー (ORM) です。
• プロジェクトに Services フォルダーが追加されました。
  • Services フォルダーには、ピザの一覧表示と追加を行うメソッドを公開する PizzaService クラスが含まれています。
  • PizzaService クラスでは、PizzaContext クラスを使用してピザをデータベースに読み書きします。
  • このクラスは、Program.cs (10 行目) の依存関係挿入に登録されます。

Entity Framework Core では、次のものも生成されました。

• Migrations フォルダーが生成されました。
  • Migrations フォルダーには、データベース スキーマを作成するコードが含まれています。
• SQLite データベース ファイル ContosoPizza.db が生成されました。
  • SQLite 拡張機能 がインストールされている場合 (または GitHub Codespaces を使用している場合)、ファイルを右クリックし、[データベースを開く] を選択して、データベースを表示できます。 データベース スキーマは、[エクスプローラー] ペインの [SQLite エクスプローラー] タブに表示されます。

Razor Pages プロジェクトの構造を確認する

プロジェクト内の他のすべてのものは、プロジェクトが作成された時点から変更されていません。 次の表では、dotnet new webapp コマンドで生成されたプロジェクトの構造について説明します。

名前	説明
Pages/	Razor Pages とサポート ファイルが含まれます。 各 Razor ページには、.cshtml ファイルと .cshtml.cs PageModel クラス ファイルがあります。
wwwroot/	HTML、JavaScript、CSS などの静的資産ファイルが含まれます。
ContosoPizza.csproj	依存関係などのプロジェクト構成メタデータが含まれます。
Program.cs	アプリのエントリ ポイントとして機能し、ルーティングなどのアプリの動作を構成します。

その他の注目すべき観察項目:

• Razor ページ ファイルとそれらとペアになっている PageModel クラス ファイル

  Razor ページは Pages ディレクトリに格納されます。 上で説明したように、Razor ページごとに .cshtml ファイルと .cshtml.cs PageModel クラス ファイルがあります。 PageModel クラスを使用すると、Razor のロジックとプレゼンテーションを分離できます。このクラスでは、要求のページ ハンドラーを定義し、Razor ページにスコープ設定されたデータ プロパティとロジックをカプセル化します。

• Pages ディレクトリ構造とルーティング要求

  Razor Pages では、Pages ディレクトリ構造をルーティング要求の規約として使用します。 次の表は、URL をファイル名にマップする方法を示しています。

  URL	マップ先の Razor ページ
  www.domain.com	Pages/Index.cshtml
  www.domain.com/Index	Pages/Index.cshtml
  www.domain.com/Privacy	Pages/Privacy.cshtml
  www.domain.com/Error	Pages/Error.cshtml

  Pages ディレクトリ内のサブフォルダーは、Razor ページを整理するために使用されます。 たとえば、Pages/Products ディレクトリがある場合、URL にはその構造が反映されます。

  URL	マップ先の Razor ページ
  www.domain.com/Products	Pages/Products/Index.cshtml
  www.domain.com/Products/Index	Pages/Products/Index.cshtml
  www.domain.com/Products/Create	Pages/Products/Create.cshtml

• レイアウトとその他の共有ファイル

  複数のページ間で共有されるファイルがいくつかあります。 これらのファイルによって、共通のレイアウト要素とページ インポートが決定されます。 次の表では、各ファイルの目的を説明します。

  ファイル	説明
  _ViewImports.cshtml	複数のページ間で使用される名前空間とクラスをインポートします。
  _ViewStart.cshtml	すべての Razor ページの既定のレイアウトを指定します。
  Pages/Shared/_Layout.cshtml	これは、_ViewStart.cshtml ファイルで指定されたレイアウトです。 複数のページ間で共通のレイアウト要素を実装します。
  Pages/Shared/_ValidationScriptsPartial.cshtml	すべてのページに検証機能を提供します。

プロジェクトを初めて実行する

プロジェクトを実行して、実際の動作を確認しましょう。

1. エクスプローラー で ContosoPizza フォルダーを右クリックし、[統合ターミナルで開く] を選択します。 これにより、プロジェクト フォルダーのコンテキストでターミナル ウィンドウが開きます。

2. ターミナル ウィンドウに次のコマンドを入力します。

   dotnet watch
   

   このコマンドは、次の操作を行います。

   • プロジェクトをビルドします。
   • アプリを起動します。
   • ファイルの変更を監視し、変更が検出されたらアプリを再起動します。

3. IDE により、ブラウザーでアプリを開くように求められます。 [ブラウザーで開く] を選択します。

   ヒント

   ターミナル ウィンドウで URL を見つけてアプリを開くこともできます。 Ctrl キーを押したまま URL をクリックして、ブラウザーで開きます。

4. レンダリングされたホーム ページを IDE の Pages/Index.cshtml と比較します。

   • ファイル内の HTML、Razor 構文、C# コードの組み合わせを確認します。
     • Razor 構文は、@ 文字で示されています。
     • C# コードは、@{ } ブロックで囲まれています。 ファイルの先頭にあるディレクティブをメモします。
     • @page ディレクティブは、このファイルが Razor ページであることを指定します。
     • @model ディレクティブは、ページのモデルの種類を指定します (この場合は、Pages/Index.cshtml.cs で定義されている IndexModel)。
   • C# コード ブロックを確認します。
     • このコードでは、ViewData ディレクトリ内の Title 項目の値を "ホーム ページ" に設定します。
     • ViewData 辞書は、Razor ページと IndexModel クラスの間でデータを渡すために使用されます。
     • 実行時には、Title の値を使用してページの <title> 要素が設定されます。

アプリをターミナル ウィンドウで実行したままにしておきます。 以降のユニットでこれを使用します。 Contoso Pizza アプリを実行しているブラウザー タブもそのままにしておきます。 アプリに変更を加えると、ブラウザーが自動的に更新され、変更が表示されます。

ランディング ページをカスタマイズする

ピザ アプリとの関連性を高めるために、ランディング ページにいくつかの変更を加えてみましょう。

1. Pages/Index.cshtml で、C# コード ブロックを次のコードに置き換えます。

   ViewData["Title"] = "The Home for Pizza Lovers";
   TimeSpan timeInBusiness = DateTime.Now - new DateTime(2018, 8, 14);
   

   上記のコードでは次の操作が行われます。

   • ViewData ディレクトリ内の Title 項目の値を "Pizza Lovers のホーム" に設定します。
   • 開業からの経過時間を計算します。

2. HTML を次のように変更します。

   • <h1> 要素を次のコードに置き換えます。

     <h1 class="display-4">Welcome to Contoso Pizza</h1>
     

   • <p> 要素を次のコードに置き換えます。

     <p class="lead">The best pizza in town for @Convert.ToInt32(timeInBusiness.TotalDays) days!</p>
     

   上記のコードでは次の操作が行われます。

   • 見出しを "Contoso Pizza へようこそ" に変更します。
   • 開業からの経過日数を表示します。
     • @ 文字は、HTML から Razor 構文に切り替えるために使用されます。
     • Convert.ToInt32 メソッドは、timeInBusiness 変数の TotalDays プロパティを整数に変換するために使用されます。
     • Convert クラスは、System 名前空間の一部であり、ContosoPizza.csproj ファイル内の <ImplicitUsings> 要素によって自動的にインポートされます。

3. ファイルを保存します。 アプリが実行されているブラウザー タブは自動的に更新され、変更が表示されます。 GitHub Codespaces を使用している場合、ファイルは自動的に保存されますが、ブラウザー タブを手動で更新する必要があります。

Razor ページの最初の変更が完了しました。 次のユニットでは、ピザの一覧を表示する新しいページをアプリに追加します。