Components can be made more generic by passing in parameter data which the component then uses in its layout and rendering. Rather than hard-coding all of the content of a component, we can expose parameters that allow the component users some flexibility. Component parameters are defined using public simple or complex properties on the component … Continue reading How-To: Define Parameters on a Blazor Component
Category: How-To
How-To: Create New Blazor Component
Blazor apps are based on components. A component in Blazor is the atomic unit of composition for any UI element, such as a page, control, dialog, or data entry form. Components are .NET C# classes built into assemblies. They can: Define UI rendering logic.Handle user events.Be nested and reused.Be shared and distributed as Razor class libraries or NuGet packages. The … Continue reading How-To: Create New Blazor Component
How-To: Create Blazor App Splash Screen
When applications require time to load up, they usually provide a splash screen to give the user something to watch, provide feedback that the application is loading, and start building the user interface branding for the app. Blazor also has the ability to show an HTML splash screen, while the Blazor WebAssembly and possibly the … Continue reading How-To: Create Blazor App Splash Screen
How-To: Unit Test Blazor Pages with DataBinding
Continuing with our use of the bUnit testing library for Blazor components. We will investigate how to create unit and component tests for pages/components that use both one-way and two-way data bindings. We will look at changing data on the page and performing actions (like button clicks) and then seeing how that impacts the page rendering. … Continue reading How-To: Unit Test Blazor Pages with DataBinding
How-To: Add Two-Way Binding to Blazor Page
In order to support taking user input in components and pages, Blazor supports a form of two-way binding which updates either when the user makes a change in the element or when the system updates the backing property/variable. When the variable changes, this two-way binding works exactly like one-way binding - the component is rendered … Continue reading How-To: Add Two-Way Binding to Blazor Page
How-To: Add Blazor Component Interactivity with One-Way Binding
Building a static HTML page with Blazor is pretty easy, but doesn't make for an interesting application. To support basic interactivity, Blazor components/pages use databinding to show dynamic data and respond to events on the component and its elements. The simplest form of databinding is one-way binding. One-way binding renders the data from our code … Continue reading How-To: Add Blazor Component Interactivity with One-Way Binding
How-To: Create New Page in Blazor
In Blazor, a page is the basic unit of navigation. It is the top-level component that can be reached via a URL So, when we want a new view in your Blazor app, we will need to create a new page. In all other aspects, a page and a component have equivalent functionality. First, we … Continue reading How-To: Create New Page in Blazor
How-To: Write First bUnit Test
bUnit is a testing library for Blazor components. Its goal is to make it easy to write comprehensive, stable unit tests for these components. We will learn the steps to create our first bUnit test from setup to rendering to validation. This first test will be very simple to allow us to focus on the mechanics of creating the … Continue reading How-To: Write First bUnit Test
How-to: Add bUnit Test Project to Blazor Solution
Having automated tests for our Blazor applications is very important. We can use xUnit (or any other) test framework to write unit tests for the C# classes in our app. However, some part of our logic (even if it's just the databinding logic) lives in Blazor components and pages. For those to be tested, we … Continue reading How-to: Add bUnit Test Project to Blazor Solution
How-To: Create Blazor WASM Project
Here are the quick steps to create a Blazor WebAssembly project for .NET 5 in Visual Studio. The basic template creates some extra pages and components, so we will also clean it up to produce a minimal project with a home page. This is a great starting point for all of our Blazor projects. Initial … Continue reading How-To: Create Blazor WASM Project