syncfusion-aspnetcore-dropdowns

实现 Syncfusion ASP.NET Core 下拉列表

DropDownList

DropDownList（<ejs-dropdownlist>）是一种单选控件，用于显示预定义值列表。它支持本地和远程数据绑定、实时筛选、分组、自定义模板、虚拟滚动、弹出窗口调整大小、本地化，以及完整的 WCAG 2.2 AA 无障碍支持。

组件概览

Tag Helper： <ejs-dropdownlist>
命名空间： Syncfusion.EJ2.DropDowns
NuGet： Syncfusion.EJ2.AspNet.Core

主要功能：

• 从本地数组和远程来源绑定数据（OData V4、Web API、URL Adaptor）
• 为基元类型和复杂对象绑定值（allowObjectBinding）
• 使用搜索框实时筛选（allowFiltering、filterType、debounceDelay）
• 使用 fields.groupBy 对项目分组
• 使用 fields.disabled 禁用项目
• 可自定义的模板：itemTemplate、valueTemplate、headerTemplate、footerTemplate、groupTemplate、noRecordsTemplate、actionFailureTemplate
• 为大型数据集提供虚拟滚动（enableVirtualization）
• 用户可调整弹出窗口大小（allowResize）
• 符合 WCAG 2.2 AA 标准，支持键盘导航和 ARIA
• RTL 渲染（enableRtl）
• 本地化（locale）
• 浮动标签支持（floatLabelType）
• 状态持久化（enablePersistence）
• 清除按钮（showClearButton）

API 参考

📄 完整 API： references/api.md

• 所有属性及其类型、默认值和说明
• 所有事件
• 字段设置（<e-dropdownlist-fields>）
• 所有功能的 Tag Helper 语法示例

文档与导航指南

入门

📄 阅读： references/getting-started.md

• 安装 NuGet 包
• 注册 TagHelper（_ViewImports.cshtml）
• ⚠️ CDN 与本地托管： 有关 SRI 和本地托管替代方案，请参阅下方的安全与信任边界
• 注册 Script Manager
• 基本的 DropDownList Tag Helper 用法
• 配置弹出窗口的高度和宽度
• 处理更改事件

数据绑定和值绑定

📄 阅读： references/data-binding.md

• 绑定基元数据数组（字符串、数字）
• 使用 <e-dropdownlist-fields> 绑定复杂 JSON 对象
• 使用点表示法字段路径处理嵌套/复杂数据
• 基元类型的值绑定（预选值）
• 使用 allowObjectBinding 绑定对象
• 远程数据：OData V4、OData、Web API、URL Adaptor
• 离线模式（DataManager offline="true"）
• actionBegin、actionComplete、actionFailure 事件

筛选与分组

📄 阅读： references/filtering-grouping.md

• 使用 allowFiltering 启用筛选
• 筛选类型：StartsWith、Contains、EndsWith
• 远程请求前的最小字符数限制
• 使用 ignoreCase 进行区分大小写的筛选
• 使用 ignoreAccent 进行变音符号筛选
• 使用 debounceDelay 设置防抖延迟
• 使用 filterBarPlaceholder 设置筛选栏占位文本
• 使用 fields.groupBy 分组
• 使用 groupTemplate 自定义分组标题
• 使用 fields.disabled 禁用项目
• 排序顺序：None、Ascending、Descending

模板与样式

📄 阅读： references/templates-styling.md

• itemTemplate — 自定义弹出列表项
• valueTemplate — 自定义输入框中的选中值
• headerTemplate — 弹出窗口中的静态标题
• footerTemplate — 弹出窗口中的静态页脚
• groupTemplate — 自定义分组标题
• noRecordsTemplate — 无数据状态
• actionFailureTemplate — 远程获取失败状态
• floatLabelType — 浮动标签行为
• cssClass — 自定义 CSS 类
• 用于自定义外观的 CSS 结构

无障碍与本地化

📄 阅读： references/accessibility-features.md

• 符合 WCAG 2.2 AA 级标准
• WAI-ARIA 属性（aria-haspopup、aria-expanded、aria-selected 等）
• 完整的键盘导航快捷键参考
• 通过 enableRtl 支持 RTL
• 通过 locale 和 L10n.load() 实现本地化
• 只读与禁用状态
• 使用 enablePersistence 持久化状态
• 使用 isDeviceFullScreen 控制移动端弹出窗口行为

高级场景

📄 阅读： references/advanced-scenarios.md

• 使用 enableVirtualization 实现虚拟滚动（本地和远程）
• 分组和筛选时的虚拟化
• 自定义虚拟化中的项目数量
• 使用 allowResize、resizeStart、resizeStop、resizing 事件调整弹出窗口大小
• 级联下拉列表（父子依赖选择）
• 筛选远程数据
• 预选值（按 value、text 或 index）
• showClearButton 的用法
• 使用 htmlAttributes 设置额外的 HTML 属性
• 所有事件的用法示例参考

快速入门示例

控制器（HomeController.cs）：

public IActionResult Index()
{
    ViewBag.data = new List<object>
    {
        new { Id = 1, Name = "Electronics" },
        new { Id = 2, Name = "Furniture" },
        new { Id = 3, Name = "Clothing" }
    };
    return View();
}

视图（Index.cshtml）：

<ejs-dropdownlist id="category"
    dataSource="@ViewBag.data"
    placeholder="Select category"
    change="onCategoryChange">
    <e-dropdownlist-fields text="Name" value="Id"></e-dropdownlist-fields>
</ejs-dropdownlist>

<script>
function onCategoryChange(args) {
    console.log('Selected ID:', args.value);
}
</script>

常见模式

模式 1：带事件处理的基本选择

<ejs-dropdownlist id="category"
    dataSource="@ViewBag.Categories"
    placeholder="Select category"
    change="onCategoryChange">
    <e-dropdownlist-fields text="Name" value="Id"></e-dropdownlist-fields>
</ejs-dropdownlist>

<script>
function onCategoryChange(args) {
    console.log('Selected ID:', args.value);
}
</script>

模式 2：级联下拉列表（安全的服务器端代理）

⚠️ 安全说明： 避免在客户端直接请求不受信任的外部端点。请使用服务器端代理验证、认证并清理响应。

控制器（服务器端代理）：

public IActionResult Index()
{
    ViewBag.Countries = new List<Country>
    {
        new Country { Id = 1, Name = "USA" },
        new Country { Id = 2, Name = "Canada" }
    };
    return View();
}

// ✅ SECURE: Server-side proxy validates countryId and returns only whitelisted data
[HttpGet("api/cities/{countryId}")]
public IActionResult GetCities(int countryId)
{
    // Validate countryId is within acceptable range
    if (countryId <= 0 || countryId > 100)
        return BadRequest("Invalid country ID");
    
    var cities = new List<City>
    {
        new City { Id = 1, Name = "New York",  CountryId = 1 },
        new City { Id = 2, Name = "Toronto",   CountryId = 2 }
    };
    
    // Return only safe, schema-validated data
    return Json(cities.Where(c => c.CountryId == countryId)
        .Select(c => new { c.Id, c.Name })
        .ToList());
}

视图（安全客户端）：

<ejs-dropdownlist id="Country"
    dataSource="@ViewBag.Countries"
    change="onCountryChange"
    placeholder="Select country">
    <e-dropdownlist-fields text="Name" value="Id"></e-dropdownlist-fields>
</ejs-dropdownlist>

<ejs-dropdownlist id="City" placeholder="Select city">
    <e-dropdownlist-fields text="Name" value="Id"></e-dropdownlist-fields>
</ejs-dropdownlist>

<script>
function onCountryChange(args) {
    var cityDDL = document.getElementById('City').ej2_instances[0];
    if (args.value) {
        // ✅ SECURE: Fetch only from same-origin API endpoint (same server)
        fetch("/api/cities/" + encodeURIComponent(args.value), {
            method: 'GET',
            headers: { 'Content-Type': 'application/json' },
            credentials: 'same-origin'  // Include CSRF tokens via cookies
        })
        .then(response => {
            if (!response.ok) throw new Error('Server error: ' + response.status);
            return response.json();
        })
        .then(data => {
            // Validate response is an array before binding
            if (Array.isArray(data)) {
                cityDDL.dataSource = data;
                cityDDL.value = null;
            } else {
                console.error('Invalid data format received');
                cityDDL.dataSource = [];
            }
        })
        .catch(error => {
            console.error('Failed to load cities:', error);
            cityDDL.dataSource = [];
        });
    } else {
        cityDDL.dataSource = [];
    }
}
</script>

模式 3：带筛选的远程数据（安全的同源代理）

⚠️ 安全说明： 避免使用 crossDomain="true"，也不要直接绑定到外部 OData/WebAPI 端点。始终通过自己的服务器代理，以便控制验证和访问。

<ejs-dropdownlist id="customers"
    allowFiltering="true"
    filtering="onfiltering"
    query="new ej.data.Query().from('api/customers').select(['ContactName', 'CustomerID']).take(6)"
    placeholder="Select a customer"
    popupHeight="200px">
    <e-dropdownlist-fields text="ContactName" value="CustomerID"></e-dropdownlist-fields>
    <e-data-manager url="/api/customers"
                    adaptor="UrlAdaptor">  
    </e-data-manager>
</ejs-dropdownlist>

<script>
function onfiltering(e) {
    var ddl = document.getElementById("customers").ej2_instances[0];
    var query = new ej.data.Query().from('api/customers').select(['ContactName', 'CustomerID']).take(6);
    query = e.text !== '' ? query.where('ContactName', 'startswith', e.text, true) : query;
    e.updateData(ddl.dataSource, query);
}
</script>

控制器（服务器端代理）：

// ✅ SECURE: Server validates, filters, and returns safe subset of data
[HttpGet("api/customers")]
public IActionResult GetCustomers([FromQuery] string skip = "0", [FromQuery] string take = "6", [FromQuery] string where = "")
{
    int skipVal = Math.Max(0, int.TryParse(skip, out var s) ? s : 0);
    int takeVal = Math.Min(50, int.TryParse(take, out var t) && t > 0 ? t : 6);
    
    // Example: fetch from secure internal data source
    var customers = _context.Customers
        .AsNoTracking()
        .Select(c => new { c.CustomerID, c.ContactName })
        .Skip(skipVal)
        .Take(takeVal)
        .ToList();
    
    return Ok(new { d = customers, count = customers.Count });
}

关键属性及适用场景

属性	特性	适用场景
DataSource	dataSource	始终需要，用于填充项目
Fields	<e-dropdownlist-fields>	绑定复杂 JSON 对象时
Value	value	预选项目时
Index	index	按位置预选时
AllowFiltering	allowFiltering	项目较多的列表
FilterType	filterType	自定义搜索匹配行为
DebounceDelay	debounceDelay	减少输入时的筛选频率
EnableVirtualization	enableVirtualization	数据集非常大时
AllowResize	allowResize	允许用户调整弹出窗口大小
ItemTemplate	itemTemplate	丰富的项目呈现
ValueTemplate	valueTemplate	自定义所选值的显示方式
GroupTemplate	groupTemplate	自定义分组标题
ShowClearButton	showClearButton	允许清除选择
Enabled	enabled	按条件启用或禁用
Readonly	readonly	仅显示模式
EnableRtl	enableRtl	支持 RTL 语言
Locale	locale	本地化文本

---

后续步骤

• 刚开始使用？ → 入门指南
• 要绑定服务器数据？ → 数据绑定
• 需要筛选或分组？ → 筛选与分组
• 要自定义外观？ → 模板与样式
• 需要无障碍支持或本地化？ → 无障碍与本地化
• 需要虚拟滚动、调整大小或级联？ → 高级场景
• 需要完整的 API 参考？ → API 参考

---

多选下拉列表

Syncfusion 多选下拉列表是一款功能强大的组件，可从预定义列表中选择多个值。它支持复选框选择、筛选、分组、模板、虚拟滚动和丰富的数据绑定，所有功能均使用 ASP.NET Core TagHelper 语法。

导航指南

入门

📄 阅读： references/getting-started.md

• 安装 NuGet 包并设置 TagHelper
• CDN 样式表和脚本引用
• 配置基本选项并创建首个多选下拉列表
• 配置弹出窗口的高度和宽度
• 集成表单并使用 MultiSelectFor

数据绑定和值绑定

📄 阅读： references/data-binding.md

• 绑定字符串数组、对象和复杂数据
• 远程数据：OData、WebAPI、URL Adaptor、离线模式
• 字段映射（text、value、groupBy、iconCss、disabled）
• 基本类型值与对象值绑定（allowObjectBinding）
• 通过 value 属性预选值
• 使用 isSelected 字段通过数据源预选值

复选框和选择模式

📄 阅读： references/checkbox-and-selection.md

• 使用 CheckBoxSelection 模块启用复选框模式
• 使用 showSelectAll 全选／取消全选
• 自定义“全选”和“取消全选”文本
• 最大选择数量限制（maximumSelectionLength）
• 重新排列选择项（enableSelectionOrder）
• 显示模式：Default、Box、Delimiter、CheckBox
• closePopupOnSelect 行为
• 使用 hideSelectedItem 从列表中移除已选项
• 使用 changeOnBlur 控制事件触发时机

筛选

📄 阅读： references/filtering.md

• 使用 allowFiltering 启用筛选
• 筛选类型：StartsWith、Contains、EndsWith
• 远程获取数据前的最少字符数
• 区分大小写的筛选
• 忽略变音符号／重音符号的筛选（ignoreAccent）
• 防抖延迟（debounceDelay）
• 通过 filtering 事件自定义筛选逻辑

模板和自定义

📄 阅读： references/templates-and-customization.md

• 使用项目模板自定义列表项布局
• 使用值模板显示已选标签
• 使用分组模板显示类别标题
• 页眉和页脚模板
• 无记录模板和操作失败模板
• 通过 tagging 事件和 setClass 自定义标签
• 自定义容器、标签、图标和弹出窗口的 CSS
• 通过 iconCss 字段支持图标

分组和虚拟化

📄 阅读： references/grouping-and-virtualization.md

• 使用 groupBy 字段对项目分组
• 使用复选框进行分组（enableGroupCheckBox）
• 对大型数据集启用虚拟滚动（enableVirtualization）
• 对远程数据、分组、筛选和复选框启用虚拟化
• 使用虚拟化时预选值
• 自定义虚拟化中的项目数量

高级功能

📄 阅读： references/advanced-features.md

• 输入自定义值（allowCustomValue）
• 通过 fields.disabled 禁用项目
• 使用 disableItem 方法动态禁用项目
• 调整弹出窗口大小（allowResize）
• 本地化（locale、L10n 翻译）
• 无障碍支持（WCAG 2.2、键盘导航、ARIA）
• 排序（sortOrder）
• 从右向左显示（enableRtl）
• 状态持久化（enablePersistence）
• addTagOnBlur 行为
• openOnClick 配置

API 参考

📄 阅读： references/api.md

• 完整的属性参考，包含类型和默认值
• 所有事件及其说明
• FieldSettings 子属性
• TagHelper 属性命名约定

快速入门示例

@* _ViewImports.cshtml: @addTagHelper *, Syncfusion.EJ2 *@

@{
    var games = new List<object> {
        new { Id = 1, Game = "Football" },
        new { Id = 2, Game = "Basketball" },
        new { Id = 3, Game = "Cricket" },
        new { Id = 4, Game = "Tennis" }
    };
}

<ejs-multiselect id="games"
    dataSource="@games"
    placeholder="Select games"
    mode="Box">
    <e-multiselect-fields text="Game" value="Id"></e-multiselect-fields>
</ejs-multiselect>

常见模式

使用全选的复选框模式

<ejs-multiselect id="sports"
    dataSource="@ViewBag.Sports"
    placeholder="Select sports"
    mode="CheckBox"
    showSelectAll="true"
    selectAllText="Select All"
    unSelectAllText="Unselect All"
    filterBarPlaceholder="Search">
    <e-multiselect-fields text="Game" value="Id"></e-multiselect-fields>
</ejs-multiselect>

使用远程数据进行筛选

<ejs-multiselect id="customers"
    placeholder="Search customers"
    allowFiltering="true"
    filtering="onFiltering"
    popupHeight="250px">
    <e-data-manager url="url"
        adaptor="ODataV4Adaptor" crossDomain="true">
    </e-data-manager>
    <e-multiselect-fields text="ContactName" value="CustomerID"></e-multiselect-fields>
</ejs-multiselect>

大型数据集的虚拟滚动

<ejs-multiselect id="items"
    dataSource="@ViewBag.LargeDataset"
    enableVirtualization="true"
    allowFiltering="true"
    placeholder="Select items"
    popupHeight="200px">
    <e-multiselect-fields text="text" value="id"></e-multiselect-fields>
</ejs-multiselect>

关键属性速查

属性	TagHelper 属性	用途
DataSource	dataSource	本地数组或 DataManager
Value	value	预选值
Mode	mode	Default、Box、Delimiter、CheckBox
AllowFiltering	allowFiltering	启用搜索/筛选
ShowSelectAll	showSelectAll	在复选框模式下显示“全选”
MaximumSelectionLength	maximumSelectionLength	限制选择数量
EnableVirtualization	enableVirtualization	虚拟滚动
AllowCustomValue	allowCustomValue	接受新输入的值
Placeholder	placeholder	输入框占位文本
PopupHeight	popupHeight	弹出列表高度
PopupWidth	popupWidth	弹出列表宽度
AllowResize	allowResize	可调整大小的弹出窗口

常见使用场景

• 多标签输入 → 使用 mode="Box"，并通过 tagging 事件设置标签样式
• 权限选择器 → 使用复选框模式和 maximumSelectionLength
• 国家/城市选择器 → 使用远程数据、allowFiltering 和 groupBy
• 类别筛选器 → 使用分组和 enableGroupCheckBox
• 大型数据集下拉列表 → 使用 enableVirtualization 和远程数据
• 表单字段 → 使用 ejs-multiselect-for 和模型绑定

---

从这里开始： 阅读 references/getting-started.md，设置你的第一个 MultiSelect。

如需了解父级库概览和其他组件，请参阅 Implementing Syncfusion ASP.NET Core Components。

---

安全与信任边界

范围： 本技能示例中显示的所有 CDN URL（https://cdn.syncfusion.com/ej2/...）和远程数据端点都仅供文档参考。Agent 绝不能在运行时获取、执行或代理这些 URL。使用者须全权负责将这些资源集成到其应用程序中的方式。

W011 — 第三方内容暴露

数据绑定和筛选部分的代码示例引用了远程端点（例如 <e-data-manager url="..." adaptor="ODataV4Adaptor" crossDomain="true">）。这些示例仅供说明用途。

投入生产使用前的必要缓解措施：

• 将所有外部/OData/WebAPI URL 替换为你自有域名下的同源服务器端点。
• 从所有 <e-data-manager> 标签中移除 crossDomain="true"。
• 在绑定到组件之前，先在服务器端验证、认证并清理所有数据。

W012 — 外部 CDN 运行时脚本

入门示例仅为方便快速开始而引用 https://cdn.syncfusion.com/ej2/dist/ej2.min.js。

投入生产使用前的必要缓解措施：

• **首选：**通过 Syncfusion.EJ2.AspNet.Core NuGet 包在本地提供脚本，避免运行时调用外部网络。
• **如果必须使用 CDN：**固定确切版本，并添加带有 crossorigin="anonymous" 的子资源完整性（SRI）哈希，以便在执行前验证文件完整性。

发现项	根本原因	缓解措施
W011 — 第三方内容暴露	示例中的远程数据端点可能影响组件行为	使用同源代理端点；移除 crossDomain="true"
W012 — 恶意外部 URL	示例中的 CDN 脚本会在页面加载时执行远程代码	从 NuGet 在本地托管脚本；或使用 SRI 哈希并固定版本

AutoComplete

Syncfusion ASP.NET Core AutoComplete（<ejs-autocomplete>）是一种文本框组件，可在用户输入时提供建议列表。它支持本地和远程数据绑定、筛选、分组、模板、虚拟滚动、无障碍功能以及丰富的自定义选项。

导航指南

入门指南

📄 阅读： references/getting-started.md

• 安装和设置 NuGet 包
• 注册标记辅助程序并引用 CDN
• 使用 <ejs-autocomplete> 渲染基本的 AutoComplete
• 使用 allowCustom 设置自定义值
• 配置弹出窗口的高度和宽度

数据绑定

📄 阅读： references/data-binding.md

• 绑定字符串数组和对象数组
• 绑定复杂对象和嵌套对象数据
• 远程数据绑定（OData、OData V4、Web API、URL Adaptor）
• 使用 DataManager 进入离线模式
• 字段映射（value、groupBy、iconCss）

筛选

📄 阅读： references/filtering.md

• 筛选类型：StartsWith、EndsWith、Contains
• 使用 suggestionCount 限制建议数量
• 使用 minLength 设置最少字符数
• 使用 ignoreCase 设置区分大小写的筛选
• 使用 ignoreAccent 设置忽略变音符号的筛选
• 设置防抖延迟以降低筛选频率

分组

📄 阅读： references/grouping.md

• 使用 groupBy 字段按类别对列表项分组
• 行内和固定分组标题
• 使用 groupTemplate 自定义分组标题

模板

📄 阅读： references/templates.md

• 项目模板（itemTemplate），用于自定义列表项内容
• 分组模板（groupTemplate），用于分组标题
• 标题模板（headerTemplate），用于弹出窗口的静态标题
• 页脚模板（footerTemplate），用于弹出窗口的静态页脚
• 无记录模板（noRecordsTemplate）
• 操作失败模板（actionFailureTemplate）

值绑定

📄 阅读： references/value-binding.md

• 使用 value 绑定原始值（字符串、数字、布尔值）
• 使用 allowObjectBinding 绑定对象
• 预选值

虚拟滚动

📄 阅读： references/virtual-scroll.md

• 使用 enableVirtualization 启用虚拟化
• 对本地数据进行虚拟滚动
• 对远程数据进行虚拟滚动
• 自定义虚拟化中的项目数量
• 在虚拟化中使用分组

禁用项和组件状态

📄 阅读： references/disabled-items.md

• 使用 fields.disabled 禁用单个项目
• 动态使用 disableItem 方法
• 使用 enabled 禁用整个组件

本地化

📄 阅读： references/localization.md

• 本地化 noRecordsTemplate 和 actionFailureTemplate
• 使用 L10n 加载翻译
• 使用 locale 属性设置语言区域

弹出窗口调整大小

📄 阅读： references/resize.md

• 使用 allowResize 启用可调整大小的弹出窗口
• 在不同会话间保留调整后的大小

样式和 CSS 自定义

📄 阅读： references/style.md

• 自定义包装器、图标、焦点、占位符和文本选区
• 自定义弹出窗口项目的外观
• 自定义轮廓主题和浮动标签

无障碍

📄 阅读： references/accessibility.md

• WCAG 2.2、Section 508 和屏幕阅读器支持
• WAI-ARIA 属性和角色
• 完整的键盘导航快捷键

操作场景

📄 阅读： references/how-to.md

• 自动填充（使用 autofill 在输入时自动补全）
• 自定义搜索高亮（highlight 属性）
• 显示带图标的列表项（iconCss）
• 同时按文本字段和值字段筛选
• 使用模型绑定和数据注释的 AutoCompleteFor

API 参考

📄 阅读： references/api.md

• 所有属性、事件及其默认值的完整列表
• 属性：actionFailureTemplate、allowCustom、allowObjectBinding、allowResize、autofill、cssClass、dataSource、debounceDelay、enabled、enablePersistence、enableRtl、enableVirtualization、fields、filterType、floatLabelType、footerTemplate、groupTemplate、headerTemplate、highlight、htmlAttributes、ignoreAccent、ignoreCase、isDeviceFullScreen、itemTemplate、locale、minLength、noRecordsTemplate、placeholder、popupHeight、popupWidth、query、readonly、showClearButton、showPopupButton、sortOrder、suggestionCount、value、width、zIndex
• 事件：actionBegin、actionComplete、actionFailure、beforeOpen、blur、change、close、created、customValueSpecifier、dataBound、destroyed、filtering、focus、open、resizeStart、resizeStop、resizing、select

---

快速入门

基础自动完成（字符串数组）：

@{
    var sports = new string[] { "Badminton", "Basketball", "Cricket", "Football", "Golf", "Hockey", "Tennis" };
}

<ejs-autocomplete id="sports" dataSource="sports" placeholder="Select a sport">
</ejs-autocomplete>

使用对象数据源的自动完成：

@{
    List<Countries> countries = new List<Countries> {
        new Countries { Name = "India", Code = "IN" },
        new Countries { Name = "United States", Code = "US" },
        new Countries { Name = "Germany", Code = "DE" }
    };
}

<ejs-autocomplete id="country" dataSource="@countries" placeholder="Select a country">
    <e-autocomplete-fields value="Name"></e-autocomplete-fields>
</ejs-autocomplete>

模型类：

public class Countries {
    public string Name { get; set; }
    public string Code { get; set; }
}

---

常见模式

使用 OData 的远程数据

<ejs-autocomplete id="customers"
    query="new ej.data.Query().from('Customers').select(['ContactName'])"
    placeholder="Find a customer"
    filterType="StartsWith"
    popupHeight="200px">
    <e-autocomplete-fields value="ContactName"></e-autocomplete-fields>
    <e-data-manager url="url"
        adaptor="ODataV4Adaptor" crossDomain="true">
    </e-data-manager>
</ejs-autocomplete>

使用自定义筛选器的分组列表

<ejs-autocomplete id="vegetables"
    dataSource="@vegList"
    placeholder="Select a vegetable"
    filterType="StartsWith"
    suggestionCount="10"
    minLength="1">
    <e-autocomplete-fields value="Vegetable" groupBy="Category"></e-autocomplete-fields>
</ejs-autocomplete>

大型数据的虚拟滚动

<ejs-autocomplete id="records"
    dataSource="@data"
    placeholder="e.g. Item 1"
    enableVirtualization="true"
    popupHeight="200px">
    <e-autocomplete-fields value="Text"></e-autocomplete-fields>
</ejs-autocomplete>

---

关键属性速查

属性	类型	默认值	用途
dataSource	object	null	本地数组或 DataManager
fields	AutoCompleteFieldSettings	null	映射 value、groupBy、iconCss
filterType	FilterType	Contains	StartsWith / EndsWith / Contains
placeholder	string	null	输入提示文本
value	object	null	选中的值
allowCustom	bool	true	允许使用数据源中不存在的值
minLength	double	1	筛选前所需的最少字符数
suggestionCount	double	20	最多显示的建议项数
autofill	bool	false	在行内自动补全第一个匹配项
highlight	bool	false	高亮匹配的字符
enableVirtualization	bool	false	对大型列表启用虚拟滚动
allowResize	bool	false	允许调整弹出窗口大小
enabled	bool	true	启用/禁用组件

---

Mention

Syncfusion ASP.NET Core Mention（<ejs-mention>）是一个行内建议组件，会监听目标元素（contenteditable div 或 textarea），并在用户输入触发字符时显示建议弹出窗口（默认：@）。它支持本地和远程数据绑定、自定义模板、可配置的筛选、排序、禁用项以及完整的无障碍功能。

导航指南

入门

📄 阅读： references/getting-started.md

• 安装 NuGet 包并设置项目
• 注册标记帮助程序（@addTagHelper *, Syncfusion.EJ2）
• CDN 样式表和脚本引用
• 注册脚本管理器（<ejs-scripts>）
• 定义目标 contenteditable 元素
• 使用 <ejs-mention> 呈现基础 Mention
• 绑定字符串数组作为数据源
• 使用 showMentionChar 和 mentionChar 显示提及字符

数据绑定

📄 阅读： references/data-binding.md

• 绑定简单字符串数组
• 使用 <e-mention-fields> 绑定 JSON 对象数组
• 使用点号表示法字段映射绑定复杂/嵌套对象数据
• 使用 OData V4 适配器进行远程数据绑定
• 使用 Web API 适配器进行远程数据绑定
• 使用 <e-data-manager> 指定远程数据源
• 使用 query 属性自定义远程获取请求

筛选

📄 阅读： references/filtering.md

• 通过 filterType 设置筛选类型：StartsWith、EndsWith、Contains
• 使用 minLength 设置最小字符长度（默认值：0）
• 使用 allowSpaces 允许在搜索中输入空格
• 使用 suggestionCount 限制显示的建议数量
• 使用 ignoreCase 设置区分大小写的筛选
• 使用 debounceDelay 减少筛选调用
• 使用 filtering 事件进行自定义服务端筛选

模板

📄 阅读： references/templates.md

• itemTemplate — 自定义建议弹出窗口中的每个项目
• displayTemplate — 自定义选择后插入编辑器的内容
• noRecordsTemplate — 搜索没有匹配项目时显示的自定义消息
• spinnerTemplate — 远程数据的自定义加载指示器

自定义

📄 阅读： references/customization.md

• 使用 showMentionChar 显示或隐藏提及字符前缀
• 使用 mentionChar 更改触发字符（默认值：@）
• 使用 suffixText 在选择后追加后缀（空格、换行符）
• 使用 popupHeight 和 popupWidth 控制弹出窗口尺寸
• 设置是否需要前导空格：requireLeadingSpace
• 使用 cssClass 应用自定义 CSS 样式
• 使用 highlight 高亮匹配的字符

禁用项目

📄 阅读： references/disabled-items.md

• 通过 fields.disabled 数据源映射禁用单个项目
• 使用 disableItem 方法在运行时动态禁用项目
• 通过迭代禁用多个项目

排序

📄 阅读： references/sorting.md

• 使用 sortOrder 对建议列表排序（None、Ascending、Descending）
• 升序和降序排序示例

无障碍功能

📄 阅读： references/accessibility.md

• 符合 WCAG 2.2（AA）、Section 508 和屏幕阅读器规范
• WAI-ARIA 属性（aria-selected、aria-activedescendant、aria-owns）
• 完整的键盘导航（方向键、Escape、Enter、Tab）
• 无障碍目标元素设置提示

API 参考

📄 阅读： references/api.md

• 完整属性：allowSpaces、cssClass、dataSource、debounceDelay、displayTemplate、fields、filterType、highlight、htmlAttributes、ignoreCase、itemTemplate、locale、mentionChar、minLength、noRecordsTemplate、popupHeight、popupWidth、query、requireLeadingSpace、showMentionChar、sortOrder、spinnerTemplate、suffixText、suggestionCount、target
• MentionFieldSettings：text、value、groupBy、iconCss、disabled、htmlAttributes
• 所有事件：actionBegin、actionComplete、actionFailure、beforeOpen、change、closed、created、destroyed、filtering、opened、select

---

快速入门

使用字符串数组的最简 Mention：

@{
    var users = new string[] { "Adeline MacAdams", "Alba Torres", "Amy Fernandez", "Andrew Jack" };
}

<div id="mentionTarget" contenteditable="true"
     style="min-height: 100px; border: 1px solid #ccc; padding: 10px;">
    Type @ to mention someone
</div>

<ejs-mention id="mentionElement" target="#mentionTarget" dataSource="@users">
</ejs-mention>

使用对象数据和字段映射的 Mention：

<div id="mentionTarget" contenteditable="true"
     style="min-height: 100px; border: 1px solid #ccc; padding: 10px;">
</div>

<ejs-mention id="mentionElement" target="#mentionTarget" dataSource="@ViewBag.data">
    <e-mention-fields text="Name" value="EmailId"></e-mention-fields>
</ejs-mention>

控制器：

public IActionResult Index()
{
    ViewBag.data = new List<EmailData>
    {
        new EmailData { Name = "Adeline MacAdams", EmailId = "[email protected]" },
        new EmailData { Name = "Alba Torres", EmailId = "[email protected]" },
        new EmailData { Name = "Amy Fernandez", EmailId = "[email protected]" }
    };
    return View();
}

public class EmailData
{
    public string Name { get; set; }
    public string EmailId { get; set; }
}

---

常见模式

自定义触发字符（用于标签的 #）

<ejs-mention id="mentionElement" target="#mentionTarget"
    dataSource="@ViewBag.data"
    mentionChar="#"
    showMentionChar="true">
    <e-mention-fields text="TagName"></e-mention-fields>
</ejs-mention>

带后缀空格且无需前导空格的 Mention

<ejs-mention id="mentionElement" target="#mentionTarget"
    dataSource="@ViewBag.data"
    suffixText=" "
    requireLeadingSpace="false">
    <e-mention-fields text="Name"></e-mention-fields>
</ejs-mention>

使用筛选的远程数据

<ejs-mention id="mentionElement" target="#mentionTarget"
    minLength="2"
    filterType="StartsWith"
    suggestionCount="10">
    <e-mention-fields text="ContactName" value="CustomerID"></e-mention-fields>
    <e-data-manager url="url"
        adaptor="ODataV4Adaptor" crossDomain="true">
    </e-data-manager>
</ejs-mention>

自定义项目模板

<ejs-mention id="mentionElement" target="#mentionTarget"
    dataSource="@ViewBag.data"
    itemTemplate="<span><img src='${EmpImage}' class='avatar'/><b>${FirstName}</b> - ${Department}</span>">
    <e-mention-fields text="FirstName" value="FirstName"></e-mention-fields>
</ejs-mention>

处理选择事件

<ejs-mention id="mentionElement" target="#mentionTarget"
    dataSource="@ViewBag.data"
    select="onMentionSelect">
    <e-mention-fields text="Name" value="EmailId"></e-mention-fields>
</ejs-mention>

<script>
    function onMentionSelect(args) {
        console.log("Mentioned user:", args.itemData.Name);
        console.log("Email:", args.itemData.EmailId);
    }
</script>

---

关键属性速查

属性	类型	默认值	用途
target	string	null	可编辑目标元素的 CSS 选择器（必填）
dataSource	object	null	本地数组或 DataManager
fields	MentionFieldSettings	null	映射 text、value、groupBy、iconCss、disabled
mentionChar	char	'@'	触发建议弹出窗口的字符
showMentionChar	bool	false	在插入的文本前显示触发字符
suffixText	string	null	在插入的值后追加的文本（例如，" "）
requireLeadingSpace	bool	true	要求触发字符前有空格
filterType	FilterType	Contains	筛选匹配策略
minLength	int	0	启用搜索前所需的最少字符数
suggestionCount	int	25	建议列表中的最大项目数
allowSpaces	bool	false	允许搜索词中包含空格
sortOrder	SortOrder	None	建议列表的排序顺序
popupHeight	string	"300px"	建议弹出窗口的高度
popupWidth	string	"auto"	建议弹出窗口的宽度
highlight	bool	false	高亮显示建议中匹配的字符
ignoreCase	bool	true	不区分大小写的搜索
debounceDelay	double	300	执行筛选前的延迟时间（毫秒）

---

ComboBox

ComboBox（<ejs-combobox>）是一种文本框组件，允许用户从预定义列表中选择或输入值。它结合了文本框和下拉列表的功能，支持自定义值、筛选、分组、模板和无障碍访问。

组件概览

标签帮助器： <ejs-combobox>
命名空间： Syncfusion.EJ2.DropDowns
NuGet： Syncfusion.EJ2.AspNet.Core

主要功能：

• 用户定义的自定义值（allowCustom）
• 从本地数组和远程数据源绑定数据
• 支持搜索的实时筛选（allowFiltering、filterType）
• 使用 fields.groupBy 对项目分组
• 可自定义模板：itemTemplate、headerTemplate、footerTemplate、groupTemplate、noRecordsTemplate
• 面向大型数据集的虚拟滚动（enableVirtualization）
• 弹出窗口大小调整功能（allowResize）
• 符合 WCAG 2.2 无障碍访问标准
• 支持 RTL 渲染
• 支持浮动标签（floatLabelType）

文档与导航指南

入门指南

📄 阅读： references/combobox-getting-started.md

• 安装 NuGet 包
• 在 _ViewImports.cshtml 中注册 TagHelper
• 在 Program.cs 中注册服务
• ComboBox 基本实现
• 输入自定义值（allowCustom）
• 配置弹出窗口的高度和宽度

数据绑定

📄 阅读： references/combobox-data-binding.md

• 字符串数组和对象数组
• 复杂/嵌套对象数据绑定
• 使用 DataManager 绑定远程数据（OData、Web API、URL Adaptor）
• 字段映射（text、value、iconCss、groupBy、disabled）
• 预选值

筛选与搜索

📄 阅读： references/combobox-filtering-and-search.md

• 使用 allowFiltering 启用筛选
• 筛选类型：StartsWith、EndsWith、Contains
• 最少字符数阈值（minLength）
• 使用 ignoreCase 进行区分大小写的筛选
• 使用 ignoreAccent 进行变音符号筛选
• 用于提升性能的防抖延迟
• 无结果处理

分组与排序

📄 阅读： references/combobox-grouping-and-sorting.md

• 使用 fields.groupBy 对项目分组
• 分组标题模板
• 排序选项：升序、降序、不排序
• 动态分组和排序
• 多级分组模式

模板和自定义

📄 阅读： references/combobox-templates-and-customization.md

• 用于自定义列表项布局的项模板
• 页眉和页脚模板
• 无记录模板
• CSS 自定义和样式设置
• 浮动标签自定义

API 参考

📄 阅读： references/combobox-api.md

• 完整的属性参考
• 所有方法及其参数
• 所有事件及其说明

高级功能

📄 阅读： references/combobox-advanced-features.md

• 面向大型数据集的虚拟滚动（enableVirtualization）
• 国际化和本地化支持
• RTL（从右到左）布局支持
• 符合 WCAG 2.2 无障碍标准
• 键盘导航快捷键
• 浮动标签类型（Never、Always、Auto）

弹出窗口调整大小

📄 阅读： references/combobox-popup-resizing.md

• 使用 popupHeight 配置弹出窗口高度
• 使用 popupWidth 配置弹出窗口宽度
• 动态调整弹出窗口大小
• 基于百分比和像素的尺寸
• 自适应弹出窗口行为

样式和主题

📄 阅读： references/combobox-styling-and-theming.md

• 内置主题颜色和自定义
• ComboBox 的 CSS 自定义
• 应用自定义类
• 字体样式和颜色
• 基于状态的样式（悬停、焦点、禁用）

操作指南

📄 阅读： references/combobox-how-to-guide.md

• 常见场景和解决方案
• 表单集成和验证
• 级联 ComboBox 模式
• 动态数据更新
• 获取和设置选中值
• 清除选择并重置

故障排除

📄 阅读： references/combobox-troubleshooting.md

• 常见问题和修复方法
• 性能故障排除
• 数据绑定问题
• 筛选问题
• 事件处理程序调试
• 浏览器兼容性说明

快速入门示例

控制器（HomeController.cs）：

public IActionResult Index()
{
    ViewBag.sportsList = new List<string> 
    { 
        "Badminton", 
        "Cricket", 
        "Football", 
        "Golf", 
        "Tennis" 
    };
    return View();
}

视图（Index.cshtml）：

<ejs-combobox id="sports-combo"
    dataSource="@ViewBag.sportsList"
    placeholder="Choose a sport...">
</ejs-combobox>

常见模式

模式 1：使用对象进行基本选择

<ejs-combobox id="games-combo"
    dataSource="@ViewBag.gamesList"
    placeholder="Select or type a game...">
    <e-combobox-fields text="Name" value="Id"></e-combobox-fields>
</ejs-combobox>

模式 2：使用自定义值进行筛选

<ejs-combobox id="combo"
    dataSource="@ViewBag.data"
    allowCustom="true"
    allowFiltering="true"
    filterType="Contains"
    debounceDelay="300"
    placeholder="Search or type custom value...">
    <e-combobox-fields text="Name" value="Id"></e-combobox-fields>
</ejs-combobox>

模式 3：使用筛选的远程数据

<ejs-combobox id="combo"
    allowFiltering="true"
    placeholder="Search items...">
    <e-combobox-fields text="Name" value="Id"></e-combobox-fields>
    <e-data-manager url="/api/items" adaptor="UrlAdaptor"></e-data-manager>
</ejs-combobox>

---

ListBox

ListBox（<ejs-listbox>）是一种列表选择组件，可在可滚动列表中显示项目。它支持单选和多选、分组、拖放、筛选和模板，适用于在列表之间转移项目。

组件概述

标记帮助程序： <ejs-listbox>
命名空间： Syncfusion.EJ2.DropDowns
NuGet： Syncfusion.EJ2.AspNet.Core

主要功能：

• 支持使用复选框进行单选和多选
• 使用 fields.groupBy 对项目进行分组
• 内置带搜索框的筛选功能（allowFiltering）
• 支持拖放（allowDragAndDrop）
• 支持通过移动操作在两个 ListBox 之间转移项目
• 面向大型数据集的虚拟滚动（enableVirtualization）
• 可自定义项目、分组、页眉和页脚模板
• 支持禁用项目
• 符合 WCAG 2.2 无障碍标准
• 支持 RTL 渲染
• 支持浮动标签（floatLabelType）

文档和导航指南

开始使用

📄 阅读： references/listbox-getting-started.md

• NuGet 包安装和 TagHelper 设置
• 服务和 TagHelper 注册
• 基本 ListBox 实现
• 单选和多选
• 运行应用程序

数据绑定

📄 阅读： references/listbox-data-binding.md

• 绑定对象数组
• 使用 DataManager 处理远程数据
• 字段映射（text、value、iconCss、groupBy、disabled）
• 选择模式：单选、多选
• 使用不同类型的复选框进行选择
• 预选值

高级功能

📄 阅读： references/listbox-features.md

• 筛选和搜索功能
• 排序和分组
• 拖放配置
• 双 ListBox（传输）模式
• 滚动器和虚拟滚动
• 启用／禁用项目
• 常见模式和使用场景

API 参考

📄 阅读： references/listbox-api.md

• 完整的属性参考
• 所有方法及其参数
• 所有事件及其说明

选择模式

📄 阅读： references/listbox-selection.md

• 单选模式
• 多选模式
• 复选框选择类型
• 程序化选择（获取／设置选中值）
• 选择事件和处理程序
• 使用 API 方法切换选择状态

双 List Box 传输

📄 阅读： references/listbox-dual-list-box.md

• 设置双 ListBox 布局
• 在列表之间拖放
• 移动操作：moveRight、moveLeft、moveUp、moveDown
• 移动所有项目：moveAllRight、moveAllLeft
• 选择和事件处理
• 传输模式和最佳实践
• 设置传输布局的样式

无障碍功能

📄 阅读： references/listbox-accessibility.md

• 符合 WCAG 2.2 AA 级标准
• ARIA 角色和属性
• 键盘快捷键和导航
• 屏幕阅读器支持
• 焦点管理和焦点指示器
• 兼容高对比度模式

图标和模板

📄 阅读： references/listbox-icons-and-templates.md

• 使用 iconCss 字段处理图标
• 用于布局的自定义项目模板
• 页眉和页脚模板
• 分组标题模板
• 空状态下的无记录模板
• 模板语法和最佳实践

操作指南

📄 阅读： references/listbox-how-to-guides.md

• 客户端和服务器端筛选模式
• 按多个条件对项目排序
• 远程数据绑定和延迟加载
• 级联 ListBox 场景
• 自定义样式和主题
• 表单集成和验证

样式和外观

📄 阅读： references/listbox-style-and-appearance.md

• CSS 样式和主题
• 内置主题颜色和自定义
• 应用自定义类
• 禁用项目的样式
• 选中高亮和悬停状态
• 响应式布局样式

快速入门示例

控制器（HomeController.cs）：

public IActionResult Index()
{
    ViewBag.languages = new List<object>
    {
        new { text = "JavaScript", id = "1" },
        new { text = "TypeScript", id = "2" },
        new { text = "React", id = "3" },
        new { text = "Vue", id = "4" }
    };
    return View();
}

视图（Index.cshtml）：

<h1>Programming Languages</h1>

<ejs-listbox id="languages"
    dataSource="@ViewBag.languages"
    height="300px">
    <e-listbox-fields text="text" value="id"></e-listbox-fields>
</ejs-listbox>

常见模式

模式 1：多选

<ejs-listbox id="skills"
    dataSource="@ViewBag.skills"
    height="300px">
    <e-listbox-fields text="Name" value="Id"></e-listbox-fields>
    <e-listbox-selectionsettings mode="Multiple"></e-listbox-selectionsettings>
</ejs-listbox>

模式 2：分组项目

<ejs-listbox id="technologies"
    dataSource="@ViewBag.technologies"
    height="300px">
    <e-listbox-fields text="Name" value="Id" groupBy="Category"></e-listbox-fields>
</ejs-listbox>

模式 3：双 ListBox 传输

<div class="dual-listbox">
    <ejs-listbox id="available"
        dataSource="@ViewBag.available"
        allowDragAndDrop="true"
        scope="transfer"
        height="250px">
        <e-listbox-fields text="Name" value="Id"></e-listbox-fields>
        <e-listbox-selectionsettings mode="Multiple"></e-listbox-selectionsettings>
    </ejs-listbox>

    <ejs-listbox id="selected"
        dataSource="@ViewBag.selected"
        allowDragAndDrop="true"
        scope="transfer"
        height="250px">
        <e-listbox-fields text="Name" value="Id"></e-listbox-fields>
        <e-listbox-selectionsettings mode="Multiple"></e-listbox-selectionsettings>
    </ejs-listbox>
</div>

---

多列组合框

多列组合框（<ejs-multicolumncombobox>）是一种专用下拉组件，以网格格式显示数据。用户可以从网格中选择一行，因此非常适合从包含多个相关字段的记录中进行选择。

组件概述

标记辅助程序： <ejs-multicolumncombobox>
命名空间： Syncfusion.EJ2.MultiColumnComboBox
NuGet： Syncfusion.EJ2.AspNet.Core

主要功能：

• 以包含多列的网格形式显示弹出内容
• 从表格数据中选择单行
• 灵活配置列，包括标题、宽度和对齐方式
• 从本地数组和远程数据源绑定数据
• 使用搜索框实时筛选（allowFiltering）
• 映射显示文本和隐藏值的字段
• 对大型数据集进行虚拟滚动
• 自定义弹出窗口的高度和宽度
• 符合 WCAG 2.2 无障碍标准
• 支持 RTL 渲染
• 支持本地化

文档和导航指南

快速入门

📄 阅读： references/multicolumn-combobox-getting-started.md

• 安装 NuGet 包
• 在 _ViewImports.cshtml 中注册 TagHelper
• 在 Program.cs 中注册服务
• 使用列实现基础的 MultiColumn ComboBox
• 字段映射和数据配置
• 弹出窗口尺寸配置

数据绑定

📄 阅读： references/multicolumn-combobox-data-binding.md

• 字段映射（text、value）
• 使用对象进行本地数据绑定
• 使用 DataManager 进行远程数据绑定（OData、Web API、URL Adaptor）
• 使用 Query 筛选和选择数据
• 支持的数据服务
• 常见绑定模式

API 参考

📄 阅读： references/multicolumn-combobox-api.md

• 完整的属性参考，包含类型和默认值
• 所有方法的参数和说明
• 所有事件的说明
• 列属性配置

列配置

📄 阅读： references/multicolumn-combobox-columns.md

• 列属性定义（field、header、width、textAlign）
• 固定列宽和百分比列宽
• 文本对齐方式（Left、Center、Right）
• 日期和数字格式设置
• 自定义列模板
• 动态管理列（添加／删除列）

筛选

📄 阅读： references/multicolumn-combobox-filtering.md

• 使用 allowFiltering 启用筛选
• 筛选类型：StartsWith、Contains、EndsWith
• 客户端筛选与服务器端筛选
• 筛选延迟配置（delay）
• 不区分大小写和重音符号的筛选
• 多列筛选模式
• 范围和日期范围筛选

排序

📄 阅读： references/multicolumn-combobox-sorting.md

• 按列默认排序
• 升序和降序排序
• 多列排序
• 自定义排序逻辑
• 服务器端排序模式
• 排序界面和控件（排序按钮、点击表头排序）

事件

📄 阅读： references/multicolumn-combobox-events.md

• 选择事件：select、change、customValueSpecifier
• 筛选事件：filtering
• 数据绑定事件：dataBound、actionBegin、actionComplete
• 界面事件：focus、blur、open、close
• 事件处理模式和最佳实践

模板和自定义

📄 阅读： references/multicolumn-combobox-templates.md

• 用于自定义单元格渲染的单元格模板
• 带图标和排序功能的表头模板
• 带汇总信息的页脚模板
• 用于完整行自定义的行模板
• 空状态模板（无记录）
• 自定义样式和 CSS

无障碍

📄 阅读： references/multicolumn-combobox-accessibility.md

• 符合 WCAG 2.2 AA 级标准
• ARIA 属性和语义标记
• 键盘导航快捷键
• 屏幕阅读器支持
• 焦点管理
• 高对比度模式支持

虚拟化

📄 阅读： references/multicolumn-combobox-virtualization.md

• 为大型数据集启用虚拟滚动
• 项目高度和缓冲区配置
• 性能优化技术
• 通过延迟加载实现服务器端虚拟化
• 内存管理和泄漏检测
• 基准测试和性能指标

本地化

📄 阅读： references/multicolumn-combobox-localization.md

• 使用支持的语言启用本地化
• 自定义区域设置定义
• RTL（从右向左）布局支持
• 按区域设置格式化日期和数字
• 使用资源文件集成翻译
• 集成第三方翻译库

快速入门示例

控制器（HomeController.cs）：

public class Employee
{
    public int EmpID { get; set; }
    public string Name { get; set; }
    public string Designation { get; set; }
    public string Country { get; set; }
}

public IActionResult Index()
{
    ViewBag.empData = new List<Employee>
    {
        new Employee { EmpID = 1001, Name = "Andrew Fuller", Designation = "Team Lead", Country = "England" },
        new Employee { EmpID = 1002, Name = "Robert", Designation = "Developer", Country = "USA" },
        new Employee { EmpID = 1003, Name = "Michael", Designation = "HR", Country = "Russia" }
    };
    return View();
}

视图（Index.cshtml）：

<ejs-multicolumncombobox id="multicolumn"
    dataSource="@ViewBag.empData"
    placeholder="Select an employee">
    <e-multicolumncombobox-fields text="Name" value="EmpID"></e-multicolumncombobox-fields>
    <e-multicolumncombobox-columns>
        <e-multicolumncombobox-column field="EmpID" header="Employee ID" width="120"></e-multicolumncombobox-column>
        <e-multicolumncombobox-column field="Name" header="Name" width="120"></e-multicolumncombobox-column>
        <e-multicolumncombobox-column field="Designation" header="Designation" width="120"></e-multicolumncombobox-column>
        <e-multicolumncombobox-column field="Country" header="Country" width="100"></e-multicolumncombobox-column>
    </e-multicolumncombobox-columns>
</ejs-multicolumncombobox>

常见模式

模式 1：使用本地数据的网格显示

<ejs-multicolumncombobox id="products"
    dataSource="@ViewBag.products"
    popupHeight="250px"
    popupWidth="450px"
    placeholder="Select a product">
    <e-multicolumncombobox-fields text="ProductName" value="ProductID"></e-multicolumncombobox-fields>
    <e-multicolumncombobox-columns>
        <e-multicolumncombobox-column field="ProductID" header="Product ID" width="100"></e-multicolumncombobox-column>
        <e-multicolumncombobox-column field="ProductName" header="Product Name" width="150"></e-multicolumncombobox-column>
        <e-multicolumncombobox-column field="Price" header="Price" width="100"></e-multicolumncombobox-column>
    </e-multicolumncombobox-columns>
</ejs-multicolumncombobox>

模式 2：使用筛选功能的远程数据

<ejs-multicolumncombobox id="employees"
    allowFiltering="true"
    placeholder="Search employees...">
    <e-multicolumncombobox-fields text="FirstName" value="EmployeeID"></e-multicolumncombobox-fields>
    <e-data-manager url="/api/employees" adaptor="UrlAdaptor"></e-data-manager>
    <e-multicolumncombobox-columns>
        <e-multicolumncombobox-column field="EmployeeID" header="Employee ID" width="100"></e-multicolumncombobox-column>
        <e-multicolumncombobox-column field="FirstName" header="Name" width="120"></e-multicolumncombobox-column>
        <e-multicolumncombobox-column field="Designation" header="Designation" width="120"></e-multicolumncombobox-column>
        <e-multicolumncombobox-column field="Country" header="Country" width="100"></e-multicolumncombobox-column>
    </e-columns>
</ejs-multicolumn-combobox>

---

关键属性速查

组件	属性	用途
ComboBox	allowCustom	允许用户自定义值
ComboBox	allowFiltering	显示搜索框
ComboBox	allowResize	可调整大小的弹出窗口
ListBox	allowDragAndDrop	启用拖放
ListBox	selectionsettings.mode	单选或多选
ListBox	selectionsettings.type	默认选择或复选框选择
MultiColumn	<e-column>	定义网格列
MultiColumn	popupHeight	弹出网格高度
MultiColumn	popupWidth	弹出网格宽度

---

从这里开始： 阅读 references/combobox-getting-started.md、references/listbox-getting-started.md 或 references/multicolumn-combobox-getting-started.md，开始首次实现。