スポンサーリンク

Blazor Server ボタンクリックでsubmitさせない

.NET CoreBlazor Server 5.0C#Visual Studio 2019


Blazor Serverの初期プロジェクトに設けられているサンプルのボタンは、submitするボタンなので、それを元に画面にボタンを追加して行くと、追加した全てのボタンがsubmitしてしまい、submitするボタン/submitしないボタン、どちらも画面に設けたい場合にハマるという事が起こりがちです。
submitボタン、通常ボタン、リンクボタンの実装を比較できるようにサンプルを作成しました。
ソースコードはGitHubで公開しています。

ボタンのパターンについて

submitボタン

・submit時に<ValidationMessage><ValidationSummary>が実行される。
・<button>に type=”submit” を設定するとsubmitする。
・typeを何も設定していない場合、デフォルトでsubmitする。
・@onclickイベントハンドラを加えると、submitとイベントハンドラの両方が実行される。

submitしない通常ボタン

・<button>に type=”button” を設定するとsubmitしなくなる。
・@onclickイベントハンドラは実行される。

リンクボタン

・<a>リンクタグの見た目をボタン化したもの。
・<a>に target=”_blank” を設定することで、簡単に遷移先URLを別タブで開くボタンを実装できる。

ソースコード構成

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

Const/Message.cs

・Validationで表示するメッセージを定数として追加。

Model/DataModel1.cs

・画面にBindするデータクラスを追加。

Pages/ButtonPattern.razor

・ボタンパターンを実装したサンプル画面を追加。
・submitで実行されるイベントハンドラはValidSubmit()、クリックで実行されるイベントハンドラはIncrementCount()にしています

Shared/NavMenu.razor

・サンプル画面へのリンクを追加。

_Imports.razor

・データクラスへの参照を追加。

コメント

タイトルとURLをコピーしました