Blazor – Twitch Episode 3 Recap

I decided to split episode 2 up in two posts (post 1 and post 2) because of the creation of the Generic Abstract DataStore. It is a fundamental part of the architecture and it allows us to take care of a couple of important aspects:

• Decoupling the UI from the EF Models through DTO
• The UI is now dealing with DTO Model classes
• We have server-side validation logic in place

To improve the end-user experience, we can also implement client-side validation. Because I’m already using FluentValidation on the server side, it makes sense to follow this approach for the DTO Models as well.

Because FluentValidation is a code-based approach, it works very differently from the standard Blazor validation (with the System.ComponentModel.Annotations attributes). Therefore, we cannot use the ValidationSummary control. Fortunately there are a couple of ValidationSummary equivalents out on Nuget which will do the job.

I have decided to go for the Blazored.FluentValidation from my friend Chris Sainty. He’s a very early adopter of Blazor, as well as a Microsoft MVP for his community efforts concerning Blazor.

After adding the package to the DxBlazorChinook project:

<Project Sdk="Microsoft.NET.Sdk.Web">
  <PropertyGroup>
    <TargetFramework>net6.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>
  <ItemGroup>
    <PackageReference Include="Blazored.FluentValidation" Version="2.1.0" />

we can start using the FluentValidationValidator component.

Because we are editing within the scope of the DevExpress DxGrid control - which also allows us to do inline or row editing - where should we put the Validator?

If we check the documentation of the DxGrid, there is a CustomValidators template we can use for this, together with the ValidationEnabled property:

<DxGrid Data="@Data"
       
        ValidationEnabled="true"
       >

    <!-- code removed for clarity -->

    <CustomValidators>
        <FluentValidationValidator @ref="fluentValidator"></FluentValidationValidator>
    </CustomValidators>

</DxGrid>

With this in place we have completed both our front- and back-end validation!

As with the previous recaps, head over to GitHub and clone this branch to play around with the code.