Blazor Desktop で、ページ ( html / razor ) の Style を C# で保存するようにした

Blazor Desktop のスタイル設定を、ローカルの json ファイルに保存したり読み出したりしたいと思ったが、
JavaScript の fetch 関数は使えないようなので、下記のようにした。

前提

今回は body 要素の backgroundcolor と forecolor の設定を読み書きする。

下記の内容の settings.json がある事。(色は何でもいい。)

{"bodyBackgroundColor":"#000000","bodyForeColor":"#000000"}

設定ファイル読み取り時

C# で JSON ファイルを読み取って JavaScript に渡してスタイルを適用する。

// JSON ファイルから設定を読み取って、JavaScript の applySettings 関数に渡す。
protected override async void OnInitialized()
{
    var text = await File.ReadAllTextAsync(@"D:\settings.json", System.Text.Encoding.UTF8);
    await js.InvokeAsync<string>("applySettings", text);
}

// 設定を保持するオブジェクト
var settings = {
    "bodyBackgroundColor": "",
    "bodyForeColor": ""
}

// C# から呼び出されて、settings に保存してから、画面に反映。
// 引数は JSON 形式の文字列。
function applySettings(settingJsonString) {
    var obj = JSON.parse(settingJsonString);

    settings.bodyBackgroundColor = obj.bodyBackgroundColor;
    settings.bodyForeColor = obj.bodyForeColor;

    document.getElementsByTagName("body")[0].style.backgroundColor = settings.bodyBackgroundColor;
    document.getElementsByTagName("body")[0].style.color = settings.bodyForeColor;
}

設定保存時

JavaScript から C# に、JSON 文字列化した設定を渡して保存する。

// C# から呼び出された時に、設定を JSON 化して渡す関数
function getSettings() {
    return JSON.stringify(settings);
}

// 保存するサンプル書く為だけなので、OnAfterRender にしているが、保存のタイミングは好みで。
// JavaScript から受け取った JSON 形式のテキストをファイルに保存する。
protected override async void OnAfterRender(bool firstRender)
{
    var text = await js.InvokeAsync<string>("getSettings");
    await File.WriteAllTextAsync(@"D:\settings.json", text, System.Text.Encoding.UTF8);
}