Blazor – Twitch Episode 3 Recap

ASP.NET Team Blog
10 November 2023

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">
    <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"

    <!-- code removed for clarity -->

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


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.

Free DevExpress Products - Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We'll be happy to follow-up.