0.Intro

ちょっとした開発でBlazorを使っています。不慣れなので如何にもBlazorという要素は使用しておらずinputタグ,Buttonタグ等でやりくりしています。それでも所謂SPAの便利さを十分に享受できて便利になったとつくづく思います。
そんな中、あるデータのグルーピングをselectタグから選んだキーワードで変えながら比較して見るという案件がありました。キーワードを選ばせてグルーピングを変えるという機能は簡単にできたのですが、ではselectタグを初期値に戻すにはどうすれば良いか、大変悩みました。
画面表示時の最初の表示時はselectタグのvalueに紐付けた変数に値を代入するとその値に設定してくれます。ただ初回以降selectの値を変更するとvalueに紐付けた変数に値を代入しても変更されません。ある値に設定したいという時の第一選択肢はbindなのですが効きませんでした。selectにて値変更した後の後続の処理を入れたいので@onchangeを使っていました。なので@bindだとエラーにもなります。
そんな中、色々調べた結果以下のようにすると実現できました。

1.Code

@page "/selsample"

<PageTitle>SelSample</PageTitle>


 <select @bind=SelValue>
    @foreach(var t in @_menu)
    {
        <option value=@t>@t</option>
    }

</select>

    @if(_countlist.Count !=0)
    {
        @foreach(var i in @_countlist)
        {
            <p>@i</p>
        }
    }
    <button @onclick="Reset">
        Reset
    </button>

@code {

    List<string> _menu = new List<string> { "1", "3", "5", "7", "9"};
    List<string> countlist = new List<string> { "1", "2", "3", "4", "5","6", "7", "8", "9", "10"};
    List<string> _countlist = new List<string>();
    private string _SelValue = "1";
    
    private void Reset()
    {
        SelValue = "1";
    }

    private string SelValue
    {
        get {
            _countlist = countlist.Where(e => int.Parse(e) >= int.Parse(_SelValue)).ToList();
            return _SelValue; 
        
        }
        set
        {
                _SelValue = value;            
        }
    }
}

2.Explanation

カスタムバインディング形式、なるほど思いました。これだとバインドしつつ、必要な処理も書けますね。
目的通りの動きになりました。

簡単ではありますが大変悩みましたので共有させていただきます。