面板栏-刷新数据

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

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

在本文中:

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

重新绑定的方法

方法可以刷新数据重新绑定方法．使用组件引用调用重新绑定在进行数据更改(例如添加、删除项)后，请使用该方法。这是必要的，以防你不使用可观测的数据或重置集合引用．调用重新绑定将强制组件重新处理可用数据以反映更新。

@*添加/删除一个项目，并重新绑定面板栏以响应该更改。*@ 添加项目 删除第一个项目   @code {private TelerikPanelBar PanelBarRef;private List Items {get;设置;} private void AddItem(){项目。添加(new PanelBarItem() { Text = "Item 4" }); PanelBarRef.Rebind(); } private void RemoveItem() { Items.RemoveAt(0); PanelBarRef.Rebind(); } protected override void OnInitialized() { Items = GenerateData(); base.OnInitialized(); } private List GenerateData() { List collection = new List() { new PanelBarItem() { Text = "Item 1", Items = new List() { new PanelBarItem() { Text = "Item 1.1" }, new PanelBarItem() { Text = "Item 1.2", Disabled = true, Items = new List() { new PanelBarItem() { Text = "Item 1.2.1" }, new PanelBarItem() { Text = "Item 1.2.2" } } } } }, new PanelBarItem() { Text = "Item 2", Items = new List() { new PanelBarItem() { Text = "Item 2.1", Items = new List() { new PanelBarItem() { Text = "Item 2.1.1" } } }, new PanelBarItem() { Text = "Item 2.2", Url = "https://google.com" } } }, new PanelBarItem() { Text = "Item 3" } }; return collection; } public class PanelBarItem { public string Text { get; set; } public bool Disabled { get; set; } public string Url { get; set; } public List Items { get; set; } } }

可观测的数据

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

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

可观察对象集合触发CollectionChanged事件仅当添加，删除而且清晰的方法被调用。当您更改其中一个元素的字段值时，它们不会触发它。

@*添加/删除一个项目，以查看面板栏对该更改的反应。*@ @using system . collection . objectmodel 添加项目 删除第一个项目  @code {private ObservableCollection Items {get;设置;} private void AddItem(){项目。添加(new PanelBarItem() { Text = "Item 4" }); } private void RemoveItem() { Items.RemoveAt(0); } protected override void OnInitialized() { Items = GenerateData(); base.OnInitialized(); } private ObservableCollection GenerateData() { ObservableCollection collection = new ObservableCollection() { new PanelBarItem() { Text = "Item 1", Items = new List() { new PanelBarItem() { Text = "Item 1.1" }, new PanelBarItem() { Text = "Item 1.2", Disabled = true, Items = new List() { new PanelBarItem() { Text = "Item 1.2.1" }, new PanelBarItem() { Text = "Item 1.2.2" } } } } }, new PanelBarItem() { Text = "Item 2", Items = new List() { new PanelBarItem() { Text = "Item 2.1", Items = new List() { new PanelBarItem() { Text = "Item 2.1.1" } } }, new PanelBarItem() { Text = "Item 2.2", Url = "https://google.com" } } }, new PanelBarItem() { Text = "Item 3" } }; return collection; } public class PanelBarItem { public string Text { get; set; } public bool Disabled { get; set; } public string Url { get; set; } public List Items { get; set; } } }

新典藏参考

在Blazor中，框架将触发OnParametersSet事件(这是子组件如何对外部更改做出反应)，仅当它可以通过相应的参数(如数据为Telerik组件的数据源)。该检测工作原理如下:

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

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

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

@*添加/删除一个项目，以查看面板栏对该更改的反应。*@ 添加项目 删除第一个项目  @code {private List Items {get;设置;} private void AddItem(){项目。添加(new PanelBarItem() { Text = "Item 4" }); Items = new List(Items); } private void RemoveItem() { Items.RemoveAt(0); Items = new List(Items); } protected override void OnInitialized() { Items = GenerateData(); base.OnInitialized(); } private List GenerateData() { List collection = new List() { new PanelBarItem() { Text = "Item 1", Items = new List() { new PanelBarItem() { Text = "Item 1.1" }, new PanelBarItem() { Text = "Item 1.2", Disabled = true, Items = new List() { new PanelBarItem() { Text = "Item 1.2.1" }, new PanelBarItem() { Text = "Item 1.2.2" } } } } }, new PanelBarItem() { Text = "Item 2", Items = new List() { new PanelBarItem() { Text = "Item 2.1", Items = new List() { new PanelBarItem() { Text = "Item 2.1.1" } } }, new PanelBarItem() { Text = "Item 2.2", Url = "https://google.com" } } }, new PanelBarItem() { Text = "Item 3" } }; return collection; } public class PanelBarItem { public string Text { get; set; } public bool Disabled { get; set; } public string Url { get; set; } public List Items { get; set; } } }

另请参阅

• ObservableCollection
• INotifyCollectionChanged接口
• 现场演示