CODEWITHSUNDEEP
blazorblazor-server-sideblazor-webassembly.net-8.0
Enrico
Enrico

Reputation: 6246

Rendermode for components in NET8 Blazor

I'm updating my components from NET6 to NET8, for example this component. In this component, there is a dependency on a JavaScript script that is added in the interop class.

If I change the framework of the project, the web application is completely stuck.

So, I thought I have to add the line

@rendermode RenderMode.InteractiveAuto

or

@attribute [RenderModeInteractiveAuto]

or one of the other RenderMode but in a component this line is not recognized.

What is the best way to try a component in NET8 for Blazor?

Upvotes: 1

Views: 3448

Answers (1)

MrC aka Shaun Curtis
MrC aka Shaun Curtis

Reputation: 30167

You're probably breaking a Render Mode propagation rule see https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-mode-propagation.

We're all new to this, but my guess is you shouldn't be trying to set the render mode in a component in a library. It should work within the page or form context.

Also this code will throw an exception during pre-render.

        public async ValueTask Setup(DotNetObjectReference<ImageSelect> dotNetObjectRef, string id, Config config)
        {
            //var module = await moduleTask.Value;
            //Console.WriteLine($"Invoke imageSelectSetup");
 
            try
            {
                var module = await moduleTask.Value;
                Console.WriteLine($"Invoke imageSelectSetup");
            }
            catch (Exception ex)
            {
                Console.WriteLine($"Exception: {ex.Message}");
            }
        }

You'll see:

Exception: JavaScript interop calls cannot be issued at this time. This is because the component is being statically rendered. When prerendering is enabled, JavaScript interop calls can only be performed during the OnAfterRenderAsync lifecycle method.

Lazy loading won't save you here, because there's no JS Context in a server render. It's why in general you use OnAfterRender for JS interop because that never gets called on a server render.

Also, if you're interested, take a look at the QuickGrid code to see how it handles the registration process.

Upvotes: 2

Related Questions