Rendering Razor component in server mode in MVC project in partial view - left with empty tag -> related to issues 20332 (unresolved) , 13771

[vkeziv]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

Edit: This happens only in situations when the component is loaded in Partial VIew, I found this issue but it is not resolved #20332
Scenario:
Paged is loaded then after the user clicks to go on another tab (within the same page) another partial is loaded -> Js calls LoadPartial method from the controller and the PartialViewResult response replaces tab HTML content, that tab content contains the component that requires an additional script tag to work or it won't be rendered.

Edit2: Switching to .net 6 and rendering component from javascript solves the issue, but should the RenderComponentAsync in partial work out of the box?

Exactly the same situation as described in issue -> #13771

ServerPrerendered mode is working fine but Server mode just leaves tag:

The solution to add <script src="_framework/blazor.server.js"></script> after the usage of component is working but then another signalR connection is established for that component and the other circuit is stopped - and then you always get a bunch of error messages in console when you work with that component about other circuit failing to send data (but the component is working fine by look - it is using another connection).

There is also an issue when there are 2 partial views on the same page and if both partials have some server mode rendered component this solution is not working.
The Second component in order of rendering gets rendered twice if I put script reference after each component, and also both not working. If I put the script below only one of the components they are rendered fine but not working.

Expected Behavior

I would expect that adding script reference to Layout.cshtml and having one connection is enough or it should be added after each component server mode rendered component and having multiple connections?

Steps To Reproduce

No response

Exceptions (if any)

No response

.NET Version

6.0.101

Anything else?

One more question, the project is .net5.0 but the output is 6.0.101 is there something wrong?

IDE: VS22 17.0.4
dotnet --info:
.NET SDK (reflecting any global.json):
Version: 6.0.101
Commit: ef49f6213a

Runtime Environment:
OS Name: Windows
OS Version: 10.0.22000
OS Platform: Windows
RID: win10-x64
Base Path: C:\Program Files\dotnet\sdk\6.0.101\

Host (useful for support):
Version: 6.0.1
Commit: 3a25a7f1cc

.NET SDKs installed:
5.0.403 [C:\Program Files\dotnet\sdk]
6.0.101 [C:\Program Files\dotnet\sdk]

.NET runtimes installed:
Microsoft.AspNetCore.App 3.1.21 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 5.0.12 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 6.0.1 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.NETCore.App 3.1.21 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 5.0.12 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 6.0.1 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.WindowsDesktop.App 3.1.21 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 5.0.12 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 6.0.1 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

[mkArtakMSFT]

Thanks for contacting us. To render multiple root components you'll have to use the JavaScript APIs that we've added here. That is slightly different though from what you're trying to do here, and we're looking at supporting this scenario as part of this issue in .NET 7.

[vkeziv]

@mkArtakMSFT Sorry if I wasn't clear but I am not actually trying to load multiple root components, I was only trying to render components inside Partial View in Server rendered mode and the partial is rendered from Javascript and I am left with an HTML comment that there should be Blazor component.
I fixed the solution by rendering the component from javascript as the root component but it shouldn't be the root component it is just I couldn't find any other way to do it.

[mkArtakMSFT]

Reopening to take this through another round of triage to make sure we don't miss anything

[vkeziv]

@mkArtakMSFT I did open a simplified issue on stackoverflow

[mkArtakMSFT]

Thanks @vkeziv.
After closer review of this issue and your StackOverflow question we still believe that the custom elements solution we've suggested earlier should solve your problem. It's not clear why you're trying to avoid having multiple root elements? Note, that there won't be a second signalR connection created when added another root components.

[vkeziv]

@mkArtakMSFT
Well I though it is not expected to have multiple root components, since external libraries are creating some extra markups when component is rendered (like multiple styles, some global providers for popups in html etc.), so I needed to create extra JS functions to clear that stuff after each component is rendered, so it can work properly.
Is there any documentation about what is diff between root component and basic component?
If adding component from JS as root component is the fix then this can be closed.

[ghost]

This issue has been resolved and has not had any activity for 1 day. It will be closed for housekeeping purposes.

See our Issue Management Policies for more information.