"Click me" button in webfrontend in template doesn't work until Blazor circuit is live.

[mitchdenny]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

This is a long standing issue that only shows up when you have some higher latency between your browser and the webfrontend from the .NET Aspire template. Basically if you click "Click me" the number won't increment in some cases because the Blazor circuit has not spun on. The fix is to make that bit of UI aware as to whether the Blazor circuit is live and tweak the rendering based on that.

Expected Behavior

See above.

Steps To Reproduce

1. Create a new project from template
2. Deploy using azd
3. Access the web front-end counter page and quickly click "Click me".
4. Observe that the counter doesn't increment until the second click.

Exceptions (if any)

No response

.NET Version info

.NET SDK:
Version: 9.0.200
Commit: 90e8b202f2
Workload version: 9.0.200-manifests.b4a8049f
MSBuild version: 17.13.8+cbc39bea8

Runtime Environment:
OS Name: debian
OS Version: 12
OS Platform: Linux
RID: linux-x64
Base Path: /usr/share/dotnet/sdk/9.0.200/

.NET workloads installed:
There are no installed workloads to display.
Configured to use loose manifests when installing new manifests.

Host:
Version: 9.0.2
Architecture: x64
Commit: 80aa709f5d

.NET SDKs installed:
9.0.200 [/usr/share/dotnet/sdk]

.NET runtimes installed:
Microsoft.AspNetCore.App 9.0.2 [/usr/share/dotnet/shared/Microsoft.AspNetCore.App]
Microsoft.NETCore.App 9.0.2 [/usr/share/dotnet/shared/Microsoft.NETCore.App]

Other architectures found:
None

Environment variables:
Not set

global.json file:
Not found

Learn more:
https://aka.ms/dotnet/info

Download .NET:
https://aka.ms/dotnet/download

Anything else?

No response

[eerhardt]

@DamianEdwards - is this an issue in the regular ASP.NET Core Blazor template? If we are changing it here, I would expect we would make the same change in https://github.com/dotnet/aspnetcore/blob/main/src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Pages/Counter.razor as well.

[DamianEdwards]

I believe it's the same in both templates. And as pointed out we don't want them to diverge so this should be fixed in both places if we think it's worthwhile.

@danroth27

[danroth27]

Yeah, this is a known issue with how Blazor works with prerendering and how the template has been authored. Related discussion: dotnet/aspnetcore#54308. We could add some logic to detect if the app is interactive and render the button differently (like disabled or not visible), but that then complicates the template.

@lewing FYI.

[Misiu]

I was going to report the same bug. The behaviour is very annoying, especially for new users.
I can confirm that adding disabled="@(!RendererInfo.IsInteractive)" to a button solves the issue, but the template should show the best practices. This won't complicate the template, but with a comment, it will help with beginners' frustration.

[danroth27]

@Misiu Be sure to give the original issue past a 👍 reaction if this issue is important to you.

[DamianEdwards]

Closing this as it stems from the Blazor template.