I want to update my blazor component when file is changed. This is my code:

<div >
    <div >
        <h3>Asks</h3>
        <table >
            <thead>
                <tr >
                    <th>Order Id</th>
                    <th>Price</th>
                    <th>Quantiy</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach(var order in Model.Sales)
                {
                    <tr>
                        <td class = "">@order.OrderID</td>
                        <td class = "">@order.Price.ToString("0.00")</td>
                        <td class = "">@order.Quantity</td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
    <div >
        <h3>Bids</h3>
        <table >
            <thead>
                <tr >
                    <th>Order Id</th>
                    <th>Price</th>
                    <th>Quantiy</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach(var order in Model.Buys)
                {
                    <tr>
                        <td class = "">@order.OrderID</td>
                        <td class = "">@order.Price.ToString("0.00")</td>
                        <td class = "">@order.Quantity</td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>
@code {
    public Orders()
    {
    }

    [Parameter]
    public IndexViewModel Model { get; set; }

    private FileSystemWatcher watcher = new FileSystemWatcher(@"My\folder\directory\");

    protected override void OnInitialized()
    {
        watcher.NotifyFilter = NotifyFilters.Attributes
                                 | NotifyFilters.CreationTime
                                 | NotifyFilters.DirectoryName
                                 | NotifyFilters.FileName
                                 | NotifyFilters.LastAccess
                                 | NotifyFilters.LastWrite
                                 | NotifyFilters.Security
                                 | NotifyFilters.Size;

        watcher.Changed  = OnChanged;
        watcher.Created  = OnCreated;
        watcher.Deleted  = OnDeleted;
        watcher.Renamed  = OnRenamed;

        watcher.Filter = "*.txt";
        watcher.IncludeSubdirectories = true;
        watcher.EnableRaisingEvents = true;
    }

    private void OnChanged(object sender, FileSystemEventArgs e)
    {
        Model = new IndexViewModel(new List<OrderViewModel>(), new List<OrderViewModel>());

        Console.WriteLine($"Changed: {e.FullPath}");
        Model.Sales.Add(new OrderViewModel() { OrderID = new Random().Next(int.MaxValue), Price = new Random().Next(10), Quantity =  new Random().Next(100)});
        //Model.Sales.RemoveAt(new Random().Next(Model.Sales.Count - 1));
        Model.Sales = Model.Sales.OrderBy(x => x.Price).ToList();

        Model.Buys.Add(new OrderViewModel() { OrderID = new Random().Next(int.MaxValue), Price = new Random().Next(20), Quantity =  new Random().Next(100)});
        //Model.Buys.RemoveAt(new Random().Next(Model.Sales.Count - 1));
        Model.Buys = Model.Buys.OrderByDescending(x => x.Price).ToList();
    }

    private static void OnCreated(object sender, FileSystemEventArgs e)
    {
        string value = $"Created: {e.FullPath}";
        Console.WriteLine(value);
    }

    private static void OnDeleted(object sender, FileSystemEventArgs e) =>
        Console.WriteLine($"Deleted: {e.FullPath}");

    private static void OnRenamed(object sender, RenamedEventArgs e)
    {
        Console.WriteLine($"Renamed:");
        Console.WriteLine($"    Old: {e.OldFullPath}");
        Console.WriteLine($"    New: {e.FullPath}");
    }
}

When the file is changed method OnChanged is called and IndexViewModel is changed but no changes are made on the screen. I tried making the method static but thus I have to make the IndexViewModel class static too which doesn't work for me.

CodePudding user response：

Try to put a call to the StateHasChanged at the end of the OnChanged method to re-render the UI with the new values:

InvokeAsync( () => StateHasChanged());