Argthtjtr

When a property of my ViewModel is updated, other property is updated asynchronous.

Todo.cshtml:

@page "/todo"



<h1>Todo (@todos.Count(todo => !todo.IsDone))</h1>



<ul>

    @foreach (var todo in todos)

    {

        <li>

            <input type="checkbox" bind="@todo.IsDone" />

            <input bind="@todo.Title" />

        </li>

    }

</ul>



<input placeholder="Something todo" bind="@newTodo"/>

<button onclick="@AddTodo">Add todo</button>



@functions {

    IList<TodoItem> todos = new List<TodoItem>();





    string newTodo;

    void AddTodo()

    {

        if (!string.IsNullOrWhiteSpace(newTodo))

        {

            todos.Add(new TodoItem { Title = newTodo });

            newTodo = string.Empty;

        }

    }

}

TodoItem.cs:

public class TodoItem

{

    private bool _isDone;



    public string Title { get; set; }

    public bool IsDone

    {

        get => _isDone;

        set

        {

            _isDone = value;

            Task.Run(() =>

            {

                //Simulate work

                System.Threading.Thread.Sleep(TimeSpan.FromSeconds(2));

                //Update property

                Title = Title + " - Done";

            });

        }

    }

}

In synchronous (without Task.Run) this work fine, but in asynchronous the UI isn't updated.

I need explain the UI to update with StateHasChanged():
https://github.com/aspnet/Blazor/issues/1413

But I can't call this method in TodoItem (and I don't want TodoItem know Blazor component).

Have you a solution to update the UI?

You should do the following:

1. 
   

   Define an action delegate in your class:

   
   
   

   public event Action OnChange;
   
   

   
   


2. 
   

   In this very class define a method NotifyStateChanged() as follows:

   
   
   

   private void NotifyStateChanged() => OnChange?.Invoke();
   
   

   
   
   

   This method triggers the OnChange event. You should call this method from your logic after fulfilling whatever task it does.

   
   


3. 
   

   In your todo Component, add the StateHasChanged method to the event delegate used in your TodoItem class thus:

   
   
   

   @functions
   
   {
   
       protected override void OnInit()
   
       {
   
           state.OnChange += StateHasChanged;
   
       }
   
   }
   
   

   
   

Hope this helps. If it does, please don't fail to accept it as the answer

Easy answer is "just fire StateHasChanged(); after modify your var":

        Task.Run(() =>

        {

            //Simulate work

            System.Threading.Thread.Sleep(TimeSpan.FromSeconds(2));

            //Update property

            Title = Title + " - Done";

            StateHasChanged();

        });

Because your method is async, rewrite as:

        Task.Run(async () =>  //<--here async

        {

            //Simulate async work

            Task.Run( async () => {

                await Task.Run( () => {} ); //<--- await

                System.Threading.Thread.Sleep(TimeSpan.FromSeconds(2));

            });

            //Update property

            Title = Title + " - Done";

            StateHasChanged();

        });

To avoid anti-pattern and write clean code, your ModelView may have a public event to let know UI it has changed, just connect this event on UI to StateHasChanged();.

I write here the Blazor Counter sample modified to do this:

@page "/counter"



<h1>Counter</h1>



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



<button class="btn btn-primary" onclick="@IncrementCount">

    Click me @s <!-- here var -->

</button>



@functions {

    int currentCount = 0;



    string s = "";



    void IncrementCount()

    {

        currentCount++;

        Task.Run(() =>

            {

                //Simulate work

                Task.Run( async () => {

                    await Task.Run( () => {} );

                    System.Threading.Thread.Sleep(TimeSpan.FromSeconds(2));}

                        );

                //Update property

                s = s + " - Done";

                StateHasChanged();

            });

        }

    }

}