.net 8 RC2 blazor dialogタグ

.net 8 RC2からdialogタグのイベントとして、@oncloseと@oncancelが追加された。これにより、ダイアログのクローズ時とESCキーによるキャンセル時にC#コードを呼び出すことができるようになった。

@oncloseはダイアログが閉じた時、@oncancelはESCキーでダイアログを閉じたときに呼び出される。(@oncloseイベントはCancel時でも呼び出されるので、ESCキーでダイアログを閉じた時には、@oncancel⇒@oncloseの順で呼び出される。)

以下に例を挙げる

<button class="btn btn-primary" onclick="dlg.showModal()">ダイアログ表示</button>
<br/>
<hr/>
<pre>@Message</pre>
<hr/>
<dialog id="dlg" @onclose="OnDialog_Close" @oncancel="OnDialog_Cancel">
    <form method="dialog">
        <table>
            <tr>
                <td><span style="font-size:24pt;font-weight:bold">Hello World</span></td>
            </tr>
            <tr>
                <td> </td>
            </tr>
            <tr>
                <td>
                    <button class="btn btn-primary" @onclick="OnOK_Click">OK</button>
                </td>
            </tr>
        </table>
    </form>
</dialog>

@code {
    protected string Message = "";
    int cnt;
    protected override void OnInitialized() {
        cnt = 1;
    }
    protected void OnOK_Click() {
        Message += $"OK Button Click({cnt})->";
    }
    protected void OnDialog_Close() {
        Message += $"Dialog Close({cnt}) ";
        cnt++;
    }
    protected void OnDialog_Cancel() {
        Message += $"Dialog Cancel({cnt})->";
    }
}

以下の実行例のように、OKボタンでクローズされた場合は、@closeで指定されたイベントハンドラのみ実行され、ESCキーで閉じた場合は@cancel⇒@onclickの順でイベントハンドラが実行されている。

まぁ、どちらかと言えば、Dialog中のボタンのハンドラで処理する方が多いかもしれないけれど・・・

takezou について

ソフトウェア開発会社(ITと言う言葉は大嫌い)で働く、元技術者。 未だに、社内システム位は作ってますが・・・ プログラミング言語はC#が好き。 好きなことだけ拾って投稿しているので、内容にはあまり期待しないでねw
カテゴリー: .NET, asp.net core, Blazor, C#, 技術系 パーマリンク

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください