PageState is null in Theme Control

[vnetonline]

I have a very simple control which I have made in a Theme

@namespace Amazing.Theme.Membership
@using System.ComponentModel
@using Oqtane.Shared
@using System.Net
@using Amazing.Module.Payment.Services
@using Amazing.Module.Payment
@inherits ThemeControlBase
@inject SiteState SiteState
@inject NavigationManager NavigationManager
@inject IOrderService OrderService
@inject ISettingService SettingService
@implements IDisposable

@if (_orderItems > 0)
{
    <a href="@NavigateUrl(_cartPage)" class="btn btn-shopping-cart position-relative ms-2">
        <i class="oi oi-cart"></i>
        <span id="cartQuantity" class="cart-quantity position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">@_orderItems</span>
    </a> 
}

@code {

    private int _orderItems;
    private string _cartPage = "cart";

    protected override void OnInitialized()
    {
        ((INotifyPropertyChanged)SiteState.Properties).PropertyChanged += PropertyChanged;
    }

    private void PropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        if (e.PropertyName == "AmazingPayment")
        {
            _orderItems = SiteState.Properties.AmazingPayment.CartCount;
            StateHasChanged();
        }
    }

    private void GoToCheckout()
    {
        NavigationManager.NavigateTo(NavigateUrl(_cartPage, $"returnurl={WebUtility.UrlEncode(PageState.Route.PathAndQuery)}"));
    }

    public void Dispose()
    {
        ((INotifyPropertyChanged)SiteState.Properties).PropertyChanged -= PropertyChanged;
    }
}

NavigateUrl() uses PageState but the PageState is always null

i am using the above in my Default.razor

can you please help me with why this is?

I am using the latest Dev branch

[sbwalker]

@vnetonline this topic has been covered many times previously. When using Blazor and crossing render mode boundaries from static to interactive, the state which is held by cascading parameters and scoped services is not automatically passed and will be null. This was one of the biggest challenges we had to overcome in Oqtane 5.1 in order to support static rendering.

Your theme component is static but you are trying to render your AmsCart component interactively. This means you are crossing a render mode boundary. PageState is a cascading parameter so it will be null when it is referenced in the interactive component.

You can either make your AmsCart component static - which will provide access to PageState (as you would not be crossing a render mode boundary) or you can use the technique I documented here: https://www.oqtane.org/blog/!/91/passing-state-to-components-using-ssr-in-net-8 which is how Oqtane passes state to interactive module components

[vnetonline]

@sbwalker I have converted my cart to static render, but I am still having issues with updating number of items in CartCount because the PropertyChanged is not fired.

In my Payment Module I am using ExpandoObject like below to set the Cart Count I call this mehod from a Method 'BuyCourse`.

    private void SetCartCount(int count)
    {
        dynamic obj = new ExpandoObject();
        obj.CartCount = count;
        SiteState.Properties.AmazingPayment = obj;
    }

In my Theme I have a Cart Control as follows

@using Amazing.Module.Payment
@using Amazing.Module.Payment.Services
@using Oqtane.Themes
@using System.ComponentModel
@namespace Amazing.Theme.Membership
@inherits ThemeControlBase
@attribute [OqtaneIgnore]
@inject IOrderService OrderService
@inject IStringLocalizer<SharedResources> SharedLocalizer
@inject IStringLocalizerFactory LocalizerFactory
@implements IDisposable

@if (_cartCount > 0)
{
	<a href="@Utilities.NavigateUrl(PageState.Alias.Path, _cartPage, "")" class="btn btn-shopping-cart position-relative ms-2">
		<i class="oi oi-cart"></i>
		<span id="cartQuantity" class="cart-quantity position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">@_cartCount</span>
	</a>
}

@code {
	private int _cartCount;
	private string _cartPage = "cart";


	protected override void OnInitialized()
	{
		((INotifyPropertyChanged)SiteState.Properties).PropertyChanged += PropertyChanged;
	}

	protected override async Task OnParametersSetAsync()
	{
		if (PageState.User != null)
		{
			var orders = (await OrderService.GetOrdersByUserIdAndStatusAsync(PageState.Site.SiteId, PageState.User.UserId, (int)OrderStatus.Open, SiteState.Alias.SiteId)).ToList();
			_cartCount = orders.Count();

		}
	}

	private void PropertyChanged(object sender, PropertyChangedEventArgs e)
	{
		if (e.PropertyName == "AmazingPayment")
		{
			_cartCount = SiteState.Properties.AmazingPayment.CartCount;
			StateHasChanged();
		}
	}

	public void Dispose()
	{
		((INotifyPropertyChanged)SiteState.Properties).PropertyChanged -= PropertyChanged;
	}
}

Can you please provide me with some guidance?

[sbwalker]

@vnetonline IPropertyNotifyChanged events do not cross render mode boundaries. If your site is using static rendering and your component is using static rendering, you should be able to handle the event.

[vnetonline]

So if my module component is static and my theme control is static will it work ??

[sbwalker]

@vnetonline if all components in the render tree are using the exact same render mode, the IPropertyNotifyChanged event can be utilized.