Blazor のイベントについて

Razor コンポーネントで提供されている各種イベントハンドラーに処理を登録することで実現します。

イベントは、クリックや、テキスト入力など、それぞれのコンポーネントで最適化されたイベントを実装することができます。

イベント名は、@on{イベント名}がイベントハンドラーとして定義されています。

クリックした時のイベント

<button @onclick="OnClear">クリア</button>

@code {
	/// <summary>
	/// クリアボタンをクリックした時の処理
	/// </summary>
	private void OnClear()
	{

	}
}

イベント引数の受け取り

イベント引数から、イベントの発生状況や変更された値などを取得することができます。

イベント引数を取得するためには、イベントハンドラーに設定するメソッドにイベントに対応した EventArgs を引数に設定する必要があります。

例えば、テキストボックスに入力された値を取得する ChangeEventArgs から、入力された値を取得することができます。

<input type="text" @bind-value="FilterText" @oninput="OnFilterTextChanged">

@code {
    /// <summary>
    /// テキストボックスの入力変更イベント
    /// </summary>
    /// <param name="args">イベント引数</param>
    private void OnFilterTextChanged(ChangeEventArgs args)
    {
        // 入力値を FilterText に反映
        this.FilterText = args.Value.ToString();
    }
}

主要なイベント一覧と引数の型

よく利用されるイベントの一覧と対応

| イベント | イベント名 | EventArgs |
| ---- | ---- |
| クリック | onclick | MouseEventArgs |
| フォーカスイン | onfocusin | FocusEventArgs |
| フォーカスアウト | onfocusout | FocusEventArgs |
| キーボード入力 | oninput | ChangeEventArgs |
| 選択時(プルダウン/コンボボックス) | onchange | ChangeEventArgs |

サンプル

クリックおよび入力イベントを採用し、入力値に応じて、登録情報(グリッド)をフィルタするサンプルを作成しました。

グリッドのフィルターサンプル

Ignite UI for Blazor の DataGrid にはフィルター機能があり、参照元のデータソースの変更も不要で簡単にフィルタリングを実現することができます。


<DataGrid 
          @ref="DataGridRef"
          Height="100%"
          Width="100%"
          DataSource="DataSource"
          AutoGenerateColumns="true"
          DefaultColumnMinWidth="100" />

@code {

	// グリッドへの参照
	public DataGrid DataGridRef;
	// フィルターファクトリー
	public FilterFactory FilterFactory = new FilterFactory();

	/// <summary>
	/// 入力されたフィルター文字でフィルターを再適用する
	/// </summary>
	public void ApplyFilter()
	{
	    // フィルターをクリア
	    this.DataGridRef.FilterExpressions.Clear();

	    // 入力値が無い場合は、処理終了
	    if (string.IsNullOrEmpty(this.FilterText))
	    {
	        return;
	    }

	    string expression = this.FilterText;

	    // 選択されたカラムを対象にフィルタ
	    FilterExpression column = this.FilterFactory.Property(this.FilterColumn);
	    FilterExpression filter = new FilterExpression();

	    // "含む"条件でフィルターを設定
	    filter = column.Contains(expression);

	    this.DataGridRef.FilterExpressions.Add(filter);

	    // 再描画を行う
	    StateHasChanged();
	}
}

入力中のイベント

oninput イベント


<input type="text" @bind-value="FilterText" @oninput="OnFilterTextChanged">

@code {
    /// <summary>
    /// テキストボックスの入力変更イベント
    /// </summary>
    /// <param name="args">イベント引数</param>
    private void OnFilterTextChanged(ChangeEventArgs args)
    {
        // 入力値を FilterText に反映
        this.FilterText = args.Value.ToString();
        // フィルター再適用
        this.ApplyFilter();
    }
}

ボタンのクリックイベント

onclickイベント


<button @onclick="OnClear">クリア</button>

@code {
    /// <summary>
    /// クリアボタンをクリックした時の処理
    /// </summary>
    private void OnClear()
    {
        this.FilterText = null;
        this.ApplyFilter();
    }
}

まとめ

本記事では、Blazor のイベントの実装方法について解説しました。

次の記事では、本シリーズで紹介した Blazor の機能のまとめ記事を作成する予定です。

開発全般に関するご相談はお任せください！

インフラジスティックス・ジャパンでは、各プラットフォームの特別技術トレーニングの提供や、開発全般のご支援を行っています。

プロフェッショナルサービス

「古い技術やサポート終了のプラットフォームから脱却する必要があるが、その移行先のプラットフォームやフレームワークの検討が進まない、知見がない。」

「新しい開発テクノロジーを採用したいが、自社内にエキスパートがいない。日本語リソースも少ないし、開発を進められるか不安。」

「自社のメンバーで開発を進めたいが、これまで開発フェーズを外部ベンダーに頼ってきたため、ツールや技術に対する理解が乏しい。」

「UIを刷新したい。UIデザインやUI/UXに関する検討の進め方が分からない。外部のデザイン会社に頼むと、開発が難しくなるのではないか、危惧している。」

といったご相談を承っています。

お問い合せはこちらからお気軽にご相談ください。