Blazor component binding not working?

[conficient]

Title

Binding of parameters in components not working as expected.

There seems to be something broken in Blazor when using the bind attribute or the recommended bind-{property} syntax within child content. I originally tested on 0.5.1 and then upgraded to 0.6.0-preview1 to see if anything has changed.

References

May be related/duplicate of #5504

Functional Impact

Binding when using components and RenderFragment are not working. There are two distinct issues:

1. An element using the bind syntax will bind to a property but changes to the property do not generate a StateHasChanged event.

2. An element using the bind-{property} syntax will bind to a property but resets to an original value if StateHasChanged is triggered.

Repro Steps

I created this test repo that shows the two distinct issues. It uses pure client-only Blazor.

The Index page shows two forms. The first is rendered directly in the Index HTML, and contains 3 input elements.

• Value1 is an <input> element using bind to a property (no components).
• Value2 is an<input> element also using bind, but rendered inside a BSControl child content.
• Value3 is a BSText component using the bind-Value syntax.

The second form is rendered using a <BSForm> component:

• Value4 is an <input> element using bind to a property.
• Value5 is an<input> element also using bind, but rendered inside a BSControl child content.
• Value6 is a BSText component using the bind-Value syntax.

The initial values of each property are set to Init1,Init2 etc.

The values v1,v2,v3... are entered in each input element (see image below)

The value list below the forms only updates the first property, Value1 as a result of the property change. We can see in the log that Values 1,2,4,5 trigger binding changes, but v3 and v6 do not.

Clicking the button "Show Values in Log" prompts a UI refresh and the Value= section updates, except for Value3 and Value6. Since the underlying property value wasn't set it reverts to InitX.

Analysis

Directly binding using bind only works if the bound element is in the top-level component (the page, in this case).

Using bind inside a component's ChildContent does bind to the underlying property but does not trigger a StateHasChanged event.

The bind-{property} syntax appears to be broken. It reads the initial value but changing the value does not update the underlying property (the set{} method is never called).

Disclaimer

I may have got something wrong in my implementation of the bind-{Property} syntax; if so please point it out! I tried to follow the docs on this point and think I did it correctly?

[Andrzej-W]

I don't have 0.6.0-preview1 installed to test your project, but I see reference to 0.5.1 in your BlazorBug01.csproj file.

<ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Blazor.Browser" Version="0.6.0-preview1-final" />
    <PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="0.6.0-preview1-final" />
    <DotNetCliToolReference Include="Microsoft.AspNetCore.Blazor.Cli" Version="0.5.1" />
</ItemGroup>

I have no idea if this can be a source of problems, but maybe you should change this to 0.6.0-preview1-final and rebuild your whole project.

[Andrzej-W]

In BSText component you have this line

<input class="form-control" type="text" bind=@Value onchange=@Updated name="@Name" />

You cannot use bind and onchange in one element because bind uses onchange event internally. Read this for a solution:
https://github.com/aspnet/Blazor/issues/1020#issuecomment-399910882

[conficient]

Thanks @Andrzej-W for the pointers.

1. I've upgraded the Blazor.Cli to 0.6.0-preview1-final.

2. I also removed the onchange event, but the same behaviour is present.

I can see from the console that {Value.get} and {Value.set} are both called, but it does not appear to bind to the underlying property Value3 or Value6. Even invoking StateHasChanged directly in the set does not work.

I've updated the repository with both changes.

[SteveSandersonMS]

Thanks for reporting this, @conficient!

Yes, I'm almost certain this is the same issue as #5504. To keep things organized, if you don't mind I'm going to close this as a duplicate, but I'll also add a prominent notice on #5504 that any proposed fix has to account for the scenarios raised in this issue here too (and if it doesn't, then we'll reopen this as an independent issue).

[sipi41]

I was going crazy with this! the book was saying we should use like this:
<input type="text" bind="@variable" />
but the proper usage should be:
<input type="number" @bind="@variable" />

[conficient]

@sipi41 the binding syntax changed a lot in .NET 3 preview 6, so older books/articles will be out of date - check the publication dates to see if it's prior to June 2019.

You should refer to the Blazor documentation for the current version syntax.

[sipi41]

@conficient Thank you! this is the problem with beta versions, they change and the book still the same... :-(

[DanielRBowen]

I have this problem with version 3.0.0-preview8.19405.7

It gives me a build error "rzc generate exited with code 1." It works if I take out @bind-value=

And like explained before the binded input works on the page but not in a component.

[danroth27]

@DanielRBowen Could you please open a new issue for the problem you are seeing on the https://github.com/aspnet/aspnetcore repo? That's where all the Blazor work is now happening.