About "Use non-routable components in pages or views"

Akhmad Hamzah S 0

Excuse me, i use ASP.Net Core MVC then i use Blazor as component for user interface. Which mean for route using controller in MVC feature and user interface using Blazor component.

.Net 8 has released. So i have intents to use feature "Interactive Auto".

So i read document about that (https://learn.microsoft.com/en-us/aspnet/core/blazor/components/integration?view=aspnetcore-8.0&source=docs#use-non-routable-components-in-pages-or-views).

But i have confused at configuration in Program.cs. At this section "app.MapRazorComponents<App>().AddInteractiveServerRenderMode();".

Because i don't use "App.razor". What should i do for replace the "App"?

1 answer

Bruce (SqlWork.com) 63,916 Reputation points

2023-11-17T17:49:58.45+00:00

To create a Blazor UI you need a Blazor root component, which by convention is named App.razor. you should use the name of your root UI component. Not sure what you just don't use App.razor.

in .net 8 razor components can be static (server rendered only). this allows a razor page or MVC view to render html with a razor component. as these are static any client interactive UI must be done in javascript.

you also of the option of the component being a server pre-render, then use a signal/r hub back to the hosted blazor app. the docs explain how to add the hub support to the MVC or razor page layout.
Please sign in to rate this answer.
Akhmad Hamzah S 0 Reputation points

2023-11-17T18:56:46.8166667+00:00

Thank you for your response.

Why I don't use App.razor is because the main project uses ASP.Net Core MVC which at the root uses _Layout.cshtml.

is it possible to add InteractiveAuto to the helper tag <component type="typeof(Embedded Counter)" render-mode="ServerPrerendered" />

Bruce (SqlWork.com) 63,916 Reputation points

2023-11-17T21:53:28.92+00:00

if you want interactive components, then you need to add a blazor app to the project. this app will define all the components available to the server. you add blazor client hosting support to the layout.

if your view renders an interactive component, it will use the hosting code in the layout to open a dedicated signal/r connection to the server, start the blazor app and request the component processing. at this point the server will have a persistent connection to the browser. the blazor client js code will send events to the server, and will render server response. because the component is static rendered before the circuit is created, the pre-render state is not passed to the app when it starts.

.

Akhmad Hamzah S 0 Reputation points

2023-11-18T15:48:46.1666667+00:00

I already understand about that "Interactive Auto" cannot be used in the Component helper tag. Thank you for your attention. I hope that in the future there will be an update for the Component helper tag

Bruce (SqlWork.com) 63,916 Reputation points

2023-11-18T19:41:07.28+00:00

Not sure what update you need. To render html you use static. If you want interactive, then the component renders the blazor component div and adds the JavaScript to start the blazor app code (server or WASM). It also supports a pre-render.

like react, adding a blazor app to the page, is just adding the app js file, and callling render app given a div to render in. Just like react pre-render the sever can pre-render html in the div.

Akhmad Hamzah S 0 Reputation points

2023-11-19T11:04:30.19+00:00

Sorry for not explaining clearly.

Currently, as far as I know, there are only 5 RenderModes in the Component tag helper, namely WebAssembly, WebAssemblyPrerendered, Server, ServerPrerendered and Static.

I mean will RenderMode InteractiveAuto be added?

Because currently I use WebAssemblyPrerendered or WebAssembly RenderMode but there is still a drawback, namely that the user has to wait a while before being able to use the application after the page is loaded.

I have used ServerPrerendered or Server RenderMode but the network connection in our country is still not good so sometimes a reconnecting overlay appears which disrupts user activities.

Bruce (SqlWork.com) 63,916 Reputation points

2023-11-19T17:37:23.7666667+00:00

To implement interactive, you need to specify if you will use Blazor WASM or server signal/r there is no third alternative.

with poor Internet blazor may not be a good choice.
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

About "Use non-routable components in pages or views"

1 answer

Your answer