Blazor For Kids

Pages in BlazorForKids

In BlazorForKids, a Page is a visual section of your application that appears within a layout. You define pages using the PagesDesigner method of your layout, and each page is rendered in the layout where it’s defined. Pages are the core of your application’s UI and are built using three main components: the Page Link, the Page Title Bar, and the Page Content.

1. Page Link

The Page Link is how users navigate to your page — it's like a menu item. You configure it using page.PageLink. You can set:

• Text() – the text shown to the user
• Description() – shown as a tooltip and subtitle
• Icon() – to visually represent the page
• Url() – optional custom URL for the page

We recommend setting a custom URL for the Home Page (e.g., "/") as it acts as the main entry point. For other pages, BlazorForKids will automatically generate a URL using a simple format: /LayoutName/PageName (excluding "Layout" and "Page" from the names), which you can override if needed.

2. Page Title Bar

The Page Title Bar appears at the top of the page and can include the page's icon, title, subtitle, a back button, and an optional menu. By default:

• The title is set from PageLink.Text()
• The subtitle is set from PageLink.Description()

You can override these with page.PageTitleBar.Title() and page.PageTitleBar.SubTitle(). The back button, which usually calls history.back(), can be customized to go to a specific URL or another defined page. This is helpful in parent-child layout structures. You can also add a right-aligned menu to the title bar using AddMenuItems, which is ideal for linking to related pages or features.

3. Page Content

The main content of your page is defined in page.Content(). Here, you can load one or more components to render inside the page. A common pattern is to separate the visual part of the page into a dedicated component — for example, for a page named HomePage, you might create a component called HomeView and load it with content.DisplayComponent<HomeView>().

You can also define a grid layout by using content.Rows() and content.Columns(). Then, for each component you add, you can specify how many rows and columns it should span. If a part of the layout isn’t ready yet, you can use the built-in BkPlaceHolder component as a temporary filler.

Example

Below is a complete example showing how to define a page with all its components configured:

Extra Configuration

BlazorForKids also allows you to control access, performance, and visibility for each page using options like:

• AddAuthorizePolicyAttribute() – restricts access by policy
• AddAuthorizeRolesAttribute() – restricts access by user roles
• VisibleToRoles() – shows the page link only to specific roles
• ApplyStaticRenderAttribute() – for static pages with no interactivity
• ApplyStreamRenderAttribute() – for static-like pages with initial data loading
• ApplyExcludeFromInteractiveRoutingAttribute() – exclude page from routing
• CssClass() – assign a custom CSS class to the page

By understanding and using these options, you can design flexible, modular, and well-organized pages in your BlazorForKids application.

Understanding Interactivity and Rendering Modes in BlazorForKids

One of the most important performance-related concepts in Blazor (and BlazorForKids) is how your pages are rendered and how they handle interactivity. Choosing the right rendering strategy can greatly improve the responsiveness and scalability of your application, especially for pages that don’t require user input or live updates.

What Is Interactivity?

In Blazor Server, interactivity means that the page stays connected to the server through a real-time SignalR connection. This allows the page to respond to user actions (like clicks, inputs, or component updates) in real-time. While this is powerful, it comes at a cost: every interactive page holds a live connection and consumes server memory.

Use interactivity when:

• You have forms or UI elements that require user input
• You use components like <InputText>, <button>, or bind values
• You want live validation, conditional UI, or data updates without refreshing

What Is a Static Page? (ApplyStaticRenderAttribute())

A static page is rendered once on the server and sent to the client as plain HTML. There’s no ongoing connection to the server — the page cannot respond to user interactions after it loads. This is great for performance because it avoids the overhead of interactivity.

Example use cases:

• Help or documentation pages
• Landing or marketing pages with only text and images
• Pages that display information that doesn’t change after loading

When to use: Apply page.ApplyStaticRenderAttribute() when the page doesn't need forms, buttons, or any client interaction.

What Is Stream Rendering? (ApplyStreamRenderAttribute())

Stream rendering is similar to static rendering, but it allows the page to perform some logic (like database queries) before rendering the final HTML. The data is fetched during the rendering process and included in the static output, but the page itself is still non-interactive.

Example use cases:

• Dashboards or reports that load data once but don’t allow interaction
• Public pages that show records from a database, but no inputs

When to use: Apply page.ApplyStreamRenderAttribute() when the page needs to display dynamic data from the database but still doesn’t need interactivity after loading.

Exclude from Interactivity (ApplyExcludeFromInteractiveRoutingAttribute())

Sometimes you want to define a page in your layout and let it exist only as a navigation target — but you don’t want it to be preloaded or handled through Blazor’s interactive router. In that case, use ApplyExcludeFromInteractiveRoutingAttribute().

This is useful when:

• You want a page to be opened in a new tab without preserving the Blazor state
• You’re rendering the page from an external system or want it to be treated like a traditional HTML page

Summary Table

Rendering Mode	Interactivity	Server Connection	Use When...
Default (Interactive)	✅	Yes (SignalR)	Page uses forms, buttons, live UI updates, or user input
Static Render	❌	No	Page is read-only, displays static text or images
Stream Render	❌	No	Page loads data once (like reports), but no interaction is needed
Exclude from Interactivity	❌	No	Page should be navigated directly, not preloaded by Blazor router

Real-World Examples

• HomePage: interactive, because it contains user stats and navigation buttons
• TermsOfServicePage: static, it’s just plain HTML text
• ProductListPage: stream render — loads data, no user interaction
• PrintInvoicePage: excluded from routing, opened in a new tab for printing

Understanding and applying these rendering strategies will help your app load faster, scale better, and make smarter use of server resources — all while giving you full control over the user experience.