组件/组合框

Blazor ComboBox概述

的Blazor ComboBox组件允许用户从预定义的下拉弹出的选项中选择一个选项。你也可以允许他们进入自定义值和过滤器可用的项目。你可以控制数据，大小和各种外观选项，如类和模板．

Telerik UI的Blazor忍者形象

的ComboBox组件的一部分Blazor的Telerik UI，一个专业级的UI库，包含100个本地组件，用于构建现代和功能丰富的应用程序。想要试用它，可以注册一个30天的免费试用期。

下载免费试用

创建下拉列表框

  1. 使用TelerikComboBox标记，将组件添加到razor页面。
  2. 填充数据属性设置为您希望在下拉列表中显示的项的集合。
  3. 设置文本框而且ValueField属性指向模型的相应名称
  4. 绑定组件的值属性中定义的类型相同的变量ValueField参数。
  5. (可选)启用过滤和清除按钮等功能

组合框数据绑定使用双向值绑定

选定值:@selectedValue 
   @code {IEnumerable myComboData = Enumerable。范围(20)。Select(x => new MyDdlModel {MyTextField = "item " + x, MyValueField = x});int selectedValue {get;设置;} //在实际情况下，模型通常在一个单独的文件中//模型类型和值字段类型必须提供给dropdpownlist公共类MyDdlModel {public int MyValueField {get;设置;}公共字符串MyTextField{获取;设置;}}}

数据绑定

Blazor ComboBox需要一个数据源，以便它可以用数据填充下拉列表。要提供数据源，请使用数据财产。阅读更多关于Blazor ComboBox数据绑定…．

过滤

Blazor ComboBox有一个内置的过滤器，可以根据最终用户类型缩小所显示的建议的范围。要配置此特性，请使用滤过性的参数。此外，您还可以选择不同的筛选操作符，并在包含建议的列表将出现多少符号之后配置。阅读更多关于Blazor ComboBox过滤器…．

分组

Blazor ComboBox使您能够将列出的建议分组到类别中，以便您可以帮助最终用户更快地浏览较长的列表。阅读更多关于Blazor ComboBox分组…．

模板

您可以使用内置模板的功能并自定义组件的默认呈现。阅读更多关于Blazor ComboBox模板…．

验证

通过使用内置验证，可以确保组件值是可接受的。阅读更多关于输入验证的信息…．

虚拟化

通过虚拟化下拉列表中的元素，您可以使用巨大的数据源，而不会出现性能问题。UI虚拟化同时适用于本地和远程数据。阅读更多关于Blazor ComboBox虚拟化…

自适应呈现

该组件根据屏幕大小支持不同的弹出式呈现。阅读更多关于自适应渲染功能以及如何启用它…

参数

组合框提供了各种参数，允许您配置组件:

参数 类型 描述
AdaptiveMode AdaptiveMode
（没有一个）		 的自适应模式组件的。
AllowCustom 保龄球 用户是否可以输入自定义值．如果启用，则ValueField一定是字符串．
ClearButton 保龄球 用户是否有清除所选值的选项。单击时，价值将更新为默认(TValue)，所以必须没有项目数据有这样一个价值．例如，如果TValue是int，清除该值将导致a0价值，所以如果有一个Item与0在其ValueField-选择时可能会出现问题。这个特性通常可以与AllowCustom．
数据 IEnumerable < TItem > 允许您提供数据源。必需的。
DebounceDelay int
150		 最后输入的符号与内部符号之间的时间(以毫秒为单位)oninput事件触发。当用户输入和筛选时应用。使用它来平衡客户端性能和数据库查询数量。
启用 保龄球 组件是否启用。
滤过性的 保龄球 是否过滤对最终用户启用。
FilterOperator StringFilterOperator
（StartsWith）		 的方法过滤的物品。
Id 字符串 渲染为id属性上的<输入/ >元素，所以你可以附加一个<标签= " " >对输入。
占位符 字符串 当没有选择项目时，用户看到的提示文本。为了显示它，价值属性中定义的类型，应将其设置为默认值ValueField参数。例如,0对于一个int,零对于一个int ?或字符串．您需要确保它与数据源中现有项的值不匹配。
TItem 类型 组件绑定到的模型的类型。如果你不能提供数据或价值．确定引用对象的类型。
TValue 类型 组件绑定到的模型中的值字段的类型。如果你不能提供数据或价值．确定引用对象的类型。值的类型可以是:
-数量(如int，双，等等)
-字符串
-Guid
-枚举
标题 字符串 在弹出窗口(动作表)头部呈现的标题文本。仅适用于以下情况AdaptiveMode设置为汽车．
文本框 字符串
（文本）		 将显示给用户的模型字段的名称。
ValueField 字符串
（价值）		 将作为基础的模型中的字段的名称价值．
价值而且bind-Value TValue 获取/设置组件的值，可用于绑定。如果您将其设置为模型类值字段允许的值，则将预先选择数据集合中的相应项。使用bind-Value用于双向绑定的语法，例如，到您自己的变量。
TabIndex int ? 映射到tabindexHTML元素的属性。控件聚焦表单中的输入的顺序可以使用它自定义选项卡关键。

造型和外观

以下参数使您能够自定义Blazor组合框的外观:

参数 类型 描述
类 字符串 将在组件的主包装元素上呈现的CSS类。用它来重写主题或应用自定义样式．
宽度 字符串 组件的宽度。如果下拉菜单没有设置特定的宽度，它将同时瞄准下拉菜单和主元素。默认的宽度值为空，但主题适用100％．使用宽度属性或自定义CSS来设置另一个值在任何支持的单位中．

控件中，可以找到自定义组合框样式的更多选项外观的文章．

组件的弹出窗口可以通过嵌套标签进行额外定制:

      .

该组合框提供以下弹出设置:

参数 类型 描述
AnimationDuration int 弹出窗口的动画持续时间，以毫秒为单位。
类 字符串 附加的CSS类来自定义弹出框的外观。
高度 字符串 弹出窗口的高度。
MinHeight 字符串 弹出窗口的最小高度。
MinWidth 字符串 弹出窗口的最小宽度。
MaxHeight 字符串 弹出窗口的最大高度。
MaxWidth 字符串 弹出窗口的最大宽度。
宽度 字符串 弹出窗口的宽度。如果你不指定一个值，下拉框宽度将匹配锚元素宽度，这有助于响应式布局和100%宽度。

组合框引用和方法

ComboBox是一个泛型组件，它的类型由您传递给它的模型的类型及其值字段的类型决定。你可以在数据绑定-注意事项篇文章。

控件添加对组件实例的引用以使用组合框的方法．

方法 描述
关闭 关闭弹出窗口。
FocusAsync 聚焦组件的主要元素。总是等待这个调用，正如它所依赖的JSInterop．
开放 打开弹出窗口。 
 打开弹出窗口 @code {private TelerikComboBox ComboBoxRef {get;设置;} private string ComboBoxValue {get;设置;} private List建议{get;设置;} = new List {"first"， "second"， "third"};private void OpenPopup() {ComboBoxRef.Open();}}

选择项

默认为否价值，则组合框将显示为空，或将显示占位符定义的。如果一个价值提供，并且AllowCustom是不设置为真正的,价值应该匹配数据源中的项(请参阅值超出范围部分)。

然而，ComboBox并不总是有一个选中的项目，因为它可以作为一个输入。在以下情况下，根据开发人员可以控制的组件的设置，将没有选定的项:

  • 用户通过Clear按钮清除该值，
  • 用户清除的值退格或▽键,
  • AllowCustom = " false "当输入自定义值时，组合框的输入值将在更改事件时自动清除(模糊输入或者输入键盘按键)。见下表。
  • AllowCustom = " true "-当用户开始输入自定义值时。

当初始值为时，缺失选择是最常见的零因为数据源很少有带有零值，和/或当您希望让用户键入不在预定义选项集中的值时。

如果用户在输入中输入文本，选择行为会按照下表执行:

用户输入匹配 AllowCustom =真正的 AllowCustom =假
的文本框一件物品的 选中匹配的项目。的价值从项目中取出。 选中匹配的项目。的价值从项目中取出。
的ValueField一件物品的 未选中项目。价值更新为自定义的。 未选中项目。价值更新为默认的(typeof(值))．的OnChange事件不会为值清除而触发。
不匹配 未选中项目。价值更新为自定义的。 未选中项目。价值更新为默认的(typeof(值))．的OnChange事件不会为值清除而触发。

如果您正在从描述下拉项的视图模型中寻找更多字段，而不仅仅是价值，请参阅从下拉菜单中获取模型KB文章和OnChange事件。

您可能还想查看/加入讨论并为此请求投票:将下拉列表值绑定到复杂模型

下一个步骤

另请参阅

在本文中
相关文章
找不到你需要的帮助? 改进这篇文章
Baidu
map