Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

How can I trigger a method to update NavMenu from a blazor page in WASM?

$
0
0

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 blazor 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? I came across sort of similar posts here but couldn't get how to implement.

@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;    }}

I want to trigger or find another way to make something if SD.Status_Confirmedto update the navmenu.


Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>