Blazor WebAssembly 手动刷新UI的绑定

2021-08-10  乐帮网

blazor

默认情况下,Blazor 在按钮单击等许多场景中自动检测必要的 UI 刷新。但是,在某些情况下,您希望使用该BlazorComponent.StateHasChanged方法手动触发 UI 刷新。
在以下示例中,它使用计时器更改应用程序的状态。

@page "/refresh-ui-manually"
@using System.Threading;

<h1>@Count</h1>

<button onclick=@StartCountdown>Start Countdown</button>

@functions {
    private int Count { get; set; } = 10;

    void StartCountdown()
    {
        var timer = new Timer(new TimerCallback(_ =>
        {
            if (Count <= 0) return;
            Count--;

            // Note that the following line is necessary because otherwise
            // Blazor would not recognize the state change and not refresh the UI
            this.StateHasChanged();
        }), null, 1000, 1000);
    }
}

参考链接:https://blazor-tutorial.net/refresh-ui-manually

公众号二维码

关注我的微信公众号
在公众号里留言交流
投稿邮箱:1052839972@qq.com

庭院深深深几许?杨柳堆烟,帘幕无重数。
玉勒雕鞍游冶处,楼高不见章台路。
雨横风狂三月暮。门掩黄昏,无计留春住。
泪眼问花花不语,乱红飞过秋千去。

欧阳修

付款二维码

如果感觉对您有帮助
欢迎向作者提供捐赠
这将是创作的最大动力