用途
Syncfusion ASP.NET Core DropdownList 是 Syncfusion ASP.NET Core UI 组件库中的一个单项选择控件,用于在 ASP.NET Core 应用中显示一组预定义值,并允许用户从中选择一项。该技能文档旨在指导开发者快速实现该组件,覆盖从安装配置到高级场景的完整流程。
主要能力
- 数据绑定:支持本地数组(字符串、数字)、复杂 JSON 对象、嵌套数据结构,以及通过 DataManager 绑定远程数据(OData、Web API)。
- 字段映射:通过 Fields 设置 text、value、groupBy、iconCss 等字段。
- 筛选:启用搜索框进行实时筛选,支持 StartsWith、Contains、EndsWith 等筛选算法,可配置大小写不敏感。
- 分组:按字段自动分组,支持自定义分组标题和排序方向(升序/降序),以及虚拟分组以提升性能。
- 模板:支持自定义项模板(ItemTemplate)、选中值模板(ValueTemplate)、页眉页脚模板和分组标题模板。
- 无障碍:符合 WCAG 2.1 Level AA,支持键盘导航(方向键、Enter、Tab)、ARIA 属性、屏幕阅读器、焦点管理、禁用状态和 RTL 语言支持。
- 高级功能:级联下拉(依赖父级选择)、多选下拉模式、大数据集虚拟滚动、搜索与自动完成、异步数据加载、错误处理与空状态、性能优化。
使用方式
- 安装与配置:通过 NuGet 安装包,注册并配置 TagHelper,导入 CSS 主题。
- 基本实现:在视图中使用
@Html.EJ2().DropDownList()链式调用配置 Id、DataSource、Placeholder 等属性并调用 Render()。 - 事件处理:通过 Change 事件绑定 JavaScript 函数,获取选中项的 value 和 text。
- 数据绑定:在控制器中准备数据(如 List<Category>),通过 ViewBag 传递到视图,或使用 DataSource(d => d.Url("/api/products")) 绑定远程 API。
- 级联下拉:第一个下拉的 Change 事件中通过 fetch 请求子级数据,更新第二个下拉的 dataSource。
- 筛选:设置 AllowFiltering(true) 和 FilterType(FilterType.Contains) 启用搜索。
适用场景
- 表单中的分类、状态或类型选择字段。
- 级联选择(如国家/城市)。
- 大数据量列表的可搜索下拉。
- 按类别分组的项目选择。
- 根据用户操作从 API 或数据库动态加载数据。
- 需要在项中显示图标、图片或徽章的富内容模板。
限制
资料未提供该组件的收费、价格、平台兼容性、性能指标或具体版本要求等信息,暂未提供。