ASP.Net Core Blazor の SSR でフォ－ムの二重送信を防止する

ASP.Net Core Blazor の SSR でフォ－ムの二重送信を防止する18

2025年4月2日

posted by

ASP.NET Core Identity は Server Side Rendering じゃないと動かない _(:3 」∠ )_

ログイン画面やパスワ－ド変更画面は Identity が Cookie を使う関係で SSR じゃないと動作しない。

少なくとも執筆時点 (2025 年 04 月 02日) だと、Interactive Server Mode にすると無限ル－プみたいな挙動になるはず。

じゃあ古き良き SSR の手法 (JavaScript) でごりごりやればいいじゃんって思うんだけど Blazor だとめんどいというか…UI フレ－ムワ－クの Radzen Blazor Components を入れた後で気付いたというか… (Radzen は DOM 操作だと上手くいかない所がある ? Interactive Server Mode 前提のコンポ－ネント)

で、ど－すっかな－って頭を悩ましてたんだけど一応出来た。

考え方としては Blazor の拡張ペ－ジ読み込みスクリプトの onLoad 関数を作成してペ－ジが読み込まれたタイミングでフォ－ムのサブミットイベントにイベントリスナ－を追加する。

イベントリスナ－に追加する関数は、よくある専用のモ－ダル向け DOM の display プロパティを非表示から表示に切り替える奴。

それでサ－バ－へサブミットしてからレスポンスが返ってくるまでモ－ダルにして SSR によってペ－ジ再描画によってモ－ダル無しになるまで二重送信を抑止するって考え。

コ－ドにすると

page.lazor

<PageScript Src="./page.razor.js" />
<form id="hoge-form" method="post">
    省略
</form>

<div id="modal" />

    省略

page.lazor.css

#modal {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%
    display: none;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: infinity;
}

page.lazor.js

export function onLoad() {
    const modal = document.getElementById('modal');

    document.getElementById('hoge-form').addEventListener('submit', (e) => {
        modal.style.display = 'initial';

        for (const element of event.currentTarget.elements) {
            element.blur();
        }
    });
}

これでフォ－ムのサブミットに連動して画面全体にモ－ダルが表示されるようになる。

我ながらなかなかの力作。

Meaningless Notebook