Web-Development-with-Blazor-Second-Edition/Chapter12/MyBlog/Components/RazorComponents/HighChart.razor

@inject Microsoft.JSInterop.IJSRuntime jsruntime

<div>
    <div id="@id.ToString()"></div>
</div>

@code
{
    [Parameter] public string Json { get; set; }
    private string id { get; set; } = "Highchart" + Guid.NewGuid().ToString();


    protected override void OnParametersSet()
    {
        StateHasChanged();
        base.OnParametersSet();
    }
    IJSObjectReference jsmodule;
    protected async override Task OnAfterRenderAsync(bool firstRender)
    {
        if (!string.IsNullOrEmpty(Json))
        {
            jsmodule = await jsruntime.InvokeAsync<IJSObjectReference>("import", "/_content/Components/RazorComponents/HighChart.razor.js");
            await jsmodule.InvokeAsync<string>("loadHighchart", new object[] { id, Json });
        }

        await base.OnAfterRenderAsync(firstRender);
    }
}