-
Notifications
You must be signed in to change notification settings - Fork 10.3k
Blazor component binding not working? #15589
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Comments
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. |
In BSText component you have this line <input class="form-control" type="text" bind=@Value onchange=@Updated name="@Name" /> You cannot use |
Thanks @Andrzej-W for the pointers.
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 I've updated the repository with both changes. |
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). |
I was going crazy with this! the book was saying we should use like this: |
@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. |
@conficient Thank you! this is the problem with beta versions, they change and the book still the same... :-( |
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. |
@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. |
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 recommendedbind-{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:An element using the
bind
syntax will bind to a property but changes to the property do not generate aStateHasChanged
event.An element using the
bind-{property}
syntax will bind to a property but resets to an original value ifStateHasChanged
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.
<input>
element usingbind
to a property (no components).<input>
element also usingbind
, but rendered inside aBSControl
child content.BSText
component using thebind-Value
syntax.The second form is rendered using a
<BSForm>
component:<input>
element usingbind
to a property.<input>
element also usingbind
, but rendered inside aBSControl
child content.BSText
component using thebind-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 toInitX
.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 aStateHasChanged
event.The
bind-{property}
syntax appears to be broken. It reads the initial value but changing the value does not update the underlying property (theset{}
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?The text was updated successfully, but these errors were encountered: