Blazor C#でdatalistの表示と値を別々に管理したい！！

JavaScriptを使わずC#で出来ないか...
と思い試行錯誤した結果 次のようにすることで
できることが分かりました。

View.razor

@page "/view"

<input list="view-list" @onchange="ChangeSelect" />
<datalist id="view-list">
    @foreach (var view in Views)
    {
        <option value="@view.Name"></option>
    }
</datalist>

<div>選択された値は： @ViewCode</div>

@code{
}

View.razor.cs

//
public partial class view
    {
        // 値保持用プロパティ
        private int? Code { get; set; }
        // 表示データ用List
        private List<ViewData> Views { get; set; }

        protected override void OnInitialized()
        {
            // データセット
            Views = new List<ViewData>()
            {
                new ViewData()
                {
                   Code = 0,
                   Name = "りんご",
                },
                new ViewData()
                {
                   Code = 1,
                   Name = "ごりら",
                },
                new ViewData()
                {
                   Code = 2,
                   Name = "らっぱ",
                },
                new ViewData()
                {
                   Code = 3,
                   Name = "パソコン",
                }
            };
        }

        private void ChangeSelect(ChangeEventArgs e)
        {
            // テキスト入力が可能なため未入力でないか判定
            if (e.Value != null && !string.IsNullOrEmpty(e.Value.ToString()))
            {
                // 一致するCodeを取得
                var selectCode = Views.FirstOrDefault(x => x.Name.Equals(e.Value));
                // データに格納　選択肢に無い値であればnullを設定
                Code = selectCode != null ? selectCode.Code : null;
            }
        }
    }

    public class ViewData
    {
        public int Code { get; set; }
        public string Name { get; set; }
    }

説明

表示・選択用として optionタグに page.Name 設定します。
選択値保存用として コード側にCodeプロパティを設定します。

view-listの値が変更されたときにChangeSelectメソッドが実行され
選択されたNameと一致するデータがあるかを判定し結果をCodeプロパティに設定します。

実行結果

↓

↓

追記　画面表示時にいずれかを初期選択としたい場合(今回はごりらを初期選択とする)

datalistの下にinputタグを設定しコード側で作成したNameプロパティをinputタグのvalueに設定
datalistの値を設定時にName,ViewCodeプロパティに初期選択値を設定することで初期選択を設定することができました。C#だけでもここまで柔軟に設定できて満足いく結果になりました！

View.razor

@page "/view"

<datalist id="view-list">
    @foreach (var view in Views)
    {        
        if (view.ViewFlg){
            // ↓初期選択項目を設定
            Name = view.Name;
            ViewCode = view.Code;
        }
        <option value="@view.Name"></option>
    }
</datalist>
<input list="view-list" @onchange="ChangeSelect" value="@Name" />

<div>選択された値は： @ViewCode</div>

@code {
}

View.razor.cs

// 初期選択の文言表示用
private string Name { get; set; }

protected override void OnInitialized()
{
    Views = new List<ViewData>()
    {
        new ViewData()
        {
           Code = 0,
           Name = "りんご",
           ViewFlg = false,
        },
        new ViewData()
        {
           Code = 1,
           Name = "ごりら",
           ViewFlg = true,
        },
        
    };
}

public class ViewData
{
    public int Code { get; set; }
    public string Name { get; set; }
    // 初期選択用のフラグを保持
    public bool ViewFlg { get; set; }
}

GitHub

リポジトリを公開しています。参考になれば幸いです。
https://github.com/krusetyak/datalistSample