Refreshing a Blazor Page

Introduction:

Blazor is an open-source web framework for building web applications using .NET and C#. It allows developers to create web applications with a rich user interface using a combination of HTML, CSS, and C#. Sometimes, we may need to refresh a Blazor page programmatically, such as after making changes to the data displayed on the page. In this how-to guide, we will explore how to refresh a Blazor page programmatically and provide some use cases for this feature.

To refresh a Blazor page programmatically, we need to use the NavigationManager class provided by the Microsoft.AspNetCore.Components.Navigation package. To add this package to our project, right-click on the project in the Solution Explorer and select "Manage NuGet Packages." In the "NuGet Package Manager" window, search for "Microsoft.AspNetCore.Components.Navigation" and select the package. Click on the "Install" button to install the package.

Once we have added the NavigationManager package, we need to inject the NavigationManager class into our page or component. We can do this by adding the following code to our page or component:

This will refresh the current page and reload the content.

Let's say we have a Blazor page that displays a list of products. The list is retrieved from a database and displayed on the page. We also have a form that allows users to add new products to the database. After the user submits the form, we want to refresh the page to display the updated list of products.

To do this, we can add the following code to the form's submit button click event handler:

Csharp

await ProductService.AddProductAsync(NewProduct);

NavigationManager.NavigateTo(NavigationManager.Uri, true);

This will add the new product to the database and refresh the page to display the updated list of products.

Refreshing a Blazor page programmatically is a useful feature when we need to update the content displayed on the page. In this how-to guide, we explored how to refresh a Blazor page programmatically by using the NavigationManager class provided by the Microsoft.AspNetCore.Components.Navigation package.

We saw how to inject the NavigationManager class and use its NavigateTo method to refresh the page. We also saw a use case for this feature, where we refreshed a page to display the updated list of products after adding a new product to the database.

We hope you found this guide on refreshing a Blazor Page insightful and valuable. You can learn more on JBI's Blazor training courses.

Go here if you would like to see the ASP.Net Core Blazor Official Documentation.