I have a .NET 8 blazor application with a render mode of InteractiveServer
.
In the app there is a component with an IsShown
parameter which is used by an if
statement to render the content. If I update the parameter from the host page everything works as expected. Updating the property directly using a reference to the component has no effect. Adding StateHasChanged()
has no effect.
Here is the host page. The first button works. The second and third do not.
<p><button @onclick="ShowUsingParameter">Show using parameter</button></p><p><button @onclick="ShowUsingProperty">Show using property</button></p><p><button @onclick="ShowUsingMethod">Show using method</button></p><ExampleComponent IsShown="isComponentShown" @ref="exampleComponent"></ExampleComponent>@code { private bool isComponentShown; private ExampleComponent exampleComponent; void ShowUsingParameter() { isComponentShown = true; } void ShowUsingProperty() { exampleComponent.IsShown = true; StateHasChanged(); } void ShowUsingMethod() { exampleComponent.Show(); }}
And here is the component:
@if (IsShown){<h3>ExampleComponent</h3><button @onclick="() => IsShown = false">Hide</button>}@code { [Parameter] public bool IsShown { get; set; } public void Show() { IsShown = true; }}