Blazor Components Inside OrchardCore MVC Module stopped working in .Net 8

[mono-wallace]

We are using Blazor components in our OrchardCore application, this all worked perfectly fine for the last two years in all .NET Core en Orchard versions. Unit last week when I updated the application to .NET 8.

After the upgrade, all MVC and Razor pages where Blazor components are used stopped working.
I added the simplified version of our application architecture to this Git repository: https://github.com/mono-wallace/OrchardCore-with-blazor-components
This solution is based on an older post: #2966

The issue can be reproduced by checking out the repository: https://github.com/mono-wallace/OrchardCore-with-blazor-components
out of the box, when running the solution, the message component works as expected.

After updating the .NET version to net8.0 by updating the AspNetCoreTargetFramework to net8.0 by editing the file "Build/Dependencies.AspNetCore.props" the component stops working.

The underlying error that can be viewed in the event viewer is:

An unhandled exception has occurred while executing the request. System.InvalidOperationException: The current thread is not associated with the Dispatcher. Use InvokeAsync() to switch execution to the Dispatcher when triggering rendering or component state.

I have also tried updating the orchard and component packages to the latest versions, but the error exists.

The issue seems to occur in the call to RenderBodyAsync() in the Layout.chtml in the theme project MyTheme.OrchardBlazor, If I drop the component tag inside of my Orchard theme Layout.cshtml (outside any RenderSection) then it works fine there.
Seems to be the way orchard core modules are threaded, but I don't fully understand what is going on there.

Full stack trace:

System.InvalidOperationException: The current thread is not associated with the Dispatcher. Use InvokeAsync() to switch execution to the Dispatcher when triggering rendering or component state.
   at Microsoft.AspNetCore.Components.Dispatcher.AssertAccess()
   at Microsoft.AspNetCore.Components.HtmlRendering.Infrastructure.StaticHtmlRenderer.WriteComponentHtml(Int32 componentId, TextWriter output)
   at Microsoft.AspNetCore.Components.Endpoints.EndpointHtmlRenderer.WriteComponentHtml(Int32 componentId, TextWriter output, Boolean allowBoundaryMarkers, SequenceAndKey sequenceAndKey)
   at Microsoft.AspNetCore.Components.Endpoints.EndpointHtmlRenderer.WriteComponentHtml(Int32 componentId, TextWriter output)
   at Microsoft.AspNetCore.Components.Endpoints.EndpointHtmlRenderer.PrerenderedComponentHtmlContent.WriteTo(TextWriter writer, HtmlEncoder encoder)
   at Microsoft.AspNetCore.Mvc.ViewFeatures.Buffers.ViewBuffer.WriteTo(TextWriter writer, HtmlEncoder encoder)
   at OrchardCore.DisplayManagement.PositionWrapper.WriteTo(TextWriter writer, HtmlEncoder encoder)
   at Microsoft.AspNetCore.Html.HtmlContentBuilder.WriteTo(TextWriter writer, HtmlEncoder encoder)
   at OrchardCore.DisplayManagement.PositionWrapper.WriteTo(TextWriter writer, HtmlEncoder encoder)
   at Microsoft.AspNetCore.Mvc.ViewFeatures.Buffers.ViewBuffer.WriteToAsync(TextWriter writer, HtmlEncoder encoder)
   at Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderLayoutAsync(ViewContext context, ViewBufferTextWriter bodyWriter)
   at Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderLayoutAsync(ViewContext context, ViewBufferTextWriter bodyWriter)
   at Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderAsync(ViewContext context)
   at Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.ExecuteAsync(ViewContext viewContext, String contentType, Nullable`1 statusCode)
   at Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.ExecuteAsync(ViewContext viewContext, String contentType, Nullable`1 statusCode)
   at Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.ExecuteAsync(ActionContext actionContext, IView view, ViewDataDictionary viewData, ITempDataDictionary tempData, String contentType, Nullable`1 statusCode)
   at Microsoft.AspNetCore.Mvc.ViewFeatures.ViewResultExecutor.ExecuteAsync(ActionContext context, ViewResult result)
   at Microsoft.AspNetCore.Mvc.ViewResult.ExecuteResultAsync(ActionContext context)
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextResultFilterAsync>g__Awaited|30_0[TFilter,TFilterAsync](ResourceInvoker invoker, Task lastTask, State next, Scope scope, Object state, Boolean isCompleted)
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Rethrow(ResultExecutedContextSealed context)
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.ResultNext[TFilter,TFilterAsync](State& next, Scope& scope, Object& state, Boolean& isCompleted)
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.InvokeResultFilters()
--- End of stack trace from previous location ---
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextResourceFilter>g__Awaited|25_0(ResourceInvoker invoker, Task lastTask, State next, Scope scope, Object state, Boolean isCompleted)
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Rethrow(ResourceExecutedContextSealed context)
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Next(State& next, Scope& scope, Object& state, Boolean& isCompleted)
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.InvokeFilterPipelineAsync()
--- End of stack trace from previous location ---
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeAsync>g__Awaited|17_0(ResourceInvoker invoker, Task task, IDisposable scope)
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeAsync>g__Awaited|17_0(ResourceInvoker invoker, Task task, IDisposable scope)
   at Microsoft.AspNetCore.Authorization.AuthorizationMiddleware.Invoke(HttpContext context)
   at Microsoft.AspNetCore.Authentication.AuthenticationMiddleware.Invoke(HttpContext context)
   at Microsoft.AspNetCore.Localization.RequestLocalizationMiddleware.Invoke(HttpContext context)
   at OrchardCore.Diagnostics.DiagnosticsStartupFilter.<>c__DisplayClass3_0.<<Configure>b__1>d.MoveNext()
--- End of stack trace from previous location ---
   at Microsoft.AspNetCore.Diagnostics.StatusCodePagesMiddleware.Invoke(HttpContext context)
   at OrchardCore.Modules.ModularTenantRouterMiddleware.Invoke(HttpContext httpContext)
   at OrchardCore.Modules.ModularTenantContainerMiddleware.<>c__DisplayClass4_0.<<Invoke>b__0>d.MoveNext()
--- End of stack trace from previous location ---
   at OrchardCore.Environment.Shell.Scope.ShellScope.UsingAsync(Func`2 execute, Boolean activateShell)
   at OrchardCore.Environment.Shell.Scope.ShellScope.UsingAsync(Func`2 execute, Boolean activateShell)
   at OrchardCore.Environment.Shell.Scope.ShellScope.UsingAsync(Func`2 execute, Boolean activateShell)
   at OrchardCore.Environment.Shell.Scope.ShellScope.UsingAsync(Func`2 execute, Boolean activateShell)
   at OrchardCore.Modules.ModularTenantContainerMiddleware.Invoke(HttpContext httpContext)
   at Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddlewareImpl.Invoke(HttpContext context)
   at Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddlewareImpl.Invoke(HttpContext context)
   at Microsoft.WebTools.BrowserLink.Net.BrowserLinkMiddleware.InvokeAsync(HttpContext context)
   at Microsoft.AspNetCore.Watch.BrowserRefresh.BrowserRefreshMiddleware.InvokeAsync(HttpContext context)
   at Microsoft.AspNetCore.Server.IIS.Core.IISHttpContextOfT`1.ProcessRequestAsync()

[Piedone]

While I can't help, probably @ns8482e @ApacheTech @websitewill you can comment on this?

[ApacheTech]

This seems to be more of a Blazor migration isssue, than an OrchardCore integration issue. You're still using the .NET7 way of loading Blazor in your Startup class.

    public class Startup : StartupBase
    {
        public override void ConfigureServices(IServiceCollection services)
        {
            services.AddRazorComponents().AddInteractiveServerComponents();
        }

        public override void Configure(IApplicationBuilder builder, IEndpointRouteBuilder routes, IServiceProvider serviceProvider)
        {
            app.MapRazorComponents<App>().AddInteractiveServerRenderMode();

            routes.MapAreaControllerRoute(
                name: "Home",
                areaName: "BlazorEnabledModule",
                pattern: "{controller}/{action}",
                defaults: new { controller = "Home", action = "Index" }
            );
        }
    }

This would be the naive fix to migrate to .NET8, but there's a lot more to the plumbing as well. Your HTML structure is now defined in App, rather than within a Razor layout cshtml file. Tag helpers no longer exist, it's Blazor all the way down.

What kind of interactivity are you wanting to use?

I've made a repo showing how to create a de-coupled .NET8 Blazor app here: https://github.com/ApacheTech/BlazOrchard, it may help.

[websitewill]

I am still trying to get this to work the way I want.
I can get server interactivity to work fine, but still have not cracked the ability to get the client-side interactivity to work. I suspect a packaging/routing issue for me.

Part of my struggle is just piecing together what needs to be where. Like your above code, @ApacheTech . How do you know you need that MapAreaControllerRoute? I've seen various mentions of needing a map to fallback page (to index.html) and other examples similar to yours, but nothing actually describes the what and why for this stuff - not even in the vanilla MVC world. Add Orchard Core as a layer on top of it and the picture is even less clear.

[ApacheTech]

While you're still de-mystifying everything, it's best to take each element of the AspNetCore ecosphere as a stand-alone "thing". Within a single project, it is possible to have Blazor, Razor Pages, MVC, WebForms, WebAPI, MinimalAPI, Umbraco, and OrchardCore, all routing to different pages, and all working together. It would be messy, but it is possible.

So, to de-clutter things, we can just learn one "thing" at a time. In .NET8 Blazor is now finally its own complete stand-alone "thing". You don't need any cshtml Razor views/pages, etc. Microsoft doesn't help things by retaining the name "Razor". Now, instead of creating a Razor View, or a Razor Page, with Blazor, we create "Razor Components". Go figure... These components are either routable, or unroutable, based on whether they have a @page directive, or are decorated with a RouteAttribute. It's very similar to NextJS 13+, if you are coming from a more MERN focussed environment.

So, if your goal is to just use Blazor, then you don't need any of the MVC stuff.

But then comes the choices with Blazor8; what render modes to use. That will have an effect on how you integrate your site with OrchardCore, if you want that as a CMS backend.

• A purely WebAssembly based app would use OrchardCore as a Headless CMS, and use the GraphQL API that OrchardCore exposes, to gather data to display on the pages.
• A pure Server (SSR or Interactive) app would use OrchardCore as a De-coupled CMS, using the helper classes available, similar to how you would with a de-coupled MVC or Razor Pages app.
• If you wanted a hybrid app, with InteractiveServer, InteractiveWebAssembly, and InteractiveAuto modes, you would need a combination of the two. This is what my demo project above shows; albeit, I haven't added any APIs.

My best advice for anyone coming from MVC to Blazor, is to start a new Blazor8 app with both modes available, and just immerse yourself in it as a Sandbox app for a week or so. Forget that cshtml is even a valid file type. The dev experience is much closer to something like WinForms, in a way. You have your UI code in a .razor "designer" file, and your code-behind within a nested .razor.cs file, and you can F7 between them. It's up to you how close you want your domain to your front-end. Your code-behind can just be an adaptor layer with calls and responses to and from the UI; or you can put full end-to-end business logic directly within the button click event handler. And do not dismiss either style; regardless of how much DDD enthusiasts will recoil in horror at the thought. :P

Learning Blazor now is a bit harder, because any guides you see that were written before Nov 2023 will be very out of date, and very misleading. But, essentially, "Blazor" is just the markup of the UI code, and page life-cycle. The moment you get into an event handler, or have to actually "do" anything, it's all just pure C#. There's very little in the way of surprises.

[ApacheTech]

Like your above code, @ApacheTech . How do you know you need that MapAreaControllerRoute?

With this, I just copied their code from their project. :P

[websitewill]

So here are details of what I am trying to accomplish.
Existing OC site (full cms). I have a series of modules that are enabled via admin.
One of these OC modules was actually a WYSIWYG editor for something pretty specific - it was built on JS with libraries like JSPlumb. It was very visual, drag-drop, stuff like that. It was also a pain to maintain because of the JS.

So what I want to do with Blazor is to rebuild that editor completely - using .net. I'll still need interop with JS because I'll still need to use jsplumb, but the view model I had of what was being designed can all move to .net code (huge win).

The module exposes controllers for server-side interaction. Basically the user does "Create new", gets the design surface (client side), does all of the editing/configuring and hits "save". Save calls the controller which actually persists the state of the thing to the server.

So, what I currently have is this.
Project for the orchard core website (full cms).
That references my project for the OC module (Foo Manager).
A new Shared project (for the .net stuff in common between the FooManager module and the Blazor project).
The FooManager.Blazor project (which is referenced in the main FooManager OC module project.

The blazor component (just a PoC for now) runs fine in server side mode. It renders fine in client side, but lacks any interactivity (fails to find the various js and wasm files needed on the client side). It must be some static file or routing issue for me.

Here is a screenshot of the project structure.

Note that if I get this to work, I'll want to do some other Blazor stuff as well - like build some specific components that can be used in various modules. This specific Blazor component will only ever be used from a very specific route in the ...Admin module.

[websitewill]

I have tried it, but willing to bet that piece of code is adding no value to the solution. In my solution I have server-side blazor (which the code you linked is doing) and it doesn't even have a HomeController.

[websitewill]

@mono-wallace just for grins, have you tried the OC preview packages? I did have to use them as opposed to the official release even to get the server-side component to work in OC (under .net 8). Maybe that will get you past your immediate issue (and maybe your github will help me with mine). :)

[websitewill]

Scratch that. You are targeting only server-side blazor, so my use case is different. I suspect updating to the prerelease packages will fix your issue.

[mono-wallace]

First, thanks for all the reply's so far.

Just to clear some things up, I am not new to Orchard Core, We are early adapters to the early (beta) versions of Orchard Core as well to Blazor
We have been using Orchard Core in our production application already for some years.
We use Orchard Core for its core functionality, to create a modular architecture in our application, and are not really using it for CMS.
We have created several orchard modules and themes that we can manage in the Orchard Admin dashboard and via recipes. All the modules are using MVC or Razor pages, It will be too much work for now to transform all of these modules to a Blazor web app.
We created a library with non routed Blazor components that we share between applications, we use it in MVC, Razor pages, Orchard Core but also in a Blazor WASM application.
The Blazor components were working fine in Orchard until we updated to .NET 8

In other applications that were not built with Orchard, updating to .NET 8 was not a problem, even if we did not migrate (yet) to the new Blazor web app structure. .NET 8 still supports Blazor server and should be backwards compatible.
Also, in our Blazor WASM application, the upgrade to .NET 8 worked out of the box.

I created the sample application just to show the minimum setup to reproduce the exception that is town when RenderBodyAsync() is called in the Layout template of the theme after you update the solution to .NET 8.
I hope that someone will have a clue what could be the cause of the 'thread is not associated with the Dispatcher' error in this code flow of the RenderBodyAsync()

Thanks again for all your rapid replies, it is really appreciated. A one of the reasons we use Orchard Core

[websitewill]

@mono-wallace that "thread is not associated" was the first thing I ran into. Debugging into it and it was clear there was some difference in that RenderBodyAsync. In there the OrchardCore code does a "new" on some functionality from .net - meaning it bypasses it entirely and does its own thing.

For up, updating to the prerelease packages of Orchard fixed that. I am currently using 1.9.0-preview-18158 and that error no longer happens. Have you tried that?

[mono-wallace]

@websitewill Yes, that's it! Updating to the OrchardCore 1.9.0-preview-18170 solved the issue.
I was now also able to use the instructions mentions in https://learn.microsoft.com/en-us/aspnet/core/blazor/components/integration?view=aspnetcore-8.0#use-non-routable-components-in-pages-or-views to use new .NET 8 way of integrating Blazor components in MVC or Razor pages.

I will update my sample in the git repository, so maybe others can benefit from this as well.

Thanks again for the great help here

[websitewill]

@mono-wallace great!
Now, if you figure out how to use this Blazor stuff as WASM (client-side) from within an Orchard Module (and be able to have separate modules with separate WASMs on the same page) please let me know.
I am starting to think my use case is just not something this is even designed for, which is sad.

[mono-wallace]

@websitewill I'll look into it

[websitewill]

@mono-wallace much appreciated! I am still looking.
Note, at this point I would even settle for a limitation that there can only be a single WASM on screen at the same time. What I am building in this module is basically a mini-spa so, for now, I don't really need multiple modules each to host their own client-side wasm (that may not even be possible in the long run with OC). But, getting a single one really seems like a question of the build putting the blazor js/wasm files in the proper places, setting up the base path and routing so that the files can be found, etc.

I'd be incredibly happy just to get that to work and say, "Only one module can have a wasm loaded at a time".