These are short how-to articles that describe different aspects of building user interfaces and logic code for Blazor. These are discrete units with helpful information, so that you don’t need to follow a long tutorial, just to figure out how to add a Blazor page to your project. We also provide a set of articles on setting up and running tests for Blazor components and backing code.
These how-to articles sometimes build upon one another so it’s best to start learning them in order. But once you know your way around Blazor and test projects, each article can be used independently.
Setting Up
These articles revolve around basic project and page/component setup. Developers will like go through these steps many times to start new Blazor projects or tests or components and pages. These are the basis for the later articles.
How-To: Create Blazor WASM Project
Step-by-step instructions on creating new Blazor WebAssembly projects and cleaning them up to the minimum required.
How-To: Add bUnit Test Project to Blazor Solution
Create a second project for tests using the xUnit test framework and the bUnit Blazor testing library.
How-To: Create New Page in Blazor
Step-by-step instructions to create pages in our Blazor project.
How-To: Create New Blazor Component
Step-by-step instructions to create and consume components in our Blazor project.
How-To: Use Blazor Code-Behind Files
Step-by-step instructions to create Blazor pages with separate markup and code-behind files.
How-To: Use Class File for Blazor Logic Code
Separate business logic code from the Blazor page and into its own class. Then, bind an instance of that class into the page UI.
Developing in Blazor
Articles about how to develop your application using specific features in Blazor.
How-To: Create Blazor App Splash Screen
Learn to create an HTML splash screen that displays while the Blazor WebAssembly loads.
How-To: Add Blazor Component Interactivity with One-Way Binding
Learn the first step of adding interactivity to a Blazor component or page using one-way data binding.
How-To: Add Two-Way Binding to Blazor Page
Use two-way data binding to create pages/components that accept user input and bind that data to backing variables.
How-To: Define Parameters on Blazor Component
Use parameters to define extensible parts of a Blazor component. Use data binding to render the values of those parameters. And learn to set those parameters in parent components/pages.
How-To: Define EventCallback on Blazor Component
Use EventCallback or EventCallback<T> to surface events out of a Blazor component to its parent. Use it to invoke parent code in response to an event.
How-To: Define Routing Parameters on Blazor Page
Use routing parameters to define page routes that provide dynamic data from its URL. Learn to define required and optional routing parameters, along with type constraints.
Testing Blazor
Articles about unit and component testing Blazor components and supporting code in xUnit and bUnit.
How-To: Write First bUnit Test
Testing a simple home page to show the basics of using bUnit to render Blazor components using a TestContext.
How-To: Unit Test Blazor Pages with DataBinding
Write unit and component tests to validate components/pages with one-way and two-way bindings. Learn how bUnit supports interacting with HTML elments.
How-To: Write bUnit Test for Component
Test a static Blazor component to show the basics of using bUnit to render Blazor components using a TestContext and compare results.
How-To: Write bUnit Tests for Components with Parameters
Test a dynamic Blazor component that accepts component parameters. Learn to render these Blazor components in bUnit by passing parameters to the RenderComponent method.
How-To: Write bUnit Tests for Components with EventCallbacks
Test a Blazor component that surfaces an EventCallback. Learn to render these Blazor components in bUnit by passing an EventCallback parameter and validate the event handler.
How-To: Write bUnit Tests for Pages with Parameters
Test a dynamic Blazor page that accepts routing parameters. Learn to render these Blazor pages in bUnit by passing parameters to the RenderComponent method.
How-To: Verify Blazor Navigation in bUnit
Test Blazor hyperlinks and navigation code with bUnit. Learn how to the use bUnit FakeNavigationManager to validate code-based navigations.
Please provide any feedback you have about the tutorial and individual lessons.
DarthPedro's Blog 