Blazor DropDownList概述

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

DropDownList组件的一部分Telerik UI Blazor与100年,专业年级UI库本机组件来构建现代和功能丰富的应用程序。尝试注册一个免费试用。

下载免费试用

创建它

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

选择值:@selectedValue < br / > < TelerikDropDownList Data =“@myDdlData”TextField =“MyTextField”ValueField =“MyValueField”@bind-Value = " selectedValue " > < / TelerikDropDownList > @code{/ /在实际情况下,模型通常是在一个单独的文件/ /模型类型和值字段类型必须提供dropdpownlist公共类MyDdlModel{公共int MyValueField{得到;设置;公共字符串MyTextField}{得到;设置;}}int selectedValue{得到;设置;}IEnumerable < MyDdlModel > myDdlData =可点数的。范围(20)。选择(x = >新MyDdlModel {MyTextField =“物品”+ x, MyValueField = x});}

数据绑定

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

过滤

的Blazor DropDownList内置过滤器,将缩小显示的建议最终用户类型。配置这个特性,使用滤过性的参数。此外,你可以选择不同的过滤操作符和配置多少符号列表后,建议将出现。阅读更多关于Blazor DropDownList过滤器…。

分组

的Blazor DropDownList使您能够集团上市建议分类,这样你就可以帮助最终用户浏览更快通过长列表。阅读更多关于Blazor DropDownList分组…。

模板

您可以使用内置的功能模板和自定义组件的缺省呈现。阅读更多关于Blazor DropDownList模板…。

验证

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

虚拟化

通过虚拟化下拉列表中的元素,您可以使用巨大的数据源没有性能问题。UI虚拟化与本地和远程数据。阅读更多关于Blazor DropDownList虚拟化……

自适应呈现

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

参数

造型和外观

以下参数允许您自定义的外观Blazor DropDownList:

你可以找到更多的选择定制DropDownList样式的外观的文章。

弹出设置

弹出的组件可以通过嵌套标签:另外定制

< TelerikDropDownList > < DropDownListSettings > < DropDownListPopupSettings高度=“……”/>  

DropDownList提供了以下弹出设置:

DropDownList参考和方法

DropDownList是一个通用的组件及其类型来自于模型是绑定到字段类型和值。看到组件引用部分关于数据绑定的文章的细节和例子。

添加一个组件实例使用的引用它的方法。

< TelerikDropDownList @ref =“@DropDownListRef”数据=“@DropDownListData @bind-Value =“@DropDownListValue”宽度= " 300 px " / > < TelerikButton OnClick = " @OpenPopup " >打开弹出< / TelerikButton > @code{私人TelerikDropDownList <字符串,字符串> DropDownListRef{得到;设置;}私人字符串DropDownListValue{得到;设置;}私人列表<字符串> DropDownListData{得到;设置;}=新列表<字符串>{“第一”、“第二”,“第三”};私人空间OpenPopup () {DropDownListRef.Open ();}}

选择的项目和DefaultText

默认情况下,如果没有价值也没有提供DefaultText定义,DropDownList会出现空的。

• 来显示DefaultText- - - - - -价值应该是0或零根据您所使用的数据类型ValueField和DefaultText应该定义。

• 显示所选项目当组件呈现——提供价值所需的元素。注意,它必须匹配项的组件的数据源。

例子

@MyStringItem < TelerikDropDownList数据= " @MyStringList " @bind-Value =“@MyStringItem DefaultText”=“选择”> < / TelerikDropDownList > < br / > < br / > @MyIntItem < TelerikDropDownList数据=“@MyIntList @bind-Value =“@MyIntItem”DefaultText = "选择另一件" > < / TelerikDropDownList > @code{保护列表<字符串> MyStringList = new <字符串>(){“第一”、“第二”,“第三”};/ /当前值为空(没有综合项目),允许DefaultText显示。保护字符串MyStringItem{得到;设置;}保护列表< int > MyIntList = new < int > () {1,2,3};/ /当前值是0(没有综合项目),允许DefaultText显示。保护int MyIntItem{得到;设置;}}

@result < br / > < TelerikDropDownList数据=“@myDdlData”文本框=“MyTextField ValueField”=“MyValueField”@bind-Value =“@DdlValue”DefaultText = "选择" > < / TelerikDropDownList > < TelerikButton OnClick = " @GetSelectedItem " > < / TelerikButton > @code得到选中的项{字符串结果;int DdlValue{得到;设置;}= 5;空白GetSelectedItem(){/ /从数据源提取数据项使用价值MyDdlModel设置selectedItem = myDdlData。在哪里(d = > d。MyValueField = = DdlValue) .FirstOrDefault ();如果(设置selectedItem ! = null){结果= selectedItem.MyTextField;其他}{结果=“没有选择项”;}StateHasChanged ();公共类MyDdlModel}{公共int MyValueField{得到; set; } public string MyTextField { get; set; } } IEnumerable myDdlData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x }); }

如果你正在寻找更多的字段描述了下拉项的视图模型,不仅价值,请参阅从下拉模型KB和条OnChange事件。

您可能还想回顾/加入讨论和投票给这个请求:绑定DropDownList复杂模型的价值

下一个步骤

• DropDownList绑定到数据

• 为用户发展项目

另请参阅

• 数据绑定
• 现场演示:DropDownList
• 现场演示:DropDownList验证