Building User Interfaces Using Blazor

This chapter is about using Blazor to build user interfaces. You will learn how to build Blazor components that can execute their C# and .NET code on the web server or in the web browser. When components execute on the server, Blazor uses SignalR to communicate needed updates to the user interface in the browser. When components execute in the browser using WebAssembly, they must make HTTP calls to interact with data on the server.

In this chapter, we will cover the following topics:

• History of Blazor
• Reviewing the Blazor Web App project template
• Building components using Blazor
• Enabling client-side execution using WebAssembly

History of Blazor

Blazor lets you build interactive web user interface components using C# instead of JavaScript. Blazor is supported on all modern browsers.

JavaScript and friends

Traditionally, any code that needs to be executed in a web browser must be written using the JavaScript programming language or a higher-level technology that transpiles (transforms or compiles) into JavaScript. This is because all browsers have supported JavaScript for over two decades, so it is the lowest common denominator for implementing business logic in the client.

JavaScript does have some issues, however. Although it has superficial similarities to C-style languages like C# and Java, it is actually very different once you dig beneath the surface. It is a dynamically typed pseudo-functional language that uses prototypes instead of class inheritance for object reuse. It might look human, but you will get a surprise when it’s revealed to be a Skrull.

It’d be great if...

Reviewing the Blazor Web App project template

Before .NET 8, there were separate project templates for the different hosting models, for example, Blazor Server App, Blazor WebAssembly App, and Blazor WebAssembly App Empty. Introduced with .NET 8 is a unified project template named Blazor Web App and a client-only project template renamed Blazor WebAssembly Standalone App. Consider all the others legacy and avoid them unless you must use older .NET SDKs.

Creating a Blazor Web App project

Let’s look at the default template for a Blazor Web App project. Mostly, you will see that it is the same as an ASP.NET Core Empty template, with a few key additions:

1. Use your preferred code editor to open the PracticalApps solution and then add a new project, as defined in the following list:
   • Project template: Blazor Web App / blazor --interactivity None
   • Solution file and folder: PracticalApps
   • Project file and folder: Northwind.Blazor
   ...

Building components using Blazor

In this section, we will build a component to list, create, and edit customers in the Northwind database.

We will build it over several steps:

1. Make a Blazor component that renders the name of a country set as a parameter.
2. Make it work as a routable page as well as a component.
3. Implement the functionality to perform CRUD operations on customers in a database.

Defining and testing a simple Blazor component

We will add the new component to the existing Blazor Web App project:

1. In the Northwind.Blazor project, in the Components\Pages folder, add a new file named Customers.razor. In Visual Studio 2022, the project item template is named Razor Component. In JetBrains Rider, the project item template is named Blazor Component.

   Good Practice: Blazor component filenames must start with an uppercase letter, or you will have compile errors!

2. Add statements to output a heading for...

Enabling client-side execution using WebAssembly

.NET 8 Release Candidate 1 had a go-live license but the changes to Blazor were so ambitious that the client-side support was not finished in time for the final drafts of this book. We put the final section of this book online so that it could be updated to use the general availability release of .NET 8, which should complete the client-side functionality of Blazor. You can find the final section at the following link:

https://github.com/markjprice/cs12dotnet8/blob/main/docs/ch15-blazor-wasm.md

Practicing and exploring

Test your knowledge and understanding by answering some questions, getting some hands-on practice, and exploring this chapter’s topics with deeper research.

Exercise 15.1 – Test your knowledge

Answer the following questions:

1. What are the four Blazor render modes, and how are they different?
2. In a Blazor Web App project, compared to an ASP.NET Core MVC project, what extra configuration is required?
3. Why should you avoid the Blazor Server and Blazor Server Empty project templates?
4. In a Blazor Web App project, what does the App.razor file do?
5. What is the main benefit of using the <NavLink> component?
6. How can you pass a value into a component?
7. What is the main benefit of using the <EditForm> component?
8. How can you execute some statements when parameters are set?
9. How can you execute some statements when a component appears?
10. One of the benefits of Blazor is being able...

Summary

In this chapter, you learned:

• About the concepts of Blazor components.
• How to build Blazor components that execute on the server side.
• How to build Blazor components that execute on the client side using WebAssembly.
• Some of the key differences between the two hosting models, like how data should be managed using dependency services.

In the Epilogue, I will make some suggestions for books to take you deeper into C# and .NET.