Blazor MultiSelect概述

的Blazor MultiSelect组件允许用户从可用列表中选择若干项。它类似于a<选择多个>在这方面。多重选择提供建议，你键入，他们可以过滤后的．您可以通过以下方式控制建议列表数据绑定，各种外观设置喜欢维而且模板．

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

下载免费试用

创建多选

1. 使用TelerikMultiSelect标记，将组件添加到razor页面。

2. 填充数据属性设置为您希望在下拉列表中显示的项的集合。

3. 绑定组件的值属性中定义的类型相同类型的集合ValueField参数。

4. (可选)启用占位符文本、清除按钮和自动关闭等功能。

@*主要功能和简单的数据绑定建议和值*@   @if (Values。计数> 0){
 @foreach(值中的var项){
@item
} 
} @code{列表国家{get;设置;} = new List();List Values {get;设置;} = new List();OnInitialized() {nations . add("阿尔巴尼亚");国家。增加(“波斯尼亚-黑塞哥维那”);Countries.Add(“保加利亚”); Countries.Add("Croatia"); Countries.Add("Kosovo"); Countries.Add("North Macedonia"); Countries.Add("Montenegro"); Countries.Add("Serbia"); Countries.Add("Slovenia"); base.OnInitialized(); } }

数据绑定

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

过滤

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

分组

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

模板

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

验证

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

虚拟化

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

自适应呈现

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

参数

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

造型和外观

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

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

弹出设置

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

     . /

MultiSelect提供了以下弹出设置:

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

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

多选择引用和方法

MultiSelect是一个通用组件，它的类型由用作其数据源的模型的类型决定。你可以在数据绑定-注意事项篇文章。

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

 打开弹出窗口 @code {private TelerikMultiSelect MultiSelectRef {get;设置;} private List MultiSelectValue {get;设置;} private List MultiSelectData {get;设置;} = new List {"first"， "second"， "third"};private void OpenPopup() {MultiSelectRef.Open();}}

下一个步骤

• 将MultiSelect绑定到数据

• 为用户预选项目

另请参阅

• 数据绑定
• 现场演示:多选
• 现场演示:多重选择验证
• API参考