[ASP.NET Blazor Server][Radzen]Radzen Blazor Dialogの使い方

@using Microsoft.JSInterop
@using System.Text.Json

@* ダイアログ表示用サービス *@
@inject DialogService DialogService
@* ブラウザの機能（localStorageやConsole）を呼び出すためのランタイム *@
@inject IJSRuntime JSRuntime

<div class="rz-p-12 rz-text-align-center">
    @* ボタンクリックで OpenOrder メソッドを呼び出す *@
    <RadzenButton Text=@($"Order {orderID} details") ButtonStyle="ButtonStyle.Secondary" Click=@OpenOrder />
</div>

@code {
    int orderID = 10248;

    // --- ダイアログを開くメイン処理 ---
    public async Task OpenOrder()
    {
        // 1. ブラウザの保存領域(localStorage)から前回の設定（位置・サイズ）を読み込む
        await LoadStateAsync();

        // 2. ダイアログを開く
        await DialogService.OpenAsync<DialogCardPage>($"Order {orderID}",
               // 子コンポーネント(DialogCardPage)に渡すパラメータ
               new Dictionary<string, object>() { { "OrderID", orderID } },
               // ダイアログのオプション設定
               new DialogOptions() 
               {
                   Resizable = true, // サイズ変更可能にする
                   Draggable = true, // ドラッグ移動可能にする
                   Resize = OnResize, // リサイズされた時のイベントハンドラ登録
                   Drag = OnDrag,     // ドラッグされた時のイベントハンドラ登録
                   
                   // 保存された設定があればそれを適用、なければデフォルト値を使用
                   Width = Settings != null ? Settings.Width : "700px", 
                   Height = Settings != null ? Settings.Height : "512px",
                   Left = Settings != null ? Settings.Left : null, 
                   Top = Settings != null ? Settings.Top : null
                });

        // 3. (念のため)現在の状態を保存
        await SaveStateAsync();
    }

    // --- ドラッグ（移動）時のイベントハンドラ ---
    void OnDrag(System.Drawing.Point point)
    {
        // デバッグ用：ブラウザのコンソールに座標を出力
        JSRuntime.InvokeVoidAsync("eval", $"console.log('Dialog drag. Left:{point.X}, Top:{point.Y}')");

        if(Settings == null)
        {
            Settings = new DialogSettings();
        }

        // 新しい座標を設定オブジェクトに記録
        Settings.Left = $"{point.X}px";
        Settings.Top = $"{point.Y}px";

        // 状態を保存（非同期処理を呼び出す）
        InvokeAsync(SaveStateAsync);
    }

    // --- リサイズ（サイズ変更）時のイベントハンドラ ---
    void OnResize(System.Drawing.Size size)
    {
        // デバッグ用：ブラウザのコンソールにサイズを出力
        JSRuntime.InvokeVoidAsync("eval", $"console.log('Dialog resize. Width:{size.Width}, Height:{size.Height}')");

        if(Settings == null)
        {
            Settings = new DialogSettings();
        }

        // 新しいサイズを設定オブジェクトに記録
        Settings.Width = $"{size.Width}px";
        Settings.Height = $"{size.Height}px";

        // 状態を保存
        InvokeAsync(SaveStateAsync);
    }

    // --- 設定保持用のプロパティ ---
    DialogSettings _settings;
    public DialogSettings Settings 
    { 
        get
        {
            return _settings;
        }
        set
        {
            if (_settings != value)
            {
                _settings = value;
                // 値がセットされたら保存処理を走らせる
                InvokeAsync(SaveStateAsync);
            }
        }
    }

    // --- ブラウザから設定を読み込む処理 ---
    private async Task LoadStateAsync()
    {
        await Task.CompletedTask;

        // localStorage の "DialogSettings" キーからJSON文字列を取得
        var result = await JSRuntime.InvokeAsync<string>("window.localStorage.getItem", "DialogSettings");
        if (!string.IsNullOrEmpty(result))
        {
            // JSONをC#のオブジェクトに復元
            _settings = JsonSerializer.Deserialize<DialogSettings>(result);
        }
    }

    // --- ブラウザに設定を保存する処理 ---
    private async Task SaveStateAsync()
    {
        await Task.CompletedTask;

        // 現在の Settings オブジェクトをJSON化して localStorage に書き込む
        await JSRuntime.InvokeVoidAsync("window.localStorage.setItem", "DialogSettings", JsonSerializer.Serialize<DialogSettings>(Settings));
    }

    // --- 設定データ定義クラス (POCO) ---
    public class DialogSettings
    {
        public string Left { get; set; }
        public string Top { get; set; }
        public string Width { get; set; }
        public string Height { get; set; }
    }
}