Blazor: Reload Data on Page Navigation - Unsaved Changes Visible

Question

I am working on a Blazor project and encountering an issue where changes made to data on an edit page are visible even though they haven't been saved. When a user navigates back to the main page, these changes are still shown, even though they are not saved in the database.

Pages Overview:

Main Page (Displays a list of customers):

@page "/Customers" @inject CustomerService customerService

Customer List

@code {
    private List<Customer> customers;

    protected override async Task OnInitializedAsync()
    {
        await JS.InvokeVoidAsync("startProgressBar");
        await LoadDataAsync();
        StateHasChanged();
    }



protected override async void OnAfterRender(bool firstRender)
{
    base.OnAfterRender(firstRender);

    if(firstRender)
    {
        Customer= await Kundenservice.GettAllKundenAsync();
    }

    StateHasChanged();
}
}

Detail Page (Displays individual customer details):

@page "/CustomerDetails/{id:int}"
@inject CustomerService customerService

<PageTitle>Customer Details</PageTitle>

@code {
    [Parameter] public int Id { get; set; }
    private Customer customer;

    protected override async Task OnParametersSetAsync()
    {
        await LoadDataAsync();
    }

    private async Task LoadDataAsync()
    {
        customer = await customerService.GetCustomerByIdAsync(Id);

    }
}

Edit Page (Edit customer details):

@page "/EditCustomer/{id:int}"
@inject CustomerService customerService

<PageTitle>Edit Customer</PageTitle>

@code {
    [Parameter] public int Id { get; set; }
    private Customer customer;

    protected override async Task OnParametersSetAsync()
    {
        await LoadDataAsync();
    }

    private async Task LoadDataAsync()
    {
        customer = await customerService.GetCustomerByIdAsync(Id);
    }

    private async Task SaveChanges()
    {
        await customerService.UpdateCustomerAsync(customer);
        NavigationManager.NavigateTo($"/CustomerDetails/{customer.Id}");
    }
}

Problem:

When a user edits customer details on the Edit Page and navigates back to the Main Page without saving, the changes are still visible on the Main Page even though they are not saved in the database. Desired Behavior:

I want the data to be reloaded from the database every time a page is navigated to, ensuring that any unsaved changes are not visible.

Question:

How can I ensure that the data is reloaded from the database every time a page is navigated to, thus preventing unsaved changes from being displayed? Is there a better way to handle this scenario in Blazor?

I tried to ensure that data is loaded on each navigation by using OnInitializedAsync and OnParametersSetAsync in my pages, but the problem persists.

Answer 1

Based on what you've provided, your problem is you are editing the live data within the DbContext. When you exit the form your edits are retained within the dataset held by the DbContext.

The solution is to use the HttpContext Factory and use the DbContexts it provides on a transactional basis. Get a list of items is a transaction which opens, gets the data and then closes a Dbcontext. So is get an item or save an item.

Providing a working example is beyond the scope of a SO answer. There's a Repo of mine on the subject here https://github.com/ShaunCurtis/Blazr.DemoApp.

You should review the MS documents -

https://learn.microsoft.com/en-us/aspnet/core/blazor/blazor-ef-core?view=aspnetcore-8.0

https://learn.microsoft.com/en-us/ef/core/dbcontext-configuration/#using-a-dbcontext-factory-eg-for-blazor

And search the Internet for blazor dbcontextfactory to find lots of material and tutorials.