组合框-刷新数据

使用ObservableCollection最常见的原因是让组件(如网格、树视图、树列表、下拉列表)在你改变集合时发生变化或做出反应。

当你想这样刷新组件数据源时，有两个重要的框架行为需要注意——当ObservableCollection实例触发事件时，以及当组件不是一个可观察集合时，如何刷新组件的数据。

在本文中:

• 重新绑定的方法
• 可观测的数据
• 新馆藏参考

重新绑定的方法

来刷新组合框数据OnRead，打电话给重新绑定TelerikComboBox引用的方法。这将触发OnRead事件并在处理程序中执行业务逻辑。

@*点击重新绑定按钮将从下拉菜单中删除第一个选项并刷新数据*@ @ @使用telerikdatasource . extensions 重新绑定   @code{public int SelectedValue {get;设置;} List AllData {get;设置;} = new List();public TelerikComboBox ComboBoxRef {get;设置;} async任务ReadItems(comboboxreaddeventargs args){等待任务延迟(1000); args.Data = AllData.ToDataSourceResult(args.Request).Data; } protected override void OnInitialized() { List products = new List(); for (int i = 0; i < 200; i++) { products.Add(new Product() { ProductId = i, ProductName = "Product" + i.ToString(), SupplierId = i, UnitPrice = (decimal)(i * 3.14), UnitsInStock = (short)(i * 1), }); } AllData = products; } public class Product { public int ProductId { get; set; } public string ProductName { get; set; } public int SupplierId { get; set; } public decimal UnitPrice { get; set; } public short UnitsInStock { get; set; } } private void RebindComboBox() { if (AllData.Count > 0) { AllData.RemoveAt(0); } ComboBoxRef.Rebind(); } }

作为我们3.0.1版本中我们引入了重新绑定方法到组件引用。这将使本文中的其他方法过时。

可观测的数据

数据绑定组件可以从实时数据中获益——当数据源集合发生更改时，组件应该进行更新以反映该更改。Blazor套件的Telerik UI中的大多数数据绑定组件都实现了这样的功能。

当数据的集合，该集合实现INotifyCollectionChanged接口(例如ObservableCollection)， Telerik组件订阅其CollectionChanged要更新的事件。这意味着添加项、删除项或清除集合更新组件(其)阀门()，.Remove ()和.Clear ()方法)。

Observable集合会触发CollectionChanged事件发生时，添加，删除和清晰的方法被调用。当您更改其中一个元素的字段值时，它们不会触发它。

@*添加/删除一个选项，以查看组合框对更改的反应。*@ @ @using System.Collections.ObjectModel 
添加选项
  添加选项 
 
删除最后一个选项
 删除最后一个选项 
 
ComboBox选项:@ myddldata。Count
 
   @code {string ValuetoAdd {get;设置;} int selectedValue {get;设置;} ObservableCollection myDdlData = new ObservableCollection(Enumerable。Range(1,5).Select(x => new MyDdlModel {MyTextField = "item " + x, MyValueField = x});void AddOption() {if (!string.IsNullOrWhiteSpace(ValuetoAdd)) {myDdlData. myDdlData。添加(新的MyDdlModel {MyTextField = ValuetoAdd, MyValueField = myDdlData。Count + 1});ValuetoAdd = string.Empty;}}无效RemoveOption(){如果(myDdlData. xml)。{myDdlData. removeat (myDdlData. removeat)计数- 1); } } public class MyDdlModel { public int MyValueField { get; set; } public string MyTextField { get; set; } } }

如果需要向集合中添加/从集合中删除许多项，请考虑创建一个新集合并提供其对data参数的引用。因此，组件将只重新呈现一次(当数据收集引用被更改时)，而不是为了响应Add/Remove事件而多次重新呈现。

新馆藏参考

在Blazor中，框架将触发OnParametersSet事件(这是子组件如何对外部更改做出反应)，只有当它能够检测到通过相应参数(如数据查看Telerik组件的数据源)。这种检测的工作原理如下:

• 对于基本类型(如数字、字符串)，当它们的值发生变化时就会发生这种情况。

• 对于复杂类型(如数据集合，如列表，或任何IEnumerable(以及特定于应用程序的模型/对象)，当对象引用发生更改时就会发生这种情况。

  因此，您通常需要创建新视图模型字段的引用(例如TreeViewData = new List< mytreeviewem >(theUpdatedDataCollection);)，当你想要更新组件时。

@*添加/删除一个选项，以查看组合框对更改的反应。*@ 
添加选项
  添加选项 
 
删除最后一个选项 
 
加载新集合
 加载数据 
 
ComboBox选项:@ myddldata。Count
 
   @code {string ValuetoAdd {get;设置;} int selectedValue {get;设置;} List myDdlData = new List(Enumerable。Range(1,5).Select(x => new MyDdlModel {MyTextField = "item " + x, MyValueField = x});void AddOption() {if (!string.IsNullOrWhiteSpace(ValuetoAdd)) {myDdlData. myDdlData。添加(新的MyDdlModel {MyTextField = ValuetoAdd, MyValueField = myDdlData。Count + 1});myDdlData = new List(myDdlData);ValuetoAdd = string.Empty; } } void RemoveOption() { if (myDdlData.Count > 0) { myDdlData.RemoveAt(myDdlData.Count - 1); myDdlData = new List(myDdlData); } } void LoadNewData() { var newData = new List(Enumerable.Range(6, 5).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x })); myDdlData = new List(newData); Console.WriteLine("New data collection loaded."); } public class MyDdlModel { public int MyValueField { get; set; } public string MyTextField { get; set; } } }

另请参阅

• ObservableCollection
• INotifyCollectionChanged接口
• 现场演示