Blazor Server Side - Value changed in Child function is not updating UI

Question

So what I am doing here is, I have a progress bar in my child component(RMSBaseComponent.razor) which is surrounded by a condition variable "IsLoading"

<div style="padding:20px">

@* Page Title *@
<h3>@PageTitle</h3>
<MatDivider></MatDivider>

@* Loader *@
@if (IsLoading)
{
    <MatProgressBar Indeterminate="true"></MatProgressBar>
}
</div>

I am making this Child in Parent(AddNewCity.razor) as

<RMSBaseComponent PageTitle="Add New City" @ref="BaseComponent">

</RMSBaseComponent>

Here I am getting the reference of child in "BaseComponent" variable but when I change the value of "IsLoading" from parent component class (AddNewCity.cs) it does not update the UI and not showing "MatProgressBar" UI. I am changing value as below

public partial class AddNewCity
{
    private RMSBaseComponent BaseComponent { get; set; }

    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);

        Thread.Sleep(3000);
        BaseComponent.IsLoading = true;
    }
}

Any help will be appriciated.

Thank you

stackoverflow.com/questions/56604886/…

dani herrera
– dani herrera

2020-04-06 08:10:31 +00:00
Commented Apr 6, 2020 at 8:10 — dani herrera
– dani herrera, Commented Apr 6, 2020 at 8:10

Quango · Accepted Answer · 2020-04-06 08:54:42Z

1

You should call StateHasChanged() after Thread.Sleep()

public partial class AddNewCity
    {
        private RMSBaseComponent BaseComponent { get; set; }

        protected override void OnAfterRender(bool firstRender)
        {
            base.OnAfterRender(firstRender);

            Thread.Sleep(3000);
            BaseComponent.IsLoading = true;
            StateHasChanged();
        }
    }

edited Apr 6, 2020 at 8:54

Quango

13.7k7 gold badges52 silver badges85 bronze badges

answered Apr 6, 2020 at 6:16

tbdrz

2,2202 gold badges15 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rdmptn Over a year ago

I would also advise that you consider passing such references as a Parameter to the child component - if the child needs to mutate the state of their parent even some two-way binding or at least an event might be in order. Personally, I prefer raising events from the child components so their parents can decide what to do with that (like, toggle a loading sign, or fetch other data).

DrXSsive Over a year ago

StateHasChanged(); saved my life. Thank you.

Collectives™ on Stack Overflow

Blazor Server Side - Value changed in Child function is not updating UI

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related