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

Cenk 986 Reputation points
2024-06-03T10:46:35.6966667+00:00

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.

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,309 questions
Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,460 questions
C#
C#
An object-oriented and type-safe programming language that has its roots in the C family of languages and includes support for component-oriented programming.
10,528 questions
{count} votes