Search⌘ K
AI Features
Home
Courses
Modern C# and .NET Tutorial: Cross-Platform Basics

Building and Testing Customer Components

Explore building shared customer detail components and routable pages in Blazor. Learn to add create, edit, and delete functionality with proper validation and navigation to manage customers efficiently.

We'll cover the following...

Building a shared customer detail component

Next, we will create a shared component to show the details of a customer. This will only be a component, never a page:

Step 1: In the Northwind.BlazorServer project, in the Shared folder, create a new file named CustomerDetail.razor. (The Visual Studio 2022 project item template is named Razor Component.)

Step 2: Modify its contents to define a form to edit the properties of a customer, as shown in the following code:

C#
<EditForm Model="@Customer" OnValidSubmit="@OnValidSubmit">
  <DataAnnotationsValidator />
  <div class="form-group">
    <div>
      <label>Customer Id</label>
      <div>
        <InputText @bind-Value="@Customer.CustomerId" />
        <ValidationMessage For="@(() => Customer.CustomerId)" />
      </div>
    </div>
  </div>
  <div class="form-group ">
    <div>
      <label>Company Name</label>
      <div>
        <InputText @bind-Value="@Customer.CompanyName" />
        <ValidationMessage For="@(() => Customer.CompanyName)" />
      </div>
    </div>
  </div>
  <div class="form-group ">
    <div>
      <label>Address</label>
      <div>
        <InputText @bind-Value="@Customer.Address" />
        <ValidationMessage For="@(() => Customer.Address)" />
      </div>
    </div>
  </div>
  <div class="form-group ">
    <div>
      <label>Country</label>
      <div>
        <InputText @bind-Value="@Customer.Country" />
        <ValidationMessage For="@(() => Customer.Country)" />
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-@ButtonStyle">
    @ButtonText
  </button>
</EditForm>
@code {
[Parameter]
public Customer Customer { get; set; } = null!;
[Parameter]
public string ButtonText { get; set; } = "Save Changes";
[Parameter]
public string ButtonStyle { get; set; } = "info";
[Parameter]
public EventCallback OnValidSubmit { get; set; }
}

Building customer create, edit, and delete components

Now we can create three routable page components that use the shared component:

...