Issues with hot reloading html changes from a Razor file when @bind is used in Blazor WASM .NET 6 Preview 3

[joecuevasjr]

Using the @Bind razor directive attribute breaks hot reloading HTML elements in a razor component, specifically in a Blazor WebAssembly app.

To Reproduce

Define a razor component with HTML and a @Bind razor directive attribute

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me!</button>

<input @bind="_searchTerm" />

@code {
    private string _searchTerm;

    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

-Run the Blazor WebAssembly application with Hot Reload.
-Change the h1 heading text in the code above, the HTML element will not update after "Hot reload of changes succeeded" message from the cli.

Further technical details

• .NET 6.0
• SDK 6.0.100-preview.3.21202.5
• VS Community 2019 Preview 16.10.0 Preview 1.0
• Browser: Chrome

[danroth27]

@lambdageek

[danroth27]

@joecuevasjr Do you see any error output in the console where you ran dotnet watch?

[joecuevasjr]

@danroth27 There is no error output in the console.

After editing the h1 header the console reports success (with no hot reload action or restart of the app):

watch : File changed: C:\Users\joecu\source\repos\webapplication4\WebApplication4\Pages\Counter.razor.
watch : Hot reload of changes succeeded.

[ghost]

Thanks for contacting us.
We're moving this issue to the Next sprint planning milestone for future evaluation / consideration. Because it's not immediately obvious that this is a bug in our framework, we would like to keep this around to collect more feedback, which can later help us determine the impact of it. We will re-evaluate this issue, during our next planning meeting(s).
If we later determine, that the issue has no community involvement, or it's very rare and low-impact issue, we will close it - so that the team can focus on more important and high impact issues.
To learn more about what to expect next and how this issue will be handled you can read more about our triage process here.

[SteveSandersonMS]

Converted into pure C# terms, this happens when editing a class like this:

    public partial class Counter : Microsoft.AspNetCore.Components.ComponentBase
    {
        protected override void BuildRenderTree(Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder)
        {
            __builder.AddMarkupContent(0, "Hello");
            __builder.OpenElement(1, "input");
            __builder.AddAttribute(2, "value", Microsoft.AspNetCore.Components.BindConverter.FormatValue(_searchTerm));
            __builder.AddAttribute(3, "onchange", Microsoft.AspNetCore.Components.EventCallback.Factory.CreateBinder(this, __value => _searchTerm = __value, _searchTerm));
            __builder.SetUpdatesAttributeName("value");
            __builder.CloseElement();
        }
       
        private string _searchTerm;
    }

... and changing the literal "Hello" to "Hello2".

I guess it's likely the same issue as https://github.com/dotnet/aspnetcore/issues/31909 because of the lambda.

[dotnet-issue-labeler]

I couldn't figure out the best area label to add to this issue. If you have write-permissions please help me learn by adding exactly one area label.

[ghost]

Tagging subscribers to this area: @CoffeeFlux
See info in area-owners.md if you want to be subscribed.

Issue Details

---

Using the @Bind razor directive attribute breaks hot reloading HTML elements in a razor component, specifically in a Blazor WebAssembly app.

To Reproduce

Define a razor component with HTML and a @Bind razor directive attribute

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me!</button>

<input @bind="_searchTerm" />

@code {
    private string _searchTerm;

    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

-Run the Blazor WebAssembly application with Hot Reload.
-Change the h1 heading text in the code above, the HTML element will not update after "Hot reload of changes succeeded" message from the cli.

Further technical details

• .NET 6.0
• SDK 6.0.100-preview.3.21202.5
• VS Community 2019 Preview 16.10.0 Preview 1.0
• Browser: Chrome

Author:	joecuevasjr
Assignees:	-
Labels:	arch-wasm, area-VM-meta-mono, untriaged
Milestone:	-

[SteveSandersonMS]

cc @lambdageek

[lewing]

@lambdageek what is the status here?

[lambdageek]

This is a dotnet watch+Roslyn issue. I updated our CI infra to use Roslyns WatchHotReloadService and for situations like this where a lambda is in the body of a method, but the lambda contents don't change, roslyn can emit an update that Mono should be able to handle. But for some reason deltas for Razor pages end up re-creating the lambda as a new added method (which Mono can't handle).

[lewing]

@lambdageek are we still targeting 6.0 for fixing this?

[lambdageek]

This is essentially a duplicate of #50249

Updating of existing lambda bodies that are generated from .razor pages will become supported once dotnet/roslyn#55407 makes it into the dotnet SDK.

That means that editing text on pages with existing @bind will work in .net 6 once the roslyn change lands.

Adding new lambdas will be .net 7

Adding new @binds will be in .NET 7

[ilonatommy]

@lambdageek, what is the status of this?

[lambdageek]

Fixed by #63513