Modern C# and .NET Tutorial: Cross-Platform Basics/

...

/

Building and Testing Customer Components

Building and Testing Customer Components

Learn about creating a shared component and components for full CRUD operations on customer records and testing operations of customer data.

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:

Press + to interact
<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:

Step 1: In the Northwind.BlazorServer project, ...