Build web apps with Blazor

By the end of this module, you'll be able to:

• Evaluate whether Blazor is appropriate to build your next web application.
• Describe how Pages and Components of Blazor work to build a web application.
• Evaluate when to use Blazor WebAssembly or Blazor Server

In this module, you will:

• Configure your local environment for Blazor development with Visual Studio Code
• Create a new Blazor project
• Add client-side logic to a Blazor web app

By the end of this module, you'll be able to:

• Assemble a user interface for a web app by creating Blazor components.
• Access data to display in your web app.
• Share data in your web app between multiple Blazor components.
• Bind an HTML element to a variable in a Blazor component.

By the end of this module, you'll be able to:

• Improve your Blazor app's navigation using the router component and NavLinks
• Enhance functionality with route parameters
• Reduce duplicate code by using layouts in your Blazor app

By the end of this module, you'll be able to:

• Improve your app's interactivity using Blazor event handlers
• Use forms in Blazor to facilitate data entry
• Extend forms in Blazor with server and client-side validation

By the end of this module, you'll be able to:

• Call JavaScript functions from .NET code and call .NET code from JavaScript in Blazor apps
• Handle events in the lifecycle of Blazor components.
• Create reusable components that can be incorporated into Blazor Server apps using templates

By the end of this module, you'll be able to:

• Build a Razor class library containing Blazor components
• Package a Razor class library for use in other Blazor applications
• Reference a Razor class library in a Blazor application and use its components

• Introduction
• What is Blazor?
• When to use Blazor
• Knowledge check
• Summary

• Introduction
• What is Blazor?
• Exercise - Create and run a Blazor web app
• Blazor components
• Exercise - Add a component
• Data binding and events
• Exercise - Data binding and events
• Summary

• Introduction
• Create a user interface with Blazor components
• Exercise - Create a user interface with Blazor components
• Access data from a Blazor component
• Exercise - Access data from a Blazor component
• Share data in Blazor applications
• Exercise - Share data in Blazor applications
• Bind controls to data in Blazor applications
• Exercise - Bind controls to data in Blazor applications
• Summary

• Introduction
• Use the Blazor router component to control your app's navigation
• Exercise - Change navigation in your Blazor app using the @page directive
• Explore how route parameters affect your Blazor app's routing
• Exercise - Use route parameters to improve your apps navigation
• Build reusable Blazor components using layouts
• Exercise - Add a Blazor layout to reduce duplication in your code
• Summary

• Introduction
• Attach C# code to DOM events with Blazor event handlers
• Exercise - Create a Blazor event handler for onclick events
• Take advantage of the power of Blazor forms
• Exercise - Create an address form with Blazor components
• Validate user input implicitly without writing validation code
• Exercise - Add server-side and client-side data validation to the address form
• Summary

• Introduction
• Create a user interface with Blazor components
• Exercise - Use JavaScript libraries in Blazor apps
• Improve app interactivity with lifecycle events
• Exercise - Improve app interactivity with lifecycle events
• Reuse components by creating templates
• Exercise - Reuse components by creating templates
• Summary

• Introduction to Razor class libraries
• Razor class library creation and concepts
• Create a Razor class library
• Package a Razor class library
• Create a NuGet package
• Summary