Blazor Server で入力欄に値を入力した後、Enterキーが押されたタイミングでイベント処理を行う

<input>タグに値が入力された後、Enterキーが押されたタイミングで処理を行う場合のサンプルを作成しました。
この入力欄は、バーコード入力欄としても使えます。
ソースコードはGitHubで公開しています。

このサンプルでは、下記の動きを実装しています。
・ <input>に「1」が入力されている状態で、Enterキーを押したらIndexページを表示。
・ <input>に「2」が入力されている状態で、Enterキーを押したらCounterページを表示。
・ <input>に「3」が入力されている状態で、Enterキーを押したらFetchDataページを表示。

ソースコード変更内容を解説

NavMenu.razor

・<input>タグを<form>タグで囲うことで、Enterキーが押されたらsubmitされるようにしています。<EditForm>内でも<form>タグは別のsubmitとしてイベント処理されるので使い勝手は良い。
・<input>に入力された値は、_MenuIDメンバ変数に格納しています。
・submit先のイベントハンドラには MenuIDEnterメソッドを設定しています。


        <li class="nav-item px-3">
            <form @onsubmit=MenuIDEnter>
                <input @bind="_MenuID" class="form-control" style="max-width: 50px; text-align: left" />
            </form>
        </li>

</form>

</li>

・MenuIDEnterメソッドでは、_MenuIDメンバ変数の値を元に、遷移先画面を切り替えています。


    [Inject] protected NavigationManager _NavigationManager { get; set; }

    private string _MenuID { get; set; }

    /// <summary>
    /// メニューID Enter
    /// </summary>
    private void MenuIDEnter()
    {
        switch (_MenuID)
        {
            case "1":
                _NavigationManager.NavigateTo("/");
                return;
            case "2":
                _NavigationManager.NavigateTo("/counter");
                return;
            case "3":
                _NavigationManager.NavigateTo("/fetchdata");
                return;
        }
    }

[Inject] protected NavigationManager _NavigationManager { get; set; }

private string _MenuID { get; set; }

/// <summary>

/// メニューID Enter

/// </summary>

private void MenuIDEnter()

{

switch (_MenuID)

{

case "1":

_NavigationManager.NavigateTo("/");

return;

case "2":

_NavigationManager.NavigateTo("/counter");

return;

case "3":

_NavigationManager.NavigateTo("/fetchdata");

return;

}

※実装内容は簡単なものですが、<form><input>タグの組み合わせで成功するまで結構悩みました

下記の実装ではいずれも上手く行きません。
<EditForm>タグではEnterキーを押してもsubmitされず、@onkeydownイベントでは<InputText><input>タグに入力された値を正しく取得できません（bindしている変数には1つ前に入力した値が入ってる）。


<EditForm Model="_MenuIDFilter" OnValidSubmit="HandleValidSubmit">
    <InputText @bind-Value="_MenuIDFilter._MenuID" class="form-control" style="max-width: 100px; text-align: left" />
    <button type="submit">Submit</button>
</EditForm>

<EditForm Model="modelClass" OnValidSubmit="HandleValidSubmit">
    <input @onkeypress="@(async e => await KeyPress(MyCurrentEditContext, e))" @bind-value="modelClass.TextValue" />
</EditForm>

<input type="text" @bind="_MenuID" @onkeydown="@MenuID_Enter" />

<button type="submit">Submit</button>

</EditForm>

<input @onkeypress="@(async e => await KeyPress(MyCurrentEditContext, e))" @bind-value="modelClass.TextValue" />

</EditForm>

Visual Studio プロジェクト

今回使った Visual Studio プロジェクトテンプレートは、Blazor Server 5.0 の認証無し、HTTPS無しです。