syncfusion-blazor-common

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Syncfusion Blazor Getting Started

Syncfusion Blazor 入门指南

Setup and configuration guide for Syncfusion Blazor components in Blazor Web Apps.

Blazor Web Apps中Syncfusion Blazor组件的设置与配置指南。

When to Use

适用场景

Use this skill when you need to:

Set up a new Blazor project with Syncfusion Blazor components
Create a Blazor Web App with specific .NET version targeting (net8.0, net9.0, net10.0, etc.)
Add Syncfusion components (Grid, Button, etc.) with features based on context
Optimize script loading with static assets or CDN
Set up bUnit testing for Syncfusion components

当你需要以下操作时使用本技能：

使用Syncfusion Blazor组件搭建新的Blazor项目
创建针对特定.NET版本（net8.0、net9.0、net10.0等）的Blazor Web App
根据上下文添加带有特定功能的Syncfusion组件（Grid、Button等）
通过静态资源或CDN优化脚本加载
为Syncfusion组件设置bUnit测试

Quick Reference

快速参考

Getting Started: See getting-started.md for full project setup steps
Scripts & CDN: See add-script-reference-and-cdn.md for script loading options
bUnit Testing: See bunit-setup.md for unit testing setup
Localization & Globalization: See localization-globalization.md for culture and localization setup

入门指南：查看getting-started.md获取完整的项目设置步骤
脚本与CDN：查看add-script-reference-and-cdn.md了解脚本加载选项
bUnit测试：查看bunit-setup.md了解单元测试设置
本地化与全球化：查看localization-globalization.md了解文化与本地化设置

Prerequisites

前提条件

.NET 8+ SDK
Blazor Web App project
Syncfusion account (free trial)
NuGet package access

.NET 8+ SDK
Blazor Web App项目
Syncfusion账户（免费试用）
NuGet包访问权限

1. Getting Started

1. 入门指南

Detailed guide: getting-started.md

详细指南：getting-started.md

Quick Setup

快速设置

Create Blazor Web App with your chosen render mode and explicit .NET version (e.g.,
```
.NET 10
```
)
Install
```
Syncfusion.Blazor.Grid
```
+
```
Syncfusion.Blazor.Themes
```
NuGet packages. All individual packages are listed here
Add
```
@using Syncfusion.Blazor
```
and relevant component namespaces to
```
_Imports.razor
```

builder.Services.AddSyncfusionBlazor()

Program.cs

Add theme CSS and script references to
```
App.razor
```
Use Syncfusion components in your pages

Key Rule: For Auto/WASM modes → register in both server and client projects Important: Always specify the target .NET framework version when creating projects to ensure compatibility

创建带有所选渲染模式和指定.NET版本（例如
```
.NET 10
```
）的Blazor Web App
安装
```
Syncfusion.Blazor.Grid
```
+
```
Syncfusion.Blazor.Themes
```
NuGet包。所有独立包的列表请查看此处
在
```
_Imports.razor
```
中添加
```
@using Syncfusion.Blazor
```
及相关组件的命名空间

在

Program.cs

中注册

builder.Services.AddSyncfusionBlazor()

在
```
App.razor
```
中添加主题CSS和脚本引用
在页面中使用Syncfusion组件

关键规则：对于Auto/WASM模式 → 在服务器和客户端项目中都要注册 重要提示：创建项目时始终指定目标.NET框架版本，以确保兼容性

Quick Start Options

快速入门选项

Blazor Playground: Browser-based, no local install
Template Studio: Pre-configured VS/VS Code project templates

Blazor Playground：基于浏览器，无需本地安装
Template Studio：预配置的VS/VS Code项目模板

2. Script References and CDN

2. 脚本引用与CDN

Detailed guide: add-script-reference-and-cdn.md

详细指南：add-script-reference-and-cdn.md

Script Loading Options

脚本加载选项

Method	Best For
Static Web Assets (Recommended)	Optimal performance, offline support
CDN	Cloud-hosted, quick setup
Individual Scripts	Minimal component usage

方法	最佳适用场景
静态Web资源（推荐）	最佳性能，支持离线使用
CDN	云托管，快速设置
独立脚本	仅使用少量组件时

3. bUnit Testing

3. bUnit测试

Detailed guide: bunit-setup.md

Unit test Syncfusion Blazor components with bUnit.

详细指南：bunit-setup.md

使用bUnit对Syncfusion Blazor组件进行单元测试。

Required Setup

必要设置

Install

bunit

NuGet package, then register in each test:

csharp

using var ctx = new TestContext();
ctx.Services.AddSyncfusionBlazor()
   .Replace(ServiceDescriptor.Transient<IComponentActivator, SfComponentActivator>());
ctx.Services.AddOptions();

安装

bunit

NuGet包，然后在每个测试中注册：

csharp

using var ctx = new TestContext();
ctx.Services.AddSyncfusionBlazor()
   .Replace(ServiceDescriptor.Transient<IComponentActivator, SfComponentActivator>());
ctx.Services.AddOptions();

Test Pattern

测试模式

```
RenderComponent<TPage>()
```
→ render
```
FindComponent<SfButton>()
```
→ locate
```
.Click()
```
→ interact
```
MarkupMatches(...)
```
→ assert

Works with xUnit and NUnit (use

Bunit.TestContext

for NUnit to avoid naming conflicts)

```
RenderComponent<TPage>()
```
→ 渲染
```
FindComponent<SfButton>()
```
→ 定位
```
.Click()
```
→ 交互
```
MarkupMatches(...)
```
→ 断言

适用于xUnit和NUnit（NUnit使用

Bunit.TestContext

以避免命名冲突）

4. Localization and Globalization

4. 本地化与全球化

Detailed guide: localization-globalization.md

Configure multi-language support and culture-specific formatting for Syncfusion Blazor components.

详细指南：localization-globalization.md

为Syncfusion Blazor组件配置多语言支持和特定文化的格式设置。

Key Concepts

核心概念

Internationalization (i18n): Parsing and formatting dates, times, numbers, and currencies
Localization (l10n): Adding culture-specific customizations and translating UI text
Globalization: Combines both i18n and l10n

国际化（i18n）：解析和格式化日期、时间、数字及货币
本地化（l10n）：添加特定文化的自定义设置并翻译UI文本
全球化：结合i18n和l10n两者

Quick Setup

快速设置

Download and add culture-based
```
.resx
```
resource files from GitHub - ASK PERMISSION BEFORE DOWNLOAD THIS

Create a

SyncfusionLocalizer

class implementing

ISyncfusionStringLocalizer

Program.cs

csharp

builder.Services.AddSyncfusionBlazor();
builder.Services.AddSingleton(typeof(ISyncfusionStringLocalizer), typeof(SyncfusionLocalizer));

Set culture statically or dynamically (server, WebAssembly, or MAUI apps)
Create a
```
CultureSwitcher
```
component for dynamic culture selection

从GitHub下载并添加基于文化的
```
.resx
```
资源文件 - 下载前请征得许可

创建实现

ISyncfusionStringLocalizer

接口的

SyncfusionLocalizer

类

在

Program.cs

中注册：

csharp

builder.Services.AddSyncfusionBlazor();
builder.Services.AddSingleton(typeof(ISyncfusionStringLocalizer), typeof(SyncfusionLocalizer));

静态或动态设置文化（服务器、WebAssembly或MAUI应用）
创建
```
CultureSwitcher
```
组件以实现动态文化选择