文件更改时更新 blazor 组件

Question

我想在文件更改时更新我的 blazor 组件。这是我的代码：

<div class="orders">
    <div class="sales">
        <h3>Asks</h3>
        <table class="table text-light orders-table table-hover">
            <thead>
                <tr class="text-center">
                    <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 class="buys">
        <h3>Bids</h3>
        <table class="table text-light orders-table table-hover">
            <thead>
                <tr class="text-center">
                    <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}");
    }
}

当文件被更改时，方法 OnChanged 被调用并且 IndexViewModel 被更改，但屏幕上没有进行任何更改。我尝试将方法设为静态，但因此我也必须将 IndexViewModel class 设为静态，这对我不起作用。

Answer 1

尝试在 OnChanged 方法末尾调用 StateHasChanged 到 re-render 具有新值的 UI：

InvokeAsync( () => StateHasChanged());

文件更改时更新 blazor 组件

Update blazor component when file changed

.net

c#

render

file

blazor