Web 应用 on Hi Work Notes

Blazor JavaScript 互操作性

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

关于 JavaScript 位置

在 `<head>` 标记中加载脚本

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

在 `<body>` 标记中加载脚本

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

组件并置

组件：CountComponent.razor
组件：CountComponent.razor.cs
样式：CountComponent.razor.css
脚本：CountComponent.razor.js

从.NET 调用 JS

在 wwwroot 下创建 app.js 文件

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

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

在 App.razor 中引入 JS 文件

当前 Web 项目脚本引入

<head>
 <script src="@Assets["app.js"]"></script>
</head>

如果使用了 RCL 组件库

<head>
 <script src="_content/LibraryName/app.js"></script>
</head>

在 .NET 组件中调用 JS 方法

@inject IJSRuntime JS

<button class="btn btn-primary" @onclick="SayHello">SayHello</button>
<button class="btn btn-primary" @onclick="Add">Add</button>
<p>Current count: @result</p>

@code {

 private int result = 0;

 private async Task SayHello()
 {
 await JS.InvokeVoidAsync("helloWorld");
 }

 private async Task Add()
 {
 result = await JS.InvokeAsync<int>("add", result, 1);
 StateHasChanged();
 }
}

基于模块化的 JS 文件

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

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

在 MyComponent.razor 组件中写如下代码

Blazor 表单验证

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

使用数据注解 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();
}

使用 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>

自定义验证

Blazor 全球化与本地化

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

Blazor 应用程序可以通过使用 .NET Core 的全球化和本地化功能来支持多种语言和文化。本文将介绍如何在 Blazor 应用程序中实现全球化和本地化。

Blazor WebAssembly

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

dotnet add package Microsoft.Extensions.Localization

Blazor Server

builder.Services.AddCustomLocalization();

app.UseCustomLocalization();

开发 Blazor Hybrid 应用

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

组件化开发

组件化开发允许开发者将 UI 组件封装为独立的 Blazor 组件，并在应用程序中复用。这种方式可以提高代码的可维护性和可重用性，类似于 React 和 Vue 等现代前端框架。

组件 = HTML + CSS + JS

Blazor 组件 = Razor + CSS + C#

MAUI 介绍

MAUI 是 .NET 6 中引入的跨平台 UI 框架，允许开发者使用 C# 和 XAML 创建原生应用程序。它是 Xamarin.Forms 的演进，支持 Android、iOS、macOS 和 Windows 平台。

Blazor 介绍

Blazor 是一个用于构建交互式 Web 应用程序的框架，允许开发者使用 C# 和 Razor 语法在客户端和服务器端共享代码。Blazor 支持 WebAssembly 和服务器端渲染两种模式，使得开发者可以根据需要选择合适的模式来构建应用程序。

MAUI + Blazor

Blazor Hybrid 应用程序结合了 MAUI 和 Blazor 的优势，允许开发者在 MAUI 应用程序中嵌入 Blazor 组件。这样，开发者可以使用 Blazor 的组件化开发方式，同时享受 MAUI 提供的原生 UI 和跨平台支持。

Web 应用 on Hi Work Notes

Blazor JavaScript 互操作性

关于 JavaScript 位置

在 <head> 标记中加载脚本

在 <body> 标记中加载脚本

组件并置

从.NET 调用 JS

在 wwwroot 下创建 app.js 文件

在 App.razor 中引入 JS 文件

在 .NET 组件中调用 JS 方法

基于模块化的 JS 文件

Blazor 表单验证

使用数据注解 DataAnnotations 验证

使用 FluentValidation 验证

自定义验证

Blazor 全球化与本地化

Blazor WebAssembly

Blazor Server

开发 Blazor Hybrid 应用

组件化开发

MAUI 介绍

Blazor 介绍

MAUI + Blazor

在 `<head>` 标记中加载脚本

在 `<body>` 标记中加载脚本