How to re-render a razor page after closing a dialog in blazor?

Question

I have a main page Transact.razor Page. Inside my Transact Page, there is a button named Add New which will open a MudDialog (AddTransact.razor) where I can add a new transaction. If I were to close the MudDialog (Add Transact), i want to rerender the Transact Page so that the newly added transaction will reflect on the table in the Transact Page.

How do i do that?

I am using blazor server-side .Net 8. Since blazor is a single page application, I want to rerender the page because "refreshing" the page will defeat the purpose of SPA.

What I tried so far is: Transact.razor

private async Task AddNew()
{
    var options = new DialogOptions { ClassBackground = "my-custom-class", CloseOnEscapeKey = true, MaxWidth = MaxWidth.Medium, FullWidth = true, NoHeader = true };
    var dialog = DialogService.Show<AddTransact>("Add New", options);
    var result = await dialog.Result;

    if (!result.Cancelled)
    {
        await vwTranService.GetAllVwTransactions();
        StateHasChanged();
    }
}

This is my AddTransact.razor (Dialog)

private async void Submit()
{
    if(selectedUser is not null)
    {
        isVisible = true;
        await Task.Delay(1000);
        Transaction!.UserID = selectedUser?.id;
        Transaction!.DOCUMENT_NUM = DocumentNumber;
        Transaction.CREATED_DATE = DateValue;
        Transaction.PARTICULARS = Particulars;
        Transaction.AMOUNT = Amount;

    if (Amount > selectedUser!.Balance)
    {
        Snackbar.Add("User does not have enough balance.", Severity.Error);
        return;
    }

    Balance!.UserID = selectedUser?.id;
    Balance.Balance -= Amount;
    await tranService.AddTransactionAsync(Transaction);
    await balanceService.UpdateBalance(Balance);

    Snackbar.Add("Transaction added successfully", Severity.Success);


    Transaction = new();
    selectedUser = new();
    users = new();
    await vwUserService.GetAllUsers();
    await GenerateDocumentNumberAsync();
    Amount = 0;
    Particulars = string.Empty;
    Balance = new();
    isVisible = false;
    StateHasChanged();
    return;
}
Snackbar.Add("Please select a user", Severity.Warning);

}

somehow, it does not work

Answer 1

Created a method to load the data instead of putting it on the OnInitializedAsync method.

Method to Load the data:

private async Task LoadData()
{
    if (isHr)
    {
        searchResults = await vwTranService.GetAllVwTransactions();
        searchResults = searchResults.Where(x => x.Status == "In-Process").ToList();
    }
    else
    {
        searchResults = await vwTranService.GetAllVwTransactions();
        searchResults = searchResults.OrderByDescending(x => x.ID).ToList();
    }
}

then in my AddNew Task:

I used ReloadDataServer:

private async Task AddNew()
{
    var options = new DialogOptions
        {
            ClassBackground = "my-custom-class",
            CloseOnEscapeKey = true,
            MaxWidth = MaxWidth.Medium,
            FullWidth = true,
            NoHeader = true
        };

    var dialog = DialogService.Show<AddTransact>("Add New", options);
    var result = await dialog.Result;
    if(!result.Canceled)
    {
        await LoadData();
        await TransactionGrid.ReloadServerData();
    }
}

So instead of refreshing the whole page (which would ruin the SPA), I refreshed the datagrid itself to reload the newly added transaction.