ASP.NET Core Blazor WebAssembly - イベント【フロントエンド開発入門者向け】 - インフラジスティックス・ジャパン株式会社Blog

f:id:furugen098:20200918132253p:plain

こんにちは！

テクニカルコンサルティングチームの古堅です。

本記事では、ASP.NET Core Blazor (以下 Blazor) のイベントについて解説します！

docs.microsoft.com

Blazor のイベントについて
- イベント引数の受け取り
- 主要なイベント一覧と引数の型
サンプル
まとめ
開発全般に関するご相談はお任せください！

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

サンプル

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

f:id:furugen098:20210128112606g:plain

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

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();
    }
}