刷新数据

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

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

在本文中:

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

重新绑定的方法

方法刷新数据重新绑定方法。使用组件引用来调用重新绑定方法在进行数据更改(例如添加、删除项)之后。这在您不使用的情况下是必需的可观测的数据或重置集合引用。调用重新绑定将强制组件重新处理可用数据以反映更新。

@*添加/删除一个项目，并重新绑定TreeView以响应该更改。*@ @ @using System.Collections.ObjectModel 添加项目 删除项目       @code {private TelerikTreeView TreeViewRef;private List TreeViewData {get;设置;} = new List();private void AddItem() {TreeViewData。添加新的TreeItem {Id = TreeViewData。Count + 1, Text = "Testing"， ParentIdValue = 1, HasChildren = false, Icon = "gears"});TreeViewRef.Rebind ();} private void RemoveItem(){如果(TreeViewData. xml)Count > 0) {TreeViewData.RemoveAt(TreeViewData.IndexOf(TreeViewData.Last())); } TreeViewRef.Rebind(); } protected override void OnInitialized() { TreeViewData = new List() { new TreeItem() { Id = 1, Text = "Project", ParentIdValue = null, HasChildren = true, Icon = "folder" }, new TreeItem() { Id = 2, Text = "Design", ParentIdValue = 1, HasChildren = true, Icon = "brush" }, new TreeItem() { Id = 3, Text = "Implementation", ParentIdValue = 1, HasChildren = true, Icon = "folder" }, new TreeItem() { Id = 4, Text = "site.psd", ParentIdValue = 2, HasChildren = false, Icon = "psd" }, new TreeItem() { Id = 5, Text = "index.js", ParentIdValue = 3, HasChildren = false, Icon = "js" }, new TreeItem() { Id = 6, Text = "index.html", ParentIdValue = 3, HasChildren = false, Icon = "html" }, new TreeItem() { Id = 7, Text = "styles.css", ParentIdValue = 3, HasChildren = false, Icon = "css" } }; } public class TreeItem { public int Id { get; set; } public string Text { get; set; } public int? ParentIdValue { get; set; } public bool HasChildren { get; set; } public string Icon { get; set; } } }

可观测的数据

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

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

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

@*添加/删除一个项目，看看TreeView如何反应的变化。*@ @ @using System.Collections.ObjectModel 添加项目       @code {private ObservableCollection TreeViewData {get;设置;} = new ObservableCollection();private void AddItem() {TreeViewData。添加新的TreeItem {Id = TreeViewData。Count + 1, Text = "Testing"， ParentIdValue = 1, HasChildren = false, Icon = "gears"});} private void RemoveItem(){如果(TreeViewData. xml)Count > 0) {TreeViewData.RemoveAt(TreeViewData.IndexOf(TreeViewData.Last()));}}保护覆盖空白OnInitialized () {TreeViewData = new ObservableCollection < TreeItem >(){新TreeItem () {Id = 1,文本=“项目”,ParentIdValue = null, HasChildren = true,图标=“文件夹”},新TreeItem () {Id = 2,文字=“设计”,ParentIdValue = 1, HasChildren = true,图标=“刷”},新TreeItem () {Id = 3,文本=“实现”,ParentIdValue = 1, HasChildren = true,图标=“文件夹”},新TreeItem () {Id = 4,文本=“site.psd ParentIdValue = 2, HasChildren = false,Icon = "psd"}， new TreeItem() {Id = 5, Text = "index.js"， ParentIdValue = 3, HasChildren = false, Icon = "js"}， new TreeItem() {Id = 6, Text = "index.html"， ParentIdValue = 3, HasChildren = false, Icon = "html"}， new TreeItem() {Id = 7, Text = "styles.css"， ParentIdValue = 3, HasChildren = false, Icon = "css"}; } public class TreeItem { public int Id { get; set; } public string Text { get; set; } public int? ParentIdValue { get; set; } public bool HasChildren { get; set; } public string Icon { get; set; } } }

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

新馆藏参考

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

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

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

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

@*添加/删除项目或更改集合，以查看TreeView对该更改的反应。*@ 添加项目 删除项目 更改项目数据     @code {void AddItem() {items。添加新的TreeItem {Id = Items。Count + 1, Text = "Testing"， ParentIdValue = 1, HasChildren = false, Icon = "gears"});Items = new List(Items);}无效RemoveItem(){如果(Count > 0) {items . remove (Items.IndexOf(Items.Last()));Items = new List(Items);}}无效changeitem(){项=新列表< TreeItem >(){新TreeItem () {Id = 1,文本=“新根项”,ParentIdValue = null, HasChildren = true,图标=“文件夹”},新TreeItem () {Id = 2,文字=“新子条目1”,ParentIdValue = 1, HasChildren = true,图标=“刷”},新TreeItem () {Id = 3,文本=“新的子条目2”,ParentIdValue = 1, HasChildren = false,图标=“文件夹”},新TreeItem () {Id = 4,文本=“第1项的孩子”,ParentIdValue = 2, HasChildren = false,图标=“齿轮”}};Items = new List(Items);}公共类TreeItem{公共int Id {get; set; } public string Text { get; set; } public int? ParentIdValue { get; set; } public bool HasChildren { get; set; } public string Icon { get; set; } } public List Items { get; set; } = new List() { new TreeItem() { Id = 1, Text = "Project", ParentIdValue = null, HasChildren = true, Icon = "folder" }, new TreeItem() { Id = 2, Text = "Design", ParentIdValue = 1, HasChildren = true, Icon = "brush" }, new TreeItem() { Id = 3, Text = "Implementation", ParentIdValue = 1, HasChildren = true, Icon = "folder" }, new TreeItem() { Id = 4, Text = "site.psd", ParentIdValue = 2, HasChildren = false, Icon = "psd" }, new TreeItem() { Id = 5, Text = "index.js", ParentIdValue = 3, HasChildren = false, Icon = "js" }, new TreeItem() { Id = 6, Text = "index.html", ParentIdValue = 3, HasChildren = false, Icon = "html" }, new TreeItem() { Id = 7, Text = "styles.css", ParentIdValue = 3, HasChildren = false, Icon = "css" } }; }

另请参阅

• ObservableCollection
• INotifyCollectionChanged接口
• 现场演示