CODEWITHSUNDEEP
asp.net-coreblazorblazor-server-side
BRass
BRass

Reputation: 3838

Blazor Server, Conditional Elements + JS Invoking

I have a Blazor Server app that is a multi-step "wizard" form. After each relevant step the state is adjusted, and new HTML is shown/hidden via conditional statements (simple example below).

if (IsStepSignature)
{
    <div>Signature HTML here</div>
}

This all works just fine. My problem comes when I need to invoke some JS logic on the dynamically generated HTML from above (e.g. click handlers to hook up external JS libraries). When I handle the "Next" click, I can invoke the JS just fine...but it is not yet seeing the dynamic HTML from above. Is there a way to invoke some JS, and control it so that it doesn't execute until after the page is redrawn from the C# code execution?

5/18/2020 Update from Nik P Can leverage some flags and use OnAfterRenderAsync to control this ordering. This does work, but it does require some extra hops to/from the server. Below is what I see when implementing this. This may just be the nature of Blazor Server, as one of the pros/cons is some known added chattiness. In total these requests were 2.5K, so extremely small.

CLIENT    -->    Browser Dispatch Event (NEXT CLICK)
Render    <--    SERVER
CLIENT    -->    Render Complete
Invoke JS <--    SERVER
CLIENT    -->    Invoke Complete

Upvotes: 0

Views: 599

Answers (1)

Nik FP
Nik FP

Reputation: 3063

The issue you are having has to do with the element not existing in the client side HTML at all until after the re-render takes place. So one way to do this is to set a boolean flag in your C# code that says there is code that needs to be run after the render, and populate support fields that you will need for your JS Interop. Whenever you need to run the JS interop, set your flag to true, set your support fields to the values you need for the JS interop call, and then do something that kicks a DOM diff calculation. (Even StateHasChanged should be enough, but adding your items conditionally as you mentioned will also do it) Then, override your OnAfterRenderAsync method as follows:

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if(firstRender)
    {
        // any first render code
    }

    if(yourFlag)
    {
        YourJSInteropMethod(supportField1, supportfield2);
        yourflag = false;  
    }
}

The simplicity in this approach is that the DOM update will always happen ahead of the OnAfterRenderAsync call, so your HTML will be populated with what you are targeting with JS.

Upvotes: 2

Related Questions