Web 应用

Blazor JavaScript 互操作性

关于 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 表单验证

使用数据注解 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 全球化与本地化

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

组件化开发组件化开发允许开发者将 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 和跨平台支持。 ...