Building Components Using Blazor Server

Building a component

Now, we will build a component to list, create, and edit customers in the Northwind database. We will build it over several steps:

Step 1: Make a Blazor Server component that renders the name of a country set as a parameter.

Step 2: Make it work as a routable page as well as a component.

Step 3: Implement the functionality to perform CRUD operations on customers in a database.

Step 4: Refactor the component to work with Blazor Server and Blazor WebAssembly.

Defining and testing a simple Blazor Server component

We will add the new component to the existing Blazor Server project:

Step 1: In the Northwind.BlazorServer project (not the Northwind.BlazorWasm.Server project), in the Pages folder, add a new file named Customers.razor. In Visual Studio, the project item template is named Razor Component.

Note: Component filenames must start with an uppercase letter, or we will have compile errors.

Step 2: Add statements to output a heading for the Customers component and define a code block that defines a property to store the name of a country, as shown highlighted in the following markup: