How to update UI in blazor-server automatically every 2 seconds?

December 15, 2022

guys i am working with Blazor-Server and now i am stuck at re-rendering and updating UI component automatically..

I did updates after mouse move to object but i want full automatically..

This is UI component:

                <div class="card">
                <div class="card-header" style="text-align:center;">Gate</div>
                <div class="card-body">
                <input @bind-value="@BinancePrice" @onmousemove="PriceCheck" />

                </div>
            </div>

This is my class:

  private async Task PriceCheck()
    {
        #region BinanceAPI
        try
        {
            using (_httpClient = new HttpClient())
            {
                _httpClient.BaseAddress = new Uri("https://testnet.binance.vision");
                _httpClient.Timeout = new TimeSpan(0, 0, 5);
                _httpClient.DefaultRequestHeaders.Clear();
                _httpClient.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/x-www-form-urlencoded"));
                _httpClient.DefaultRequestHeaders.Add("X-MBX-APIKEY", Environment.GetEnvironmentVariable("APIKEY"));
                _httpClient.DefaultRequestHeaders.Add("SecretKey", Environment.GetEnvironmentVariable("SECRETKEY"));
                var symbol = "BTCBUSD";
                var market = new Market(_httpClient);
                var result = await market.CurrentAveragePrice(symbol);
                BinancePrice? binancePrice = JsonConvert.DeserializeObject<BinancePrice>(result);
                Lista["Binance"] = binancePrice!.Price.ToString();
                BinancePrice = binancePrice!.Price.ToString();
            }
        }
        catch (BinanceClientException binanceException)
        {
            Console.WriteLine(binanceException.InnerException?.Message ?? binanceException.Message);
        }
        #endregion
}

I cannot

>Solution :

To force the UI to re-render automatically say every two seconds you can override the OnInitializedAsync() method in the razor page. See this for example:

This is the default Blazor server index with a paragraph added to show the current time:

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

<p>The current time is: @currentTime</p>

@code {
    private string currentTime = "";

    protected override async Task OnInitializedAsync()
    {
        // Set up a timer to update the current time every 2 seconds
        var timer = new System.Threading.Timer(
            e =>
            {
                InvokeAsync(() =>
                {
                    currentTime = DateTime.Now.ToString();
               
                    // Call this to force the server to send a new updated view
                    StateHasChanged();
                });
            },
            null,
            TimeSpan.Zero,
            TimeSpan.FromSeconds(2)
        );
    }
}