CUSTOMISED
Expert-led training for your team
Dismiss
Refreshing a Blazor Page

3 April 2023

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.

Step 1: Add the Microsoft.AspNetCore.Components.Navigation package

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.

Step 2: Inject the NavigationManager class

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:

css

@inject NavigationManager NavigationManager

 

Step 3: Refresh the page

To refresh the page programmatically, we can use the NavigationManager's NavigateTo method and pass in the current URL as an argument. This will reload the page and refresh the content. Here's an example of what the code might look like:

 

arduino

 

NavigationManager.NavigateTo(NavigationManager.Uri, true);

 

 

This will refresh the current page and reload the content.

Use case:

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.

Conclusion:

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.

About the author: Craig Hartzel
Craig is a self-confessed geek who loves to play with and write about technology. Craig's especially interested in systems relating to e-commerce, automation, AI and Analytics.

CONTACT
+44 (0)20 8446 7555

[email protected]

SHARE

 

Copyright © 2023 JBI Training. All Rights Reserved.
JB International Training Ltd  -  Company Registration Number: 08458005
Registered Address: Wohl Enterprise Hub, 2B Redbourne Avenue, London, N3 2BS

Modern Slavery Statement & Corporate Policies | Terms & Conditions | Contact Us

POPULAR

Rust training course                                                                          React training course

Threat modelling training course   Python for data analysts training course

Power BI training course                                   Machine Learning training course

Spring Boot Microservices training course              Terraform training course

Kubernetes training course                                                            C++ training course

Power Automate training course                               Clean Code training course