代码之家  ›  专栏  ›  技术社区  ›  max

Blazor Web应用程序中的计时器不工作

  •  0
  • max  · 技术社区  · 1 年前

    我有一个简单的Blazor Web应用程序(服务器端,.NET 8,VS2022)。 此处主页面:

    @page "/"
    @using System.Timers
    @rendermode InteractiveServer
    
    <p>@StatusMessage</p>
    
    <button class="btn btn-primary" @onclick="StartHandler">Start</button>
    
    @code {
        private void StartHandler()
        {
            Countdown = 100;
            timerCounter.Interval = 1000;
            timerCounter.Elapsed += TimerCounter_Elapsed;
            timerCounter.AutoReset = true;
            timerCounter.Start();
        }
        private void TimerCounter_Elapsed(object? sender, ElapsedEventArgs e)
        {        
            Countdown--;
            StatusMessage = $"{Countdown}";
        }
    
        private Timer timerCounter = new Timer();
        private int Countdown = 0;    
        private string StatusMessage = "";
    }
    
    

    它应该启动计时器按钮点击并在页面上显示倒计时。 但当我点击按钮时,什么也没发生。 在接下来的点击中,它显示计数为99或97。 我不明白发生了什么。 为什么计时器事件没有启动? 谢谢

    我试着按下按钮倒计时,它起作用了。 但我需要计时器触发事件。

    这是我的App.razor文件:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <base href="/" />
        <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
        <link rel="stylesheet" href="app.css" />
        <link rel="stylesheet" href="BlazorApp.styles.css" />
        <link rel="icon" type="image/png" href="favicon.png" />
        <HeadOutlet />
    </head>
    
    <body>
        <Routes />
        <script src="_framework/blazor.web.js"></script>
    </body>
    
    </html>
    
    1 回复  |  直到 1 年前
        1
  •  1
  •   D A    1 年前

    添加 StateHasChanged 。来自文档:“通知组件其状态已更改。如果适用,这将导致组件重新呈现。”

    private void TimerCounter_Elapsed(object? sender, ElapsedEventArgs e)
    {        
        Countdown--;
        StatusMessage = $"{Countdown}";
        StateHasChanged();        
    }