入力欄の値が変更されたらタイミングのイベント処理を、@onchange で実装しようとしたのですが、@onchange イベントだとロストフォーカスされるまでイベントが発生せず、使い勝手がイマイチですが、@oninput イベントを使うと良い感じです。
ソースコードはGitHubで公開しています。
ソースコード構成
・入力イベント検証用の画面を追加。
ソースコード変更内容を解説
Pages/OnEvent.razor
・入力イベントの検証画面。
・テキスト入力欄と日付入力に、@onchangeイベント、@oninputイベントを加え、それぞれの動きを比較できるようにしています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
@page "/OnEvent" <h1>OnEvent</h1> <hr> <h3><input type="text"></h3> <p>Text onchange Event / ChangeEventArgs value : @onchange_ChangeEventArgsvalue1</p> <p>Text oninput Event / ChangeEventArgs value : @oninput_ChangeEventArgsvalue1</p> <input type="text" @onchange="OnChangeEvent1" @oninput="OnInputEvent1" /> <hr> <h3><input type="date"></h3> <p>Datetime onchange Event / ChangeEventArgs value : @onchange_ChangeEventArgsvalue2</p> <p>Datetime oninput Event / ChangeEventArgs value : @oninput_ChangeEventArgsvalue2</p> <input type="date" @onchange="OnChangeEvent2" @oninput="OnInputEvent2" max="9999-12-31" /> <hr> <EditForm Model="_test"> <h3><InputText></h3> <p>Text onchange Event / ChangeEventArgs value : @onchange_ChangeEventArgsvalue3</p> <p>Text oninput Event / ChangeEventArgs value : @oninput_ChangeEventArgsvalue3</p> <InputText @bind-Value="_test.test1" @onchange="OnChangeEvent3" @oninput="OnInputEvent3" /> </EditForm> <br> <br> @* <hr> <h3><InputDate></h3> <p>Datetime onchange Event / ChangeEventArgs value : @onchange_ChangeEventArgsvalue4</p> <p>Datetime oninput Event / ChangeEventArgs value : @oninput_ChangeEventArgsvalue4</p> <InputDate @onchange="OnChangeEvent4" @oninput="OnInputEvent4" max="9999-12-31" /> *@ @code { private class test { public string test1; } private test _test = new(); private string onchange_ChangeEventArgsvalue1; private string oninput_ChangeEventArgsvalue1; private void OnChangeEvent1(ChangeEventArgs args) { onchange_ChangeEventArgsvalue1 = (string)args.Value; } private void OnInputEvent1(ChangeEventArgs args) { oninput_ChangeEventArgsvalue1 = (string)args.Value; } private string onchange_ChangeEventArgsvalue2; private string oninput_ChangeEventArgsvalue2; private void OnChangeEvent2(ChangeEventArgs args) { onchange_ChangeEventArgsvalue2 = args.Value.ToString(); } private void OnInputEvent2(ChangeEventArgs args) { oninput_ChangeEventArgsvalue2 = args.Value.ToString(); } private string onchange_ChangeEventArgsvalue3; private string oninput_ChangeEventArgsvalue3; private void OnChangeEvent3(ChangeEventArgs args) { onchange_ChangeEventArgsvalue3 = (string)args.Value; } private void OnInputEvent3(ChangeEventArgs args) { oninput_ChangeEventArgsvalue3 = (string)args.Value; } //private DateTime onchange_ChangeEventArgsvalue4; //private DateTime oninput_ChangeEventArgsvalue4; //private void OnChangeEvent4<T>(T value) //{ // //onchange_ChangeEventArgsvalue4 = DateTime.Parse((string)args.Value); //} //private void OnInputEvent4(ChangeEventArgs args) //{ // oninput_ChangeEventArgsvalue4 = DateTime.Parse((string)args.Value); //} } |
Shared/NavMenu.razor
・検証画面へのリンクを追加しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<div class="top-row pl-4 navbar navbar-dark"> <a class="navbar-brand" href="">WebApplication1</a> <button class="navbar-toggler" @onclick="ToggleNavMenu"> <span class="navbar-toggler-icon"></span> </button> </div> <div class="@NavMenuCssClass" @onclick="ToggleNavMenu"> <ul class="nav flex-column"> <li class="nav-item px-3"> <NavLink class="nav-link" href="" Match="NavLinkMatch.All"> <span class="oi oi-home" aria-hidden="true"></span> Home </NavLink> </li> <li class="nav-item px-3"> <NavLink class="nav-link" href="counter"> <span class="oi oi-plus" aria-hidden="true"></span> Counter </NavLink> </li> <li class="nav-item px-3"> <NavLink class="nav-link" href="fetchdata"> <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data </NavLink> </li> <li class="nav-item px-3"> <NavLink class="nav-link" href="OnEvent"> <span class="oi oi-list-rich" aria-hidden="true"></span> OnEvent </NavLink> </li> </ul> </div> @code { private bool collapseNavMenu = true; private string NavMenuCssClass => collapseNavMenu ? "collapse" : null; private void ToggleNavMenu() { collapseNavMenu = !collapseNavMenu; } } |
Visual Studio プロジェクト
今回使った Visual Studio プロジェクト テンプレートは、Blazor Server 5.0 の認証無し、HTTPS無しです。
コメント