Pixata.Blazor 5.12.1

Pixata.Blazor

Like many developers, I find myself writing the same Blazor components over and over again. I have gathered some of those components together in one place, and am making them available for anyone else who might find them useful.

A Nuget package is available for these components.

See the release notes for what changed in each version.

I sometimes waffle on about these components in my blog. No-one reads it, but it satisfies my deeply buried desire to be a writer. If you read the blog, you'll realize why the desire is still deeply buried!

There is a complementary package, which contains additional components for those who have a subscription to Telerik.

Sample project

I have added a Blazor web project to the repository, and use that to try out and demonstrate the components. It doesn't contain samples for all the components yet, but I hope to add more over time. It is deployed at test.pixata.co.uk.

Documentation

The documentation is split over the following pages...

Registering dependencies

Some components in this package require services to be registered in the DI container. To make this easier, you can use the AddPixataBlazor extension method in your Program.cs file...

builder.Services.AddPixataBlazor();

This registers the following services (all from this package)...

PersistentStateHelper<T> does the same job as the [PersistentState] attribute added in .NET 10. This one was written around .NET 8, and is still useful for projects targetting .NET versions before 10.

It also registers Blazored.LocalStorage, which ScrollStateService needs. This package has always referenced Blazored.LocalStorage, but until v2.34.0 it left you to register it, so unless you knew to add builder.Services.AddBlazoredLocalStorage() yourself, your app fell over at startup when the container was validated. If you have already registered it (with your own options, for example), your registration is left alone.

Note that you need to do this in any Program.cs file, so if you have a mixed rendering mode (both server-side and client-side), you'll need to call AddPixataBlazor in both Program.cs files.

It is a good idea to add this line after your own service registrations, as it checks for duplicate registrations. Therefore, if you have already registered any of the services, you will see a message in your console...

A service of type TemplateHelper has already been registered

This isn't actually a problem, but removing the duplicate registration will keep the code file a bit cleaner.

The audit viewer and the payload encryption have their own registration methods, as most apps don't want them. See the pages listed above.

The dialog host

If you want to show the alert, confirm and prompt dialogs from code (with PixataDialogFactory), add the host component to your layout, inside an interactively rendered component...

@using Pixata.Blazor.Components

<PixataDialogHost />

If you ask for one of these dialogs without a host on the page, you get an exception telling you to add it. If your layout is rendered statically and only some pages are interactive, put the host in those pages instead, as it has to share a DI scope with the code that shows the dialogs. See Dialogs for more.

Styling

Don't forget to add the stylesheet, or the components will render unstyled...

<link rel="stylesheet" href="_content/Pixata.Blazor/pixata.css" />

See Styling for what's in it, and how to fit it to your own theme.