演習 - Onclick イベントの Blazor イベント ハンドラーを作成する

• 5 分

Blazor では、C# コードを HTML DOM イベントに接続できます。 この機能を使用して、既存のアプリを改善します。

あなたは、Blazing Pizza アプリの強化に取り組む開発チームの一員として、顧客の住所をキャプチャするチェックアウト プロセスを完成させることを求められています。 いくつかのテキスト フィールドを追加し、チェックアウト プロセスを改善します。

この演習では、既存のアプリを複製し、住所の詳細をキャプチャする新しい住所コンポーネントを作成します。 フィールドを配置して、フォームの最初のフィールドにフォーカスを設定します。

チームの既存の Web アプリを複製する

このモジュールでは、.NET 6.0 SDK を使用します。 適切なターミナルで次のコマンドを実行して、.NET 6.0 がインストールされていることを確実にします。

dotnet --list-sdks

次のような出力が表示されます。

3.1.100 [C:\program files\dotnet\sdk]
5.0.100 [C:\program files\dotnet\sdk]
6.0.100 [C:\program files\dotnet\sdk]

6 で始まるバージョンが一覧に表示されていることを確実にします。 何も表示されない場合、またはコマンドが見つからない場合は、最新の .NET 6.0 SDK をインストールしてください。

まだ Blazor アプリを作成したことがない場合は、Blazor のセットアップ手順に従って正しいバージョンの .NET をインストールし、マシンが正しく設定されていることを確認してください。 アプリの作成の手順で停止します。

1. Visual Studio Code を開きます。

2. Visual Studio Code で、メイン メニューから [表示]、[ターミナル] の順に選択して統合ターミナルを開きます。

3. ターミナルで、プロジェクトを作成する場所に移動します。

4. GitHub からアプリを複製します。

   git clone https://github.com/MicrosoftDocs/mslearn-use-forms-in-blazor-web-apps.git BlazingPizza
   

5. [ファイル] を選択してから、[フォルダーを開く...] を選択します。

6. [開く] ダイアログで、[BlazingPizza] フォルダーに移動し、[フォルダーの選択] を選択します。

   Visual Studio Code に、未解決の依存関係についてのダイアログが表示されることがあります。 [復元] を選択します。

7. アプリを実行して、すべてが正しく動作しているのを確認します。

8. Visual Studio Code で、F5 キーを押すか、[実行]>[デバッグの開始] を選びます。

   

   いくつかのピザを構成し、それらを注文に追加してみてください。 ページの下部にある [注文 >] を選択します。 現在のチェックアウト ページが表示されます。

9. Shift + F5 キーを押してアプリの実行を停止します。

チェックアウト ページをリファクタリングする

1. Visual Studio Code のエクスプローラーで [ページ] を展開し、[Checkout.razor] を選択します。

   この時点で、チェックアウト ページには、設定されているピザの一覧が表示されます。 あなたは、住所のセクションが含まれるように、ページをリファクタリングするように求められています。

2. データ用の 2 つの列で構成されるように、既存の <div class="main"> HTML ブロックを置き換えます。

   <div class="main">
       <div class="checkout-cols">
           <div class="checkout-order-details">
               <h4>Review order</h4>
               <OrderReview Order="Order" />
           </div>
   
           <div class="checkout-delivery-address">
               <h4>Deliver to...</h4>
               <AddressEditor Address="Order.DeliveryAddress" />
           </div>
       </div>
   
       <button class="checkout-button btn btn-warning" @onclick="PlaceOrder" disabled=@isSubmitting>
           Place order
       </button>
   </div>
   

   前記のコードは、ボタン要素の HTML onclick イベントを、@code ブロック内の PlaceOrder Blazor メソッドに接続します。

   リファクタリングでは、2 つの新しい Blazor コントロール OrderReview と AddressEditor を参照します。 ピザの一覧にある古いチェックアウト コードを OrderReview コンポーネントに移動します。

3. エクスプローラーで、[共有] を右クリックし、[新しいファイル] を選択します。

4. ファイル名として、「OrderReview.razor」と入力します。

5. ピザを順番に表示する foreach ループを追加します。

   @foreach (var pizza in Order.Pizzas)
   {
       <p>
           <strong>
               @(pizza.Size)"
               @pizza.Special.Name
               (£@pizza.GetFormattedTotalPrice())
           </strong>
       </p>
   }
   
   <p>
       <strong>
           Total price:
           £@Order.GetFormattedTotalPrice()
       </strong>
   </p>
   
   @code {
       [Parameter] public Order Order { get; set; }
   }
   

6. エクスプローラーで、[共有] を右クリックし、[新しいファイル] を選択します。

7. ファイル名として、「AddressEditor.razor」と入力します。

8. input 要素を使用するコードを住所の各フィールドに追加します。 [モデル] フォルダーの Address クラスに、すべてのフィールドが表示されます。

   <div class="form-field">
       <label>Name:</label>
       <div>
           <input @bind="Address.Name" />
       </div>
   </div>
   
   <div class="form-field">
       <label>Line 1:</label>
       <div>
           <input @bind="Address.Line1" />
       </div>
   </div>
   
   <div class="form-field">
       <label>Line 2:</label>
       <div>
           <input @bind="Address.Line2" />
       </div>
   </div>
   
   <div class="form-field">
       <label>City:</label>
       <div>
           <input @bind="Address.City" />
       </div>
   </div>
   
   <div class="form-field">
       <label>Region:</label>
       <div>
           <input @bind="Address.Region" />
       </div>
   </div>
   
   <div class="form-field">
       <label>Postal code:</label>
       <div>
           <input @bind="Address.PostalCode" />
       </div>
   </div>
   
   @code {
       [Parameter] public Address Address { get; set; }
   }
   

新しいチェックアウト ページをテストする

1. Visual Studio Code で、F5 キーを押すか、[実行]>[デバッグの開始] を選びます。

   

   ピザを追加し、[注文 >] を選択して、新しいチェックアウト フローを表示します。

2. Shift + F5 キーを押して、アプリの実行を停止します。

フォームの使いやすさを改善する

チェックアウト ページに移動したときに、お客様が最初にすることは名前の入力です。 Blazor では、ページ上の HTML 要素にフォーカスを設定できます。 これを追加して、アプリの品質を改善しましょう。

1. AddressEditor.razor で、input という名前の要素の HTML を変更して、@ref="startName" を追加します。

   <input @ref="startName" @bind="Address.Name" />
   

   Blazor ディレクティブ @ref="startName" では、コード ブロックで ElementReference を作成して、入力要素を参照できます。 次に、この要素参照を使用して、ページがレンダリングされた後に FocusAsync を呼び出すことができます。

2. ページが読み込まれたら、FocusAsync 呼び出すコードを [Parameter] public Address Address { get; set; } 宣言に追加します。

   private ElementReference startName;
   
   protected override async Task OnAfterRenderAsync(bool firstRender)
   {
       if (firstRender) {
           await startName.FocusAsync();
       }
   }    
   

   このコードでは、ElementReference を作成してから、ページがレンダリングされた後に Name フィールドにフォーカスを設定します。

3. Visual Studio Code で、F5 キーを押すか、[実行]>[デバッグの開始] を選びます。

   

   ピザをいくつか追加して、[注文 >] を選択すると、[名前] フォーム フィールドにフォーカスが設定されているチェックアウト ページが表示されます。

4. Shift + F5 キーを押してアプリの実行を停止します。