Blazor DropDownList概述

的Blazor下拉列表组件允许用户从一个下拉弹出的预定义选项集中选择一个选项。开发人员可以控制数据、大小和各种外观选项，如类和模板．

下拉列表组件是为Blazor的Telerik UI，一个具有100个本地组件的专业级UI库，用于构建现代和功能丰富的应用程序。想要试用它，请注册一个30天的免费试用。

下载免费试用

创建它

1. 使用TelerikDropDownList标记将组件添加到剃须刀页面。
2. 填充它数据属性中要出现在下拉列表中的项的集合。
3. 设置文本框而且ValueField属性指向模型的对应名称
4. 绑定组件的值类中定义的类型相同的变量ValueField参数。
5. (可选)启用功能，如过滤和清除按钮
6. (可选)设置价值属性设置为模型的初始值。

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

数据绑定

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

过滤

Blazor下拉列表有一个内置的过滤器，可以缩小显示的建议作为终端用户的类型。要配置此特性，请使用滤过性的参数。此外，您可以在不同的筛选操作符之间进行选择，并配置有多少个符号之后将显示建议列表。阅读更多关于Blazor下拉列表过滤器…．

分组

Blazor下拉列表使您能够将列出的建议分组到类别中，这样您就可以帮助终端用户通过较长的列表更快地浏览。阅读更多关于Blazor下拉列表分组…．

模板

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

验证

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

虚拟化

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

自适应呈现

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

参数

造型和外观

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

中可以找到定制下拉列表样式的更多选项外观的文章．

弹出设置

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

     . /

下拉列表提供了以下弹出设置:

下拉列表引用和方法

DropDownList是一个泛型组件，它的类型来自于它绑定的模型和值字段类型。看到组件引用详细信息和示例请参见数据绑定文章的第1节。

类向组件实例添加引用以使用它的方法．

 打开Popup @code {private TelerikDropDownList dropdownlistf {get;设置;}私有字符串DropDownListValue {get;设置;} private List DropDownListData {get;设置;} = new List {"first"， "second"， "third"};private void OpenPopup() {DropDownListRef.Open();}}

选中的项目和DefaultText

默认情况下，如果没有价值提供且不提供DefaultText，则下拉列表将显示为空。

• 来显示DefaultText-价值应该是0或零方法中使用的数据类型ValueField和DefaultText应该被定义。

• 要在组件呈现时显示所选项，请提供价值所需元素的。注意，它必须匹配组件数据源的一个项。

例子

@MyStringItem   
 
 @MyIntItem   @code {protected List MyStringList = new List() {"first"， "second"， "third"};//当前值为空(没有选择项)，允许显示DefaultText。protected string MyStringItem {get;设置;} protected List MyIntList = new List() {1,2,3};//当前值为0(没有选择项)允许显示DefaultText。protected int MyIntItem {get;设置;}}

@result 
   Get SelectedItem  @code {string result;int DdlValue {get;设置;} = 5;void GetSelectedItem(){//使用MyDdlModel selectedItem = myDdlData从数据源提取数据项。Where(d => d. myvaluefield == DdlValue).FirstOrDefault();if (selectedItem != null){结果= selectedItem. mytextfield;} else{结果= "没有选择的项目";} StateHasChanged ();}公共类MyDdlModel{公共int MyValueField {get;设置; } public string MyTextField { get; set; } } IEnumerable myDdlData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x }); }

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

你也可以回顾/加入讨论并为这个请求投票:绑定DropDownList值到复杂模型

下一个步骤

• 将下拉列表绑定到数据

• 为用户预选项目

另请参阅

• 数据绑定
• 现场演示:下拉列表
• 现场演示:下拉列表验证