Skip to content
IzzyBlazor 0.1.0-alpha.17

Enter all results ↑ ↓ move Esc close

Render modes

The same components work on every page. On a static page they render HTML that works on its own, IzzyBlazor's script adds what HTML can't, and on an interactive page the same markup binds to C#.

Three layers

  • HTML first. Every component renders real elements: forms that post, links, radio buttons, native dialogs and selects, with CSS doing the switching. This is all a page has with JavaScript off.
  • IzzyBlazor's script. Small custom elements add keyboard handling, ARIA roles, live values and checks before posting, with no circuit.
  • Interactive pages. On a Server, WebAssembly or Auto page, @bind and event handlers keep C# in step.

Switch the mode to see one component in each:

Preview

Profile

Your name, photo and the email people see.

Billing

Your plan, payment method and invoices.

Security

Your password, passkeys and sessions.

C# has the tab as profile

Code

Modes.razor 
@* The same Tabs in each mode: radios and CSS with no script, ARIA tabs with IzzyBlazor's script,
   and C# told of the change on an interactive page. *@
<Stack Gap="3" Grow>
    <Tabs @bind-Selected="_tab" Label="Account">
        <Tab Label="Profile" Icon="Lucide.User">
            <TextBlock Color="Color.Muted">Your name, photo and the email people see.</TextBlock>
        </Tab>
        <Tab Label="Billing" Icon="Lucide.CreditCard">
            <TextBlock Color="Color.Muted">Your plan, payment method and invoices.</TextBlock>
        </Tab>
        <Tab Label="Security" Icon="Lucide.Shield">
            <TextBlock Color="Color.Muted">Your password, passkeys and sessions.</TextBlock>
        </Tab>
    </Tabs>
    <TextBlock Size="TextSize.Sm" Color="Color.Muted">C# has the tab as <Code>@(_tab ?? "profile")</Code></TextBlock>
</Stack>

@code {
    private string? _tab;
}

Static: The script makes them ARIA tabs, with roving focus. C# still isn't told: there's no circuit.

JavaScript offWith IzzyBlazor's scriptInteractive page
DialogOpens from a trigger or a ?dialog=id link; the browser traps focus and Escape closes itA dialog opened from the server becomes a real modal; the URL is tidied after closing@bind-Open
TableSorts, filters and pages through the URLA select-all checkbox; filters apply as you typeSorting, paging, filters and selection bind to C#
TabsRadio buttons and CSS switch panelsARIA tabs, roving focus@bind-Selected
ComboboxA native select that posts with the formType to filter, keyboard navigationServer-side search as you type
FileUploadThe file posts with a Multipart form (IFormFile)Drop files on the zone; type and size checked firstOnChange streams IBrowserFiles

Choose a page's mode

A Blazor Web App's pages are static unless you say otherwise. Make a page interactive where it needs C# on every click, and keep the rest static: they need no circuit, so they scale and deploy like plain pages. An interactive Server page's circuit lives on the server that started it, so with several servers, each reader has to stay on one; see Interactive parts stop responding in production.

razor
@page "/orders/{Id:int}/edit"
@rendermode InteractiveServer

WebAssembly and Auto pages live in the .Client project, with IzzyBlazor.Core; see WebAssembly or Auto.

What each component does

Each component's Overview has a Mode support table, and its API page labels the parameters that need more than HTML: Needs JavaScript, or Interactive only for C# events and @bind. Working with JavaScript off and doing more with it isn't labeled: that's every component.

State on static pages

With no circuit, C# runs only when the page is requested, so a static page keeps its state where the browser does:

  • In a form. Form posts and validates on the server, and its fields bind to your model.
  • In the URL. Table, FilterForm and Pagination keep sorting, filters and the page in the query string; Tabs takes QueryKey, and a dialog opens from ?dialog=id.
  • In the element. Disclosures, menus, popovers and dialogs open and close in the browser. On an interactive page, @bind-Open reports it to C#, and setting Open opens or closes it.
  • In a cookie. The color scheme and the sidebar's state, read on the server so pages arrive right.

Events such as a button's OnClick run only on interactive pages. On a static page, use a submit button in a form or a link. Troubleshooting has the usual surprises, such as a value that resets on the next request.

Next steps