How do I refresh the Blazor component without reloading the page when database is updated?

Platform: Blazor| Category : General, Data binding

You can refresh the Blazor component using the SignalR concept without reloading the page. When using SignalR, saving the changes in one page notifies the changes made to other clients. During the notification process, call the data loading method to reload the changes made to that component without reloading the entire page.

@code{

    public List<Order> Orders { get; set; }
    private HubConnection hubConnection;

    protected override void OnInitialized()
    {
        hubConnection = new HubConnectionBuilder()
        .WithUrl(NavigationManager.ToAbsoluteUri("/chathub"))
        .Build();

        hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
        {
            LoadData(); //update the data
            StateHasChanged();//Refresh the component using updated data
        });

       await hubConnection.StartAsync();

    }

    protected async void LoadData()
    {
        //load all the orders from the server.
    }
}

Please refer to the documentation link for more details: https://docs.microsoft.com/en-us/aspnet/core/tutorials/signalr-blazor-webassembly?view=aspnetcore-3.1&tabs=visual-studio

Share with

Related FAQs

Couldn't find the FAQs you're looking for?

Please submit your question and answer.