SuperAPI AI 工具集

syncfusion-aspnetcore-form-builder

前端与建站

查看项目

更新于 10-29 00:05

技能介绍

Syncfusion ASP.NET Core Form Builder 是一个可视化表单设计器,用户可将字段拖到画布上,在属性面板中配置,预览效果,并导出 schema 供 Form Renderer 使用。该技能(skill)用于指导开发者创建、排错或扩展这类可编辑表单,适用于需要搭建带工具箱、画布、属性面板、代码视图和预览的设计器的场景。

用途

该技能的典型使用场景包括:创建并安装 Syncfusion 相关的 ASP.NET Core(Razor Pages)项目和 NuGet 包;渲染可视化表单设计器界面;通过 schema 属性加载初始表单;在属性面板中定义字段、排布布局并设置表单级选项;配置 Form Builder 的导出、预览、持久化、RTL、模式、模板和工具箱条目;从 Basic、Advanced、Layout 分类中选取字段;定制字段属性、增加或隐藏属性面板项并刷新设计器;定义自定义工具箱模板并用 setFieldValue 同步模板值;处理字段拖拽开始、拖拽经过、放置和属性变更事件;查看、复制、导入或导出生成的 JSON schema;以及准备包含校验、条件、表达式、联动下拉、动态范围、远程数据或 Data Grid 字段的 schema。

该技能聚焦于表单的设计与编辑环节;当主要任务是向终端用户渲染已完成 schema、处理提交值或配置渲染器表单动作时,应改用 ASP.NET Core Form Renderer 相关技能。

主要能力

  • 组件 API 与事件:包括 Form Builder 的全部属性、类型与默认值,Simple 与 Developer 两种模式,schema、export、preview、persistence、RTL、templates 和 toolbox 配置,以及拖拽开始、拖拽经过、放置和属性变更事件的参数数据。
  • 入门配置:ASP.NET Core 项目搭建、NuGet 包、tag helper、脚本和主题资源,基础用法与最小可运行示例,以及将表单 schema 绑定到组件。
  • schema 与初始表单:schema 属性与根结构,properties 中的字段定义与 layout 中的渲染顺序,表单设置、支持的控件与布局容器,并将每个所需字段匹配到文档记录的控件和类型。
  • 扩展行为:按需配置校验规则、条件行为、计算值、联动下拉、动态数值/日期/时间边界、远程下拉与多选/复选组数据源,以及 Data Grid 字段与数据源。
  • 字段组件面板:Fields 与 Templates 标签、Basic/Advanced/Layout 分类、搜索过滤行为、工具箱定制、自定义模板库与 formTemplates。
  • 属性面板:选中字段时面板的显示逻辑,Display、Validation、Conditions、Layout、Data 标签页,setProperty 与 getProperty 用法,自动保存与属性刷新行为。
  • 预览与 JSON:预览标签页工作流,通过 enablePreview 禁用预览,JSON schema 的查看与复制。
  • 模板:用 e-form-builder-toolbox-item 定义自定义工具箱模板,导出时使用 templateId,将第三方组件映射到 schema。
  • 表单设置:全局表单标题与宽度,Hide Label、Size、Float Label Type 等布局级设置,以及在不影响单个字段的前提下应用表单级配置。
  • 导出与导入:导出 schema 以便 Form Renderer 复用,将已有 schema 导回 Form Builder,通过 allowExport 禁用导出。

使用方式

先安装包:

dotnet add package Syncfusion.AspNetCore.FormBuilder dotnet add package Syncfusion.AspNetCore.Themes

再添加 tag helper 并绑定初始 schema:

@addTagHelper *, Syncfusion.AspNetCore.FormBuilder @addTagHelper *, Syncfusion.AspNetCore.Base

<ejs-form-builder id="form-builder-control" schema="Model.FormSchema"> </ejs-form-builder>

运行 ASP.NET Core 应用后,即可通过工具箱和属性面板编辑表单。项目搭建、NuGet 包、布局资源、tag helper 与完整初始配置可参考入门文档。

文档中的常见做法包括:用 toolboxCategories 控制工具箱中出现的字段类型及其分组;用 setProperty 为控件动态添加自定义属性并调用 refresh() 刷新面板;用 e-form-builder-toolbox-item 注册第三方自定义控件并同步其值。所有字段应放在 properties 中,并在 layout 中通过 propertyId 引用;每个字段需要稳定且唯一的 name 与 id,供条件、表达式和联动数据引用;在预览中验证布局与交互后,再查看 JSON 标签页并导出 schema。

适用场景

适合使用 Syncfusion Form Builder 在 ASP.NET Core 应用中搭建可视化表单设计器,例如需要在设计期拖放字段、配置属性、预览并输出可复用 JSON schema 的场景。构建或修复表单时,应确认 Form Builder 与 Themes 包已安装、schema 为对象/JSON 字符串/受支持的 schema 实例、字段具有唯一名称与稳定 id 及受支持控件和类型、layout 节点引用有效 propertyId、布局容器位于 layout 而子字段位于 properties,并按文档形状使用校验、条件、表达式、范围与数据源;自定义模板需使用 e-form-builder-toolbox-item 与匹配的模板标识,且 tag helper、静态资源与 <ejs-scripts> 管理器已注册。

限制

资料主要描述表单设计与编辑能力,未提供具体收费、价格、平台兼容性、性能效果或终端渲染细节;这些信息暂未提供。若任务核心是渲染已完成 schema 并处理提交,应参考 Renderer 相关文档。