Blazor アプリケーションでテキストボックスを配置し、入力した文字列を取得する

Blazor アプリケーションでテキストボックスを配置し、入力した文字列を取得するコードを紹介します。

概要

Blazorアプリケーションで画面にテキストボックスを配置し、テキストボックスに入力した文字列を取得するコードを紹介します。

事前準備

Blazorアプリケーションを作成します。フォールバックページ、ルーティング、メイン画面のRazorコンポーネントを作成します。アプリケーションの作成手順はこちらの記事を参照してください。

実装例1:ページモデルクラスを利用しない例

コードの記述

メイン画面のRazorコンポーネントのコードを記述します。

Index.razor

@page "/"
<h3>TextBox Demo</h3>

<input id="text1" type="text" @bind="@value1"/><br/>
<button @onclick="ButtonClick">Button1</button>
<div>@InputText</div>

@code {
  string value1;
  string InputText;

  void ButtonClick()
  {
      InputText = value1 + " が入力されました";
  }
}

解説

下記のコードがテキストボックスのコントロールになります。@bind 属性の値が入力された値を格納するテキストボックスになります。下記のコードではvalue1 変数に入力した文字列が代入されます。

<input id="text1" type="text" @bind="@value1"/>

下記のコードがボタンのコントロールになります。クリック時にButtonClick関数を呼び出します。ボタンの動作に関してはこちらの記事を参照してください。

<button @onclick="ButtonClick">Button1</button>

下記は画面に変数を表示するコードです。InputText変数の値を画面に表示します。

<div>@InputText</div>

変数の宣言とボタンクリック時の関数の実装部分のコードです。ボタンがクリックされるとテキストボックスに入力された文字列に「が入力されました」を追加し、InputText変数に代入します。InputText変数の値は画面のボタンの下部のpタグの位置に表示されます。

@code {
  string value1;
  string InputText;

  void ButtonClick()
  {
      InputText = value1 + " が入力されました";
  }
}

実行結果

プロジェクトを実行します。Webブラウザが起動し、下図のページが表示されます。

テキストボックスに文字列を入力します。「ペンギン」の文字列を入力します。入力ができたらテキストボックス下部の[Button1]をクリックします。

ボタンの下部に「ペンギンが入力されました」のメッセージが表示されます。テキストボックスに入力した文字列が取得できています。なお、この時ページ遷移は発生しません。

実装例2:モデルクラスを利用する例

先ほどの例では、razorファイル中にページの画面デザインとロジックを記述しましたが、画面とロジックを分離したい場合があります。モデルクラスを利用すると、ロジック部分をcsファイルに分離できます。

コードの記述

Pagesフォルダ内に画面となる、razorコンポーネントを作成し、コードを記述します。

Pages/TextBoxBind.razor

@page "/TextBoxBind"
@inherits TextBoxBindModel
<h3>TextBox Bind Demo</h3>

<input id="text1" type="text" @bind="@value1"/><br/>
<button @onclick="ButtonClick">Button1</button>
<div>@InputText</div>

Pages/TextBoxBind.razor.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.AspNetCore.Components;

namespace BindDemo.Pages
{
  public class TextBoxBindModel : ComponentBase
  {
    public string value1;
    public string InputText;

    public void ButtonClick()
    {
      InputText = value1 + " が入力されました";
    }
  }
}

解説

<input id="text1" type="text" @bind="@value1"/>

下記は画面に変数を表示するコードです。InputText変数の値を画面に表示します。

<div>@InputText</div>

モデルクラスでの変数の宣言とボタンクリック時の関数の実装部分のコードです。ボタンがクリックされるとテキストボックスに入力された文字列に「が入力されました」を追加し、InputText変数に代入します。

  public class TextBoxBindModel : ComponentBase
  {
    public string value1;
    public string InputText;

    public void ButtonClick()
    {
      InputText = value1 + " が入力されました";
    }
  }