Introduction
A pizza delivery company hires you to modernize their customer-facing Blazor website, which includes pizza listings, ordering pages, and other functionality. Blazor interactive web applications use .NET to share logic between the server and the client code.
In your updates, you want to:
- Use JavaScript to animate a rendered HTML component.
- Use a JavaScript library to apply branding to an alert page.
- Change how the app responds to events after page rendering is complete.
- Create and apply a template component to update multiple pages.
This module shows you how to interoperate with JavaScript code, use templated components, and respond to component lifecycle events in Blazor.
Learning objectives
- 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 template components that you can incorporate into Blazor apps.
Prerequisites
- Familiarity with HTML, CSS, and JavaScript web development.
- Novice ability to write C# code.
- The .NET 8.0 SDK installed.
- An integrated development environment (IDE). This module uses Visual Studio Code.
Tip
This module uses the .NET Command Line Interface (CLI) and Visual Studio Code for local development. After you complete the module, you can apply the concepts and continue development by using Visual Studio for Windows, Visual Studio for Mac, or Visual Studio Code with Windows, Linux, or Mac.
.NET 8.0 SDK
This module uses the .NET 8.0 SDK. Ensure that you have .NET 8.0 installed by running the following command in your preferred command terminal:
dotnet --list-sdks
Output similar to the following example appears:
6.0.317 [C:\Program Files\dotnet\sdk]
7.0.401 [C:\Program Files\dotnet\sdk]
8.0.100 [C:\Program Files\dotnet\sdk]
Ensure that a version that starts with 8 is listed. If none is listed or the command isn't found, install the most recent .NET 8.0 SDK.