syncfusion-blazor-spreadsheet-editor

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Syncfusion Blazor Spreadsheet Editor

Syncfusion Blazor 电子表格编辑器

Overview

概述

Generates production-ready C# and Razor code for integrating the Syncfusion Blazor Spreadsheet component into Blazor Server or WebAssembly applications. The skill produces copy-pasteable code snippets with Excel-like functionality including cell editing, formatting, formulas, data operations, and worksheet management.

生成可直接用于生产环境的C#和Razor代码，帮助将Syncfusion Blazor Spreadsheet组件集成到Blazor Server或WebAssembly应用中。本技能提供可直接复制粘贴的代码片段，具备类Excel的功能，包括单元格编辑、格式化、公式、数据操作和工作表管理。

Key Capabilities

核心功能

Data & Binding: Load from
```
byte[]
```
, local JSON file, remote JSON URL, or Google Drive; save via Ribbon
Cell & Range Operations: Editing with events, UpdateCell, set formulas, autofill, range actions, merge/unmerge cells, cell formatting, number formats
Rows, Columns & Worksheets: Insert/resize rows and columns; insert, delete, move, and duplicate worksheets
Data Operations: filtering, sorting, hyperlink add/edit/remove, cut/copy/paste, cell and range selection
UI & Interactivity: Hide/show Formula bar , Hide/show Context Menu, custom data rendered via XlsIO
Protection & History: Sheet and workbook protection/unprotection, undo/redo operations
Images: Insert, resize, and move images through UI (enabled by default)

数据与绑定： 从
```
byte[]
```
、本地JSON文件、远程JSON URL或Google Drive加载数据；通过功能区保存数据
单元格与区域操作： 带事件的编辑功能、UpdateCell方法、设置公式、自动填充、区域操作、单元格合并/取消合并、单元格格式化、数字格式
行、列与工作表： 插入/调整行和列大小；插入、删除、移动和复制工作表
数据操作： 筛选、排序、超链接添加/编辑/移除、剪切/复制/粘贴、单元格和区域选择
UI与交互性： 显示/隐藏公式栏、显示/隐藏上下文菜单、通过XlsIO渲染自定义数据
保护与历史记录： 工作表和工作簿的保护/取消保护、撤销/重做操作
图片： 通过UI插入、调整大小和移动图片（默认启用）

Quick Start Examples

快速开始示例

Example 1: Display a basic spreadsheet

示例1：展示基础电子表格

User: "Add a basic Spreadsheet to my Blazor page" Result: C# + Razor code snippet displayed (no files created)

用户： "在我的Blazor页面中添加基础Spreadsheet" 结果： 显示C# + Razor代码片段（不创建文件）

Example 2: Disable filtering and sorting

示例2：禁用筛选和排序功能

User: "Create a spreadsheet with filtering and sorting disabled" Result: Basic sample merged with

filtering.md

and

sorting.md

snippets

用户： "创建一个禁用筛选和排序的电子表格" 结果： 基础示例代码与

filtering.md

和

sorting.md

片段合并后的代码

Generate C# Code for the User's Project (default)

为用户项目生成C#代码（默认流程）

Trigger keywords: "how to", "add spreadsheet", "code sample", "show me", "example", "snippet", "integrate", "component", "create sample", "code", "sample code", "generate code", "implement", "add to project", "configure spreadsheet"

触发关键词： "如何"、"添加电子表格"、"代码示例"、"展示"、"示例"、"代码片段"、"集成"、"组件"、"创建示例"、"代码"、"示例代码"、"生成代码"、"实现"、"添加到项目"、"配置电子表格"

Step 1 - Analyze Request & Select Snippets

步骤1 - 分析需求并选择代码片段

Parse the user's intent and identify the requested features.
Always start with
```
references/basic-sample.md
```
as the base.
Map each requested feature to its corresponding
```
references/*.md
```
file.
If no feature keywords match, output only the basic sample.

解析用户的意图，识别所需功能。
始终以
```
references/basic-sample.md
```
作为基础模板。
将每个需求的功能映射到对应的
```
references/*.md
```
文件。
如果没有匹配的功能关键词，仅输出基础示例代码。

Step 2 - Consent & Destination Gate (MUST ASK FIRST - STOP HERE UNTIL USER RESPONDS)

步骤2 - 确认与存储位置选择（必须首先询问 - 等待用户回复后再继续）

Before generating or writing any files, ask the user:

I'm ready to generate your Syncfusion Blazor Spreadsheet sample.

Where should I place it?
1) Create a new Razor file in the skill's "output" folder (recommended for quick tryout)
2) Add/modify an existing file in your project (please provide full path; choose append or replace)
Or, say "Just show me the code" to get the snippet here without changing files.

Do not proceed until the user explicitly chooses an option or says "Just show me the code."
If the user declines file changes, only output the code in chat (no files created/modified).

For Option 2 only: Before generating code, check if the project has the prerequisites from

references/basic-sample.md

(Prerequisites and Setup Requirements section). If missing, ask user consent and add them.

在生成或写入任何文件之前，向用户询问：

我已准备好为您生成Syncfusion Blazor Spreadsheet示例代码。

请问要将代码保存到哪里？
1) 在技能的"output"文件夹中创建新的Razor文件（推荐用于快速试用）
2) 在您的项目中添加/修改现有文件（请提供完整路径；选择追加或替换）
或者，回复"仅展示代码"，将直接在此处显示代码片段，不修改任何文件。

在用户明确选择选项或回复"仅展示代码"之前，请勿继续操作。
如果用户拒绝修改文件，仅在聊天中输出代码（不创建/修改任何文件）。

仅针对选项2： 在生成代码之前，检查项目是否满足

references/basic-sample.md

中（前提条件与设置要求部分）的依赖项。如果缺少依赖项，需先征得用户同意再添加。

Step 3 - Generate Code (Dry-Run)

步骤3 - 生成代码（模拟运行）

Build the code in-memory by merging:

Base:
```
references/basic-sample.md
```
Merge matched feature snippets into its anchors:
```
PROPERTY
```
,
```
EVENTS
```
,
```
BUTTON
```
,
```
API METHOD
```
Do not invent or modify any property, event, or API beyond what the reference files contain

通过合并以下内容在内存中构建代码：

基础模板：
```
references/basic-sample.md
```
将匹配的功能片段合并到对应的锚点位置（
```
PROPERTY
```
、
```
EVENTS
```
、
```
BUTTON
```
、
```
API METHOD
```
）
不得自行添加或修改任何未在参考文件中出现的属性、事件或API

Step 4 - Apply Changes (Only After Consent)

步骤4 - 执行修改（仅在获得同意后）

Option A - Create new file in skill's folder:

Create a
```
output/
```
folder at the skill's root and place the file there
Default file name:
```
SpreadsheetSample.razor
```
(configurable via user reply)

If the file already exists, ask:

A file named "SpreadsheetSample.razor" already exists. Overwrite, append, or use a different name?

Stop and wait for the user's decision before proceeding.

Write the generated Razor/C# content.

Option B - Add to user's project file:

Ask the user for the full path of the target file and whether to append or replace

If the path does not exist, ask:

I can create this file. Proceed with creation?

If replacing, make a backup copy (e.g.,
```
.bak
```
) before writing (if the environment supports it)
Apply the change per the user's instruction.

选项A - 在技能文件夹中创建新文件：

在技能根目录创建
```
output/
```
文件夹，并将文件存入其中
默认文件名：
```
SpreadsheetSample.razor
```
（可根据用户回复修改）

如果文件已存在，询问用户：

已存在名为"SpreadsheetSample.razor"的文件。是否覆盖、追加或使用其他名称？

等待用户决定后再继续操作。

写入生成的Razor/C#代码内容。

选项B - 添加到用户项目文件中：

向用户询问目标文件的完整路径以及选择追加还是替换

如果路径不存在，询问：

我可以创建该文件。是否继续创建？

如果选择替换，在写入前创建备份文件（例如：
```
.bak
```
，如果环境支持）
根据用户的指示执行修改。

Step 5 - Report Outcome

步骤5 - 反馈结果

Done
- Location: {path}
- Action: {created|overwritten|appended}
- Notes: {any warnings or unsupported features}

If file operations were skipped, confirm that the code was only displayed in chat.

操作完成
- 位置：{路径}
- 操作：{创建|覆盖|追加}
- 说明：{任何警告或不支持的功能}

如果跳过了文件操作，请确认仅在聊天中展示了代码。

Code References

代码参考

All templates and feature snippets live in

references/*.md

. Each file is a focused snippet the agent combines when generating samples.

Flow: Always start with

references/basic-sample.md

, then merge matched feature snippets into its anchors (

PROPERTY

EVENTS

BUTTON

API METHOD

). If no feature keywords match, return only the basic sample.

Supported Features: Editing, Filtering, Sorting, Cell merging, Insert row/column, Hyperlink, Clipboard actions, Cell formatting, open and save, selection

File	Purpose
basic-sample.md	Minimal Spreadsheet sample with `byte[]` DataSource and Ribbon
open-save.md	Open ( `byte[]` , local JSON, remote JSON URL, Google Drive) and Save via Ribbon
worksheet.md	Worksheet insert, delete, move, and duplicate
cell-range.md	Autofill & range actions
merge.md	Merge cells, unmerge cells
editing.md	Bind editing events, UpdateCell, set formula
formula.md	Formula bar toggle
formatting.md	Number formats and cell formatting
contextmenu.md	Toggle context menu
rows-columns.md	Insert rows/columns, resizing rows/columns
filtering.md	Column filtering
sorting.md	Multi-column sorting
hyperlink.md	Hyperlink add and remove
clipboard.md	Cut, Copy, Paste
selection.md	Cell and range selection
undo-redo.md	Undo and redo actions
protection.md	Sheet and workbook protection and unprotection
custom-data.md	Create a custom data spreadsheet using XlsIO
common.md	Height, Width, ID, CssClass, ActiveSheetIndex, Image

所有模板和功能片段都存储在

references/*.md

中。代理会在生成示例时将这些专注于单一功能的片段组合起来。

流程： 始终以

references/basic-sample.md

为起点，然后将匹配的功能片段合并到其锚点位置（

PROPERTY

、

EVENTS

、

BUTTON

、

API METHOD

）。如果没有匹配的功能关键词，仅返回基础示例。

支持的功能： 编辑、筛选、排序、单元格合并、插入行/列、超链接、剪贴板操作、单元格格式化、打开和保存、选择

文件	用途
basic-sample.md	包含 `byte[]` 数据源和功能区的最简Spreadsheet示例
open-save.md	通过功能区实现打开（ `byte[]` 、本地JSON、远程JSON URL、Google Drive）和保存功能
worksheet.md	工作表的插入、删除、移动和复制
cell-range.md	自动填充与区域操作
merge.md	单元格合并、取消合并
editing.md	绑定编辑事件、UpdateCell方法、设置公式
formula.md	公式栏显示/隐藏切换
formatting.md	数字格式与单元格格式化
contextmenu.md	上下文菜单显示/隐藏切换
rows-columns.md	插入行/列、调整行/列大小
filtering.md	列筛选
sorting.md	多列排序
hyperlink.md	超链接的添加与移除
clipboard.md	剪切、复制、粘贴
selection.md	单元格和区域选择
undo-redo.md	撤销和重做操作
protection.md	工作表和工作簿的保护与取消保护
custom-data.md	使用XlsIO创建自定义数据电子表格
common.md	高度、宽度、ID、CssClass、ActiveSheetIndex、图片

Rules

规则

Use Only Reference Snippets
- Generate code exclusively from the Markdown files under
```
references/
```
- Do not invent/guess/include any properties, events, API methods, component names, or parameters not present in
```
references/*.md
```
UI interaction feature
- The following features support only UI interaction and have no customization options (no methods, events, or properties):
- Gridlines - Toggle visibility through UI only
- Clear - Clear content through UI context menu only
- Named Ranges - Create and manage through UI only
- Protection - Protect/unprotect sheets through UI only
- Undo/Redo - Undo and redo actions through UI only
- Images - Image insert, resize and move actions through UI only
- Do not generate methods, events, or properties for these features
- Only add these features if they are explicitly mentioned in
```
references/*.md
```
  files
- If a user requests customization for these features, inform them:
```
This feature supports only UI interaction and does not have programmatic customization options in the Blazor Spreadsheet component.
```
Unsupported Feature Handling
- If the user requests a feature with no corresponding snippet in
```
references/*.md
```
  , respond with:
```
That feature is not currently supported by the Syncfusion Blazor Spreadsheet component.
```
- Suggest the closest supported features only if they have snippets
- Explicitly list unsupported items and do not synthesize code for them
Validation Before Write
- Re-validate before writing that all code blocks originate from
```
references/*.md
```
  files
- If validation fails, stop and inform the user
Transparency
- Include a Supported vs. Unsupported summary in the final report when applicable

仅使用参考片段
- 代码生成必须完全基于
```
references/
```
  下的Markdown文件
- 不得自行添加/猜测/包含任何未在
```
references/*.md
```
  中出现的属性、事件、API方法、组件名称或参数
UI交互功能限制
- 以下功能仅支持UI交互，无自定义配置选项（无对应的方法、事件或属性）：
- 网格线 - 仅可通过UI切换可见性
- 清除 - 仅可通过UI上下文菜单清除内容
- 命名区域 - 仅可通过UI创建和管理
- 保护 - 仅可通过UI对工作表进行保护/取消保护
- 撤销/重做 - 仅可通过UI执行撤销和重做操作
- 图片 - 仅可通过UI执行图片插入、调整大小和移动操作
- 不得为这些功能生成对应的方法、事件或属性代码
- 仅当
```
references/*.md
```
  文件中有明确说明时，才添加这些功能
- 如果用户请求对这些功能进行自定义，告知用户：
```
该功能仅支持UI交互，Blazor Spreadsheet组件不提供程序化自定义选项。
```
不支持功能的处理
- 如果用户请求的功能在
```
references/*.md
```
  中无对应片段，回复：
```
Syncfusion Blazor Spreadsheet组件目前不支持该功能。
```
- 仅当存在对应片段时，才推荐最接近的支持功能
- 必须明确列出不支持的功能，不得合成相关代码
写入前验证
- 在写入文件前，重新验证所有代码块均来自
```
references/*.md
```
  文件
- 如果验证失败，立即停止操作并告知用户
透明度
- 适用时，在最终报告中包含支持与不支持功能的总结