Skip to content

Components.SessionView

Oscar Soto edited this page Dec 2, 2025 · 1 revision

BlazorSessionProvider.Components.SessionView is a BSP component that allows you to show or hide content in a component or page based on a user's session state key.

In other words, it is essentially a reactive session value viewer, with support for:

  • Conditional rendering (valid / invalid / loading)
  • Additional validation
  • Subscription to session changes
  • Generic support for any type
  • Full control of the markup for each state using RenderFragments
  • Automatic updates when the session changes from elsewhere

How does it work internally?

The component uses ISessionProvider to access the user's session state and subscribe to the ISessionKeeper event catalog whenever the specified key value is modified in the session.

  • SessionView has a function that validates whether the key value is correct to decide which content to render. If the value is determined to be valid, it renders the <Valid> component; otherwise, it renders <Invalid>.
  • If the session specified in SessionKey does not exist, the <Invalid> component is rendered by default.

Typical Structure

<SessionView
	TKey="string"
	SessionKey="key"
	Update="true"
	IsSessionValid="async (string val) => { return true; }">

	<Valid Context="Value">
		Valid value => @Value
		...
	</Valid>

	<Invalid Context="Value">
		Invalid value => @Value
		...
	</Invalid>

	<Loading>
		Validating...
	</Loading>

</SessionView>

Where:

  • SessionKey is the key of the session value
  • TKey is the type of the key value
  • IsSessionValid is the function that validates the key value and determines if it is valid or invalid.
    • By default, if no validation is implemented, the <Valid> component will always render.
  • Update is the flag that indicates whether the value should update after the key value is modified.

Only the <Loading> component handles a default message while validating the session:

<span>⏳ Loading...</span>

Use Cases

🧩 1. Show UI sections based on permissions or roles

Clear example:

  • The session stores something like "Role" = "Admin"
  • On a page that shows administrative tools:
<SessionView TKey="string" SessionKey="UserRole">
    <Valid Context="role">
        @if(role == "Admin")
        {
            <AdminDashboard />
        }
        else
        {
            <p>Not admin user!</p>
        }
    </Valid>
</SessionView>

When to use:
When part of the content should only be displayed if the user has a specific role.

❤️ 2. Show user-specific content

Example: a “favorites”, “recent”, or “latest actions” section.

<SessionView TKey="string[]" SessionKey="LastVisitedPages">
    <Valid Context="pages">
        @foreach (var p in pages)
            <a href="@p">@p</a>
    </Valid>
</SessionView>

🧭 3. Show different navigation based on session

<SessionView TKey="bool" SessionKey="IsPremium">
    <Valid Context="premium">
        <NavMenu Premium="@premium" />
    </Valid>
</SessionView>

🎯 4. Manage temporary flags

Such as:

  • Showing an alert only the first time a user visits a page
  • Hiding a section if a tutorial has already been completed
  • Displaying a disclaimer if the user has not accepted terms
<SessionView TKey="bool" SessionKey="AcceptedTerms">
    <Invalid>
        <TermsModal />
    </Invalid>
</SessionView>

Clone this wiki locally