How can I trigger a method from the OrderConfirmation page in Blazor WASM?

Question

Hi,

I have a Blazor WASM Client e-commerce application where I'm showing cart counts in the NavMenu. I'm trying to call the GetCartCount() method from the OrderConfirmation razor page after payment has been completed to make the cart count zero, but I'm unable to do so. Can someone please help me figure out how to achieve this?

@inject ISyncLocalStorageService _localStorage
@inject ICartService _cartService
@implements IDisposable
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
        <a class="navbar-brand" href="/">Walk in Style</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        
          <li class="nav-item p-0">
        <NavLink class="nav-link" href="/cart">
                            <span class="p-2">
                                <i class="bi bi-cart"></i> (@GetCartCount())
                            </span>
        </NavLink>
        </li>
      </ul>
      <form class="d-flex">
          <ul class="navbar-nav">
              <AuthorizeView>
                  <Authorized>
                       <li class="nav-item p-0">
                        <NavLink class="nav-link" href="#">
                            <span class="p-2">
                                Hello, @context.User.Identity.Name
                            </span>
                        </NavLink>
                    </li>
                    <li class="nav-item p-0">
                        <NavLink class="nav-link" href="logout">
                            <span class="p-2">
                                Logout
                            </span>
                        </NavLink>
                    </li>
                  </Authorized>
                  <NotAuthorized>
                       <li class="nav-item p-0">
                        <NavLink class="nav-link" href="register">
                            <span class="p-2">
                                Register
                            </span>
                        </NavLink>
                    </li>
                    <li class="nav-item p-0">
                        <NavLink class="nav-link" href="login">
                            <span class="p-2">
                                Login
                            </span>
                        </NavLink>
                    </li>
                  </NotAuthorized>
              </AuthorizeView>
             
          </ul>
      </form>
    </div>
  </div>
</nav>
@code{
    protected override void OnInitialized()
    {
        _cartService.OnChange += StateHasChanged;
        
    }
   
    public void Dispose()
    {
        _cartService.OnChange-=StateHasChanged;
        
    }
    private int GetCartCount(){
        var cart = _localStorage.GetItem<List<ShoppingCart>>(SD.ShoppingCart);
        return cart?.Count ?? 0;
    }
}

I am trying to call GetCartCount from OrderConfirmation razor page after payment has been completed to make the cart count zero. Unfortunately, I couldn't find a way to do it.

@page "/OrderConfirmation"
@inject ILocalStorageService _localStorage
@inject IOrderService _orderService
<div class="container">
    @if (IsProcessing)
{
    <div style="position:fixed;top:50%;left:50%;margin-top:-50px;margin-left:-100px;">
        <img src="images/ajax-loader.gif" />
        </div>
    }
    else
    {
        @if (Order.OrderHeader.Status == SD.Status_Confirmed)
        {
            <div class="row mt-4 pt-4">
             <div class="col-10 offset-1 text-center">
                <h2 class="text-warning">Order Confirmed</h2>
                <p>Your order has been placed successfully with order id : @Order.OrderHeader.Id</p>
            </div>
             <div class="col-8 offset-2">
                 <img src="/images/confirmation.jpg" width="100%" style="border-radius:30px;" alt="Confirmed"/>
             </div>
            </div>
        }
        else
        {
             <div class="row mt-4 pt-4">
                <div class="col-10 offset-1 text-center">
                <h2 class="text-danger">Order Issue!</h2>
                <p>Your order had payment issue please contact us with Order ID:  @Order.OrderHeader.Id</p>
            </div>
            <div class="col-8 offset-2">
                <img src="/images/confirmation.jpg" width="100%" style="border-radius:30px;" alt="Not Confirmed"/>
            </div>
            </div>
        }
    }
</div>
@code {
    private bool IsProcessing { get; set; } = false;
    private OrderDTO Order { get; set; }
   
    protected override async Task OnInitializedAsync()
    {
        IsProcessing = true;
        Order = await _localStorage.GetItemAsync<OrderDTO>(SD.Local_OrderDetails);
        
        var updatedOrder = await _orderService.MarkPaymentSuccessful(Order.OrderHeader);
        if (updatedOrder.Status==SD.Status_Confirmed)
        {
            Order.OrderHeader.Status=updatedOrder.Status;
            await _localStorage.RemoveItemAsync(SD.ShoppingCart);
            await _localStorage.RemoveItemAsync(SD.Local_OrderDetails);            
        }
            IsProcessing = false;
    }
}

Any help is appreciated.

Thank you.