Syncfusion Blazor 是一套面向 .NET Blazor 应用的 UI 组件库,主要提供 DataGrid、图表(Charts)、日程排程(Scheduler)、PDF 查看器(PDF Viewer)以及 80 多个组件。以下内容依据所提供资料整理。
用途
用于在 Blazor 应用中构建数据表格、图表、日程排程、富文本编辑、PDF 查看与输入、导航等界面功能。资料提供的组件包包括:Syncfusion.Blazor.Themes、Syncfusion.Blazor.Core,以及按需安装的 Grid、Charts、Schedule、RichTextEditor、PdfViewer、Inputs、Navigations。
主要能力
DataGrid(SfGrid):支持分页(AllowPaging)、排序(AllowSorting)、筛选(AllowFiltering)、分组(AllowGrouping)、工具栏操作(Add、Edit、Delete、Search、ExcelExport)、编辑设置(GridEditSettings,模式如 EditMode.Dialog)、分页设置(PageSize、PageSizes)、筛选类型(FilterType.Excel)、多选(SelectionType.Multiple),并可定义列(GridColumn)与模板(Template),例如用 SfChip 展示状态。
服务器端数据操作:通过 SfDataManager 指定 Url 与 Adaptor(如 Adaptors.WebApiAdaptor)对接接口。
图表:SfChart,可配置主 X 轴(ChartPrimaryXAxis)、主 Y 轴(ChartPrimaryYAxis)、多序列(ChartSeriesCollection,如 Column、Line 类型)、提示(ChartTooltipSettings)、图例(ChartLegendSettings)。
日程排程:SfSchedule,可选视图 Day、Week、Month、Agenda,通过 ScheduleEventSettings 绑定数据源,并提供事件回调(如 OnActionComplete)。
Essential UI Kit Blocks:提供预置布局区块,包括网格布局、登录页、仪表盘、价格表、个人资料卡、电商、CRM 等类别。
主题:内置 bootstrap5、material3、fluent2、tailwind、fabric、highcontrast,也可通过 ThemeStudio 自定义主题。
使用方式
安装组件包(示例): dotnet add package Syncfusion.Blazor.Themes dotnet add package Syncfusion.Blazor.Core dotnet add package Syncfusion.Blazor.Grid dotnet add package Syncfusion.Blazor.Charts dotnet add package Syncfusion.Blazor.Schedule dotnet add package Syncfusion.Blazor.RichTextEditor dotnet add package Syncfusion.Blazor.PdfViewer dotnet add package Syncfusion.Blazor.Inputs dotnet add package Syncfusion.Blazor.Navigations
在 Program.cs 中注册许可证与服务: Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense( builder.Configuration["Syncfusion:LicenseKey"]); builder.Services.AddSyncfusionBlazor();
在 _Imports.razor 中引入命名空间: @using Syncfusion.Blazor @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Charts
在 App.razor 中引用主题: <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
许可证密钥管理:资料强调不要硬编码,可采用 User Secrets(dotnet user-secrets set "Syncfusion:LicenseKey" "your-key")、环境变量(Environment.GetEnvironmentVariable("SYNCFUSION_LICENSE_KEY"))或 Azure Key Vault(builder.Configuration.AddAzureKeyVault(vaultUri, credential))。
适用场景
适用于 Blazor 应用中的业务数据表格与编辑、报表图表、排程管理、富文本与 PDF 处理、导航与输入控件等 UI 需求;也适用于复用 Essential UI Kit 中的预置页面区块快速搭建界面。
限制
资料未提供该组件库的收费与价格信息,也未说明具体的授权条款内容。资料未给出除示例以外的完整组件清单与 API 细节。许可证密钥需要自行获取与配置,资料未说明如何获取密钥。
AI 辅助工具
资料介绍了两个配套工具。其一是 Syncfusion Agentic UI Builder,资料称其为免费的 AI 工具,可从自然语言提示生成完整 Blazor UI 实现,同时支持 React、Angular;据资料称没有使用限制、token 上限或费用。使用方式为在 IDE 中使用 #sf_blazor_ui_builder 工具命令,或在提示中包含 "Syncfusion" 关键字;推荐模型为 Claude Sonnet 4.6+、GPT-5、Gemini 3 Pro;支持 VS Code、Cursor、JetBrains IDEs、Code Studio。资料称其代码与 Syncfusion 文档及 1600 多个组件 API 对齐,相比手动开发有 30-50% 效率提升,且不访问项目文件、不存储提示。
其二是官方的 @syncfusion/blazor-assistant MCP 服务器,提供从自然语言生成组件代码、访问 80 多个 Blazor 组件文档、故障排查与配置指导、主题与样式帮助。配置示例(.mcp.json): { "syncfusion-blazor": { "command": "npx", "args": ["-y", "@syncfusion/blazor-assistant@latest"], "env": { "SYNCFUSION_API_KEY": "${SYNCFUSION_API_KEY}" } } } 可在生成组件代码、查询组件 API 与属性、排查 Syncfusion 相关问题、获取主题与样式指导时使用 mcp__syncfusion-blazor__* 工具。
文档与知识库
资料列出了 Blazor 介绍、Blazor API 参考、ASP.NET Core JS2 API、Blazor MCP 服务器文档等参考链接,以及涵盖富文本编辑器、ListBox、DropDownList、图表、Maps、HeatMap、PDF 等主题的知识库文章链接。