WebApp on Hi Work Notes

Blazor Form Validation

Tue, 10 Mar 2026 15:55:34 +0800

Validation with DataAnnotations

public class Employee
{
 [Required(ErrorMessage = "Name is required")]
 public string Name { get; set; }
}

@page "/employee"
@using System.ComponentModel.DataAnnotations
@using Microsoft.AspNetCore.Components.Forms

<h3>Employee Form</h3>

<EditForm Model="@employee" OnValidSubmit="@HandleValidSubmit">
 <DataAnnotationsValidator />
 <ValidationSummary />

 <div class="form-group">
 <label for="Name">Name</label>
 <InputText id="Name" @bind-Value="employee.Name" class="form-control" />
 <ValidationMessage For="@(() => employee.Name)" />
 </div>

 <button type="submit" class="btn btn-primary">Submit</button>
</EditForm>

@code {
 private Employee employee = new Employee();
}

Validation with FluentValidation

dotnet add package Blazored.FluentValidation

public class EmployeeValidator : AbstractValidator<Employee>
{
 public EmployeeValidator()
 {
 RuleFor(x => x.Name).NotEmpty().WithMessage("Name is required");
 }
}

@page "/employee"
@using FluentValidation
@using FluentValidation.Results

<h3>Employee Form</h3>

<EditForm Model="@employee" OnValidSubmit="@HandleValidSubmit">
 <FluentValidationValidator DisableAssemblyScanning="@true" />
 <ValidationSummary />

 <div class="form-group">
 <label for="Name">Name</label>
 <InputText id="Name" @bind-Value="employee.Name" class="form-control" />
 <ValidationMessage For="@(() => employee.Name)" />
 </div>

 <button type="submit" class="btn btn-primary">Submit</button>
</EditForm>

Custom Validation

Blazor Globalization and Localization

Tue, 10 Mar 2026 15:55:34 +0800

Blazor applications can support multiple languages and cultures by using the globalization and localization features of .NET Core. This article describes how to implement globalization and localization in a Blazor application.

Blazor WebAssembly

<PropertyGroup>
 <BlazorWebAssemblyLoadAllGlobalizationData>true</BlazorWebAssemblyLoadAllGlobalizationData>
</PropertyGroup>

dotnet add package Microsoft.Extensions.Localization

Blazor Server

builder.Services.AddCustomLocalization();

app.UseCustomLocalization();

Blazor JavaScript Interoperability

Tue, 10 Mar 2026 15:55:34 +0800

About JavaScript Location

Load a script in the `<head>` tag

<head>
 <script src="js/first.js"></script>
 <script>
 window.jsMethod = (methodParameter) => {
 ...
 };
 </script>
</head>

Load a script in the `<body>` tag

<body>
 <script src="js/first.js"></script>
 <script>
 window.jsMethod = (methodParameter) => {
 ...
 };
 </script>
</body>

Colocate with the component

Component: CountComponent.razor
Component: CountComponent.razor.cs
Style: CountComponent.razor.css
Script: CountComponent.razor.js

Call JS from .NET

Create an app.js file under wwwroot

function helloWorld() {
 alert('Hello World');
}

function add(a, b) {
 return a + b;
}

Include the JS file in App.razor

Script inclusion in the current web project

Developing Blazor Hybrid Apps

Tue, 10 Mar 2026 15:55:34 +0800

Component-Based Development

Component-based development allows developers to encapsulate UI components as independent Blazor components and reuse them across applications. This approach improves the maintainability and reusability of the code, similar to modern front-end frameworks such as React and Vue.

Component = HTML + CSS + JS

Blazor component = Razor + CSS + C#

Introduction to MAUI

MAUI is the cross-platform UI framework introduced in .NET 6, which allows developers to create native applications using C# and XAML. It is the evolution of Xamarin.Forms and supports Android, iOS, macOS, and Windows.

WebApp on Hi Work Notes

Blazor Form Validation

Validation with DataAnnotations

Validation with FluentValidation

Custom Validation

Blazor Globalization and Localization

Blazor WebAssembly

Blazor Server

Blazor JavaScript Interoperability

About JavaScript Location

Load a script in the <head> tag

Load a script in the <body> tag

Colocate with the component

Call JS from .NET

Create an app.js file under wwwroot

Include the JS file in App.razor

Developing Blazor Hybrid Apps

Component-Based Development

Introduction to MAUI

Load a script in the `<head>` tag

Load a script in the `<body>` tag