Blazor SSR error when rendermode is InteractiveWebAssembly

Question

I'm working on a POC trying to understand the full potential of the new hosting models comming up with Blazor in .NET8,

The thing is that, if I understand correctly the intention with SSR, in the case of requiring user interactivity we can choose to have a client-side component with WASM, meanwhile static content can be rendered in server.

With this aim, I created a basic component server side rendered, with StreamRendering activated.

Then, a grid that also contain some buttons is also there, with a simple action button for navigating to the proper item detail.

Something simple

Container component - SSR

@page "/orders"
@using POC.Blazor.WebUI.SSR.Client.Components

@attribute [StreamRendering(true)]


<PageTitle>Orders TEST</PageTitle>

@if (!orders.Any())
{
    <p><em>Loading...</em></p>
}
else
{
    <OrdersGrid 
        Orders="@orders.AsQueryable()"
        @rendermode="RenderMode.InteractiveWebAssembly">
    </OrdersGrid>
}

Grid

@using Microsoft.AspNetCore.Components.QuickGrid

<QuickGrid Items="@Orders">
    <PropertyColumn Property="@(p => p.Id)" Sortable="true" />
    <PropertyColumn Property="@(p => p.Name)" Sortable="true" />
    <PropertyColumn Property="@(p => p.Status)" Sortable="true" />
    <PropertyColumn Property="@(p => p.Priority)" Sortable="true" />
    <PropertyColumn Property="@(p => p.Blocked)" Sortable="true" />
    <PropertyColumn Property="@(p => p.User)" Sortable="true" />
    <PropertyColumn Property="@(p => p.RegisteredDateTime)" Sortable="true" />
    <PropertyColumn Property="@(p => p.DueDateTime)" Sortable="true" />

    <TemplateColumn Title="Actions">
        <button @onclick="@(() => OpenAsync(context))">Open</button>
    </TemplateColumn>
</QuickGrid>

The point is that, if I remove the @rendermode in the container component, the grid is properly loadad without errors, but of course, there is no interactivity when pressing the buttons.

But If I enable the rendermode as shown in the code snippet above (1st one), it renders the grid, but a few seconds before, an error is shown:

Error: One or more errors occurred. (Could not parse the parameter value for parameter '{definition.Name}' of type '{definition.TypeName}' and assembly '{definition.Assembly}'.) at Jn (c:\Workspace\POC.Blazor\POC.Blazor.WebUI.SSR\POC.Blazor.WebUI.SSR\wwwroot_framework\https:\raw.githubusercontent.com\dotnet\runtime\0b25e38ad32a69cd83ae246104b32449203cc71c\src\mono\wasm\runtime\marshal-to-js.ts:349:18) at Ul (c:\Workspace\POC.Blazor\POC.Blazor.WebUI.SSR\POC.Blazor.WebUI.SSR\wwwroot_framework\https:\raw.githubusercontent.com\dotnet\runtime\0b25e38ad32a69cd83ae246104b32449203cc71c\src\mono\wasm\runtime\marshal-to-js.ts:306:28)

What could be the problem? Am I missing something? missunderstanding something? Or is it something that still needs to be fixed before the release version?

Many thanks in advance

Answer 1

after having reported the issue on the AspNetCore repo, MS guys helped me understanding the problem, that accordingly to the documentation was a bit weird, mixed with a situation where the exception thrown was not properly parametrized.

The root cause though, was that in Interactive mode, an IQueryable can't be deserialized, so then a copile of changes were needed:

In the grid: The collection should be of type IEnumerable

and in the QuickGrid

Then the component sends to the grid an IEnumerable.

Here you have the link to the issue in Github