Radzen.BlazorのDatePickerをダイアログで表示する
はじめに
<本記事の対象者>
Blazor（ブレイザー）を始めたけど、ダイアログ表示＆返却がうまく動かないひと
<記事概要>
Radzen.Blazorは非常に強力なフロント側のフレームワークを提供してくれますが、DialogServiceまわりが扱いにくいと感じたので、通常のEventCallbackで結果を返すやり方の説明です。
参考URL：https://blazor.radzen.com/dialog
開発環境
Visual Studio 2019 v16.4.5（Bootstrap v4.3.1）
Radzen.Blazor v2.1.20
セットアップ
Visual Studio 2019のセットアップ
https://docs.microsoft.com/ja-jp/visualstudio/install/install-visual-studio?view=vs-2019Blazorプロジェクトの作成手順
[ファイル] - [新規作成] - [プロジェクト...] で新しいプロジェクトを作成する。![20200213_1.jpg]()
![20200213_2.jpg]()
![20200213_3.JPG]()
作成すると以下の構成でソリューションが作成されます。![20200213_4.JPG]()
Radzen.Blazorのセットアップ
https://blazor.radzen.com/get-started実行
【F5】でビルド実行されます。
レガシーEdgeは対応していないので最新Edgeをお勧めします。Chromeでも動きますが、Edgeの方が速い気がします。![20200213_5.JPG]()
やり方
デフォルト構成の変更
NavMenu.razorを変更し、カレンダー画面を呼べるようにします。
25行目に下記を挿入する。
<li class="nav-item px-3">
<NavLink class="nav-link" href="calendar">
<span class="oi oi-calendar" aria-hidden="true"></span> Calendar
</NavLink>
</li>
新規ファイルの追加
以下の２つを追加します。
・Calendar.razor : カレンダー画面（上記のナビメニューの遷移先）
・CalendarDialog.razor : カレンダー画面上のボタンを押して表示するカレンダーダイアログ画面
@page "/calendar"
<h3>Calendar</h3>
<div>日付：@CurrentDatetimePrint</div>
<RadzenButton Text="ダイアログ表示" Click="RadzenButton_Click"></RadzenButton>
<CalendarDialog @ref="calendarDialog" currentDatetime="_currentDatetime" OnSelected="CalendarDialog_Selected"></CalendarDialog>
@code {
private CalendarDialog calendarDialog { get; set; }
private DateTime _currentDatetime { get; set; } = DateTime.Now;
public string CurrentDatetimePrint
{
get
{
return string.Format("{0}", _currentDatetime.ToString("yyyyMMdd"));
}
}
private void RadzenButton_Click()
{
calendarDialog.Open();
}
private void CalendarDialog_Selected(DateTime result)
{
_currentDatetime = result;
}
}
<div class="modal @ModalClass" tabindex="-1" role="dialog" style="display:@ModalDisplay">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<RadzenDatePicker TValue="DateTime" Inline="true" Change="@(args => Change(args, "Calendar", "MM/dd/yyyy"))" />
</div>
<div class="modal-footer">
<button @onclick="OnClickOK">OK</button>
<button @onclick="OnClickCancel">Cancel</button>
</div>
</div>
</div>
</div>
@if (ShowBackdrop)
{
<div class="modal-backdrop fade show"></div>
}
@code {
[Parameter]
public DateTime currentDatetime { get; set; } = DateTime.Now;
[Parameter]
public EventCallback<DateTime> OnSelected { get; set; }
private DateTime _resultDatetime;
public string ModalDisplay = "none;";
public string ModalClass = "";
public bool ShowBackdrop = false;
public void Open()
{
ModalDisplay = "block;";
ModalClass = "Show";
ShowBackdrop = true;
StateHasChanged();
}
public void Close()
{
ModalDisplay = "none";
ModalClass = "";
ShowBackdrop = false;
StateHasChanged();
}
DateTime calendarDialogResult = DateTime.Now;
void Change(DateTime? value, string name, string format)
{
_resultDatetime = (DateTime)value;
StateHasChanged();
}
private void OnClickOK()
{
OnSelected.InvokeAsync(_resultDatetime);
Close();
StateHasChanged();
}
private void OnClickCancel()
{
OnSelected.InvokeAsync(currentDatetime);
Close();
StateHasChanged();
}
}
ポイントとしては、
「<div class="modal ～」のところはBootstrapを使用し、modal-bodyに「RadzenDatePicker」を埋め込んでいます。
なのでUIがどっちつかずになっているのがデメリットです。
デモ
終わりに
Webシステム開発では、WindowsFormみたいにダイアログが別画面に分かれてないので不便でした。Blazorはダイアログをコンポーネント化して、Javascript構文なしで書けるため、別画面として捉えて開発することができるのが良いですね。
また、Blazorは半年以前の個人サイト情報はあまり参考にならないくらい仕様変更が発生しています。
備忘録としてザックリ書きましたが、今後も仕様が変わる可能性があるため、あとから見直します。