Evaluate whether Blazor is appropriate for your next web development project and learn how Blazor works.
By the end of this module, you're able to:
- Evaluate whether Blazor is appropriate for your next web development project.
- Describe how Blazor works for building web apps.
Learn how to build your first web app with Blazor.
In this module, you will:
- Configure your local environment for Blazor development.
- Create a new Blazor web app project.
- Add component logic to a Blazor web app.
Learn how to build a to-do list with Blazor.
In this module, you will:
- Learn to handle events from components and set up two-way data bindings.
- Create a to-do list page.
Learn how to create a graphical user interface in a Blazor web app by creating and assembling Blazor components. Access data and share it for display on multiple pages within your app.
By the end of this module, you're 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.
Learn how to optimize your app's navigation, use parameters from the URL, and create reusable layouts in a Blazor web app.
By the end of this module, you're able to:
- Improve your Blazor app's navigation by using the router component and NavLinks.
- Enhance functionality with route parameters.
- Reduce duplicate code by using layouts in your Blazor app.
Learn how to use DOM events, forms, and validation in a Blazor app
By the end of this module, you're 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.
Learn how to use Razor class libraries to package and deploy components with Blazor.
By the end of this module, you're able to:
- Build a Razor class library that contains 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.
Learn how to build a web app with Blazor.
In this module you will:
- Create an app in Blazor.
- Manage state to your app.
- Customize appearance using CSS.
- Build a "Connect Four" game.

Syllabus

Introduction to Web Development with Blazor
- Introduction
- What is Blazor?
- How Blazor works
- When to use Blazor
- Module assessment
- Summary
Build your first web app with Blazor
- Introduction
- Configure your development environment
- Exercise - Create and run a Blazor web app
- Razor components
- Exercise - Add a component
- Module assessment
- Summary
Build a to-do list with Blazor
- Introduction
- Data binding and events
- Exercise - Create a to-do list
- Module assessment
- Summary
Interact with data in Blazor web apps
- 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
Use pages, routing, and layouts to improve Blazor navigation
- Introduction
- Use the Blazor router component to control your app's navigation
- Exercise - Change navigation in your Blazor app by 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
Improve how forms and validation work in Blazor web apps
- 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
Build reusable components with Blazor
- 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
Build a Connect Four game with Blazor
- Introduction
- Blazor
- Exercise - Blazor
- Game logic
- Exercise - Game logic
- Exercise - Customization using parameters
- Module assessment
- Summary