组件/PanelBar/数据绑定

新为Blazor的Telerik UI?下载30天免费试用

数据绑定基础

本文解释了向PanelBar组件提供数据的不同方法、与数据绑定相关的属性及其结果。

有关值绑定和数据绑定的详细信息以及它们之间的区别，请参见值绑定vs数据绑定篇文章。

首先,回顾:

有两种向PanelBar提供数据的模式，它们都使用项目的特性。熟悉了本文之后，选择您希望使用的数据绑定模式:

面板栏项目功能

PanelBar项提供了以下特性，您可以通过其数据绑定中的相应字段来控制这些特性:

  • Id-字符串-项目的唯一标识符。需要绑定到平面数据。

  • ParentId-字符串-标识项目所属的父级。仅在绑定到平面数据时需要。所有的物品都是一样的ParentId将在同一层渲染。对于根级项，这必须为零．

  • HasChildren-字符串-该项目是否有子项目。确定是否在项目旁边呈现展开箭头。需要绑定到平面数据。使用分层数据，PanelBar将基于子项的存在呈现图标，但是HasChildren会优先。

  • 项目-字符串-将在当前项目下呈现的子项目集合。仅在绑定到分级数据时需要。

  • 文本-字符串-将显示在项目上的文本。

  • DisabledField-字符串—该项是否被禁用。如果一个项目被禁用，用户将无法点击它，也无法展开它。的OnItemClick如果项目被禁用，将不会被触发。

  • ImageUrl/图标/IconClass-栅格图像的URLTelerik图标，或者一个类，用于将在项目中呈现的自定义字体图标。它们有列出的优先顺序，以防数据中有多个(即一个)ImageUrl是最重要的)。

  • Url-项目将通过生成链接导航到的视图。

数据绑定

面板栏项的属性直接与组件绑定到的模型的字段匹配。您可以通过提供包含相应信息的字段的名称来提供这种关系。要做到这一点，下PanelBarBindings标记，使用PanelBarBinding标签属性。

每一个PanelBarBinding标签暴露以下引用项目属性的属性:

  • IdField => Id

  • ParentIdField => ParentId

  • TextField =>文本

  • DisabledField =>禁用

  • IconClassField => IconClass

  • IconField =>图标

  • ImageUrlField => ImageUrl

  • UrlField => Url

  • HasChildrenField => HasChildren

  • ItemsField =>项目

  • 级别—用于定义不同的级别有不同的绑定．如果没有设置级别，则将绑定作为没有显式设置的任何级别的默认值。你应该有一个TelerikPanelBarBinding没有关卡。

字段名有默认值。如果您的模型名称与默认值匹配，则不必在绑定设置中定义它们。

如果您的模型字段名称与任何默认名称匹配，组件将尝试使用它们。例如，一个名为图标会尝试从这些值中生成一个Telerik图标，这可能不是你想要的。如果您想要覆盖这些行为，您可以设置IconField = " someNonExistingField "．你可以阅读更多相关内容在这里．这也适用于其他领域。另一个例子是一个名为Url如果你想自己通过模板进行导航，你可能想设置UrlField = " someFakeField "这样组件就不会自己导航了。

如果您正在使用分层数据绑定，您的模型不能包含名为ParentId类的名称匹配的字段ParentIdFielda参数PanelBarBinding)．这将使PanelBar混淆，认为它是绑定到平面数据，因此可能没有根，您可能看不到数据。

PanelBar项绑定的默认字段名。如果使用这些，则不必在PanelBarBinding标记明确。

公共类PanelBarItem{公共int Id {get;设置;}公共字符串文本{get;设置;} public int?ParentId {get;设置;} public bool禁用{get;设置;}公共bool HasChildren {get; set; } public string Icon { get; set; } public string Url { get; set; } }

以下例子演示如何定义简单绑定以将项字段与模型匹配，以便树呈现所提供的平面数据源。

平面数据源上的样例绑定。演示如何设置属性以匹配模型。在此模型中，您必须显式指定的惟一字段名是ParentIdField，其他匹配默认值。

样本PanelBar绑定到自引用平面数据。还使用了Telerik套件的内置图标。面板栏中的项目项重定向到示例url。*@ < span style="width: 30%;">
@code {public List Items {get;设置;} public IEnumerable ExpandedItems {get;设置;} = new List();公共类PanelBarItem{公共int Id {get; set; } public string Text { get; set; } public int? ParentId { get; set; } public bool HasChildren { get; set; } public string Icon { get; set; } public string Url { get; set; } } private List LoadFlatData() { List items = new List(); items.Add(new PanelBarItem() { Id = 1, Text = "Project", ParentId = null, HasChildren = false, Icon = "folder", Url = "projectURL.url" }); items.Add(new PanelBarItem() { Id = 2, Text = "Implementation", ParentId = null, HasChildren = true, Icon = "code" }); items.Add(new PanelBarItem() { Id = 3, Text = "C#", ParentId = 2, HasChildren = false, Icon = "cs" }); items.Add(new PanelBarItem() { Id = 4, Text = "HTML 5", ParentId = 2, HasChildren = false, Icon = "html5" }); items.Add(new PanelBarItem() { Id = 5, Text = "CSS", ParentId = 2, HasChildren = false, Icon = "css" }); return items; } protected override void OnInitialized() { Items = LoadFlatData(); ExpandedItems = new List() { Items[1] }; base.OnInitialized(); } }

上面代码片段的结果

Blazor PanelBar数据绑定

多层绑定

您可以为PanelBar中不同级别的节点定义不同的绑定设置。这样，节点的子节点可以使用与其父节点不同的字段，这可能使您的应用程序更加灵活。如果你使用分层数据绑定，孩子们甚至可以使用与他们的父母不同的字段或模型。

这也允许您定义不同的内容标题和内容模板对于不同的级别。

若要定义多个绑定，请添加多个PanelBarBinding标记并定义它们的水平．

每个级别最多可以有一个绑定，没有级别时可以有一个(“默认”)绑定。如果声明了多个同级绑定，则使用第一个绑定，其余的将被忽略。

如果某个级别没有显式的数据绑定标记，它将使用没有级别的默认值。

如何使用每个级别的数据绑定设置来更改模型字段

@*为不同级别的PanelBar提供数据*@ 
     @{var item = context as PanelBarItem;< span style="font- family:宋体;文本装饰:下划线"> @item。SecondLevelText 
}      @code {public List Items {get;设置;} public IEnumerable ExpandedItems {get;设置;} = new List();公共类PanelBarItem{公共int Id {get; set; } public string Text { get; set; } public string SecondLevelText { get; set; } public int? ParentId { get; set; } public bool HasChildren { get; set; } public string Icon { get; set; } public string Url { get; set; } } private List LoadFlatData() { List items = new List(); items.Add(new PanelBarItem() { Id = 1, Text = "Project", ParentId = null, HasChildren = false, Icon = "folder", Url = "projectURL.url" }); items.Add(new PanelBarItem() { Id = 2, Text = "Implementation", ParentId = null, HasChildren = true, Icon = "code" }); items.Add(new PanelBarItem() { Id = 3, SecondLevelText = "C#", ParentId = 2, HasChildren = false, Icon = "cs" }); items.Add(new PanelBarItem() { Id = 4, SecondLevelText = "HTML 5", ParentId = 2, HasChildren = false, Icon = "html5" }); items.Add(new PanelBarItem() { Id = 5, SecondLevelText = "CSS", ParentId = 2, HasChildren = false, Icon = "css" }); return items; } protected override void OnInitialized() { Items = LoadFlatData(); ExpandedItems = new List() { Items[1] }; base.OnInitialized(); } }
         

          
提高使用时的性能平面数据绑定，所有级别的绑定应该使用相同的ParentIdField．

         

         
另请参阅

         
        
       
      
      
     
     

      

       

        在本文中

       
      

      
      

       

        相关文章

       
      

      
      

       找不到你需要的帮助?
       
       
        
        
        
         
         
          
         
        改进本文
      

     

    
   
   

   
  
  
  
  
  
  
 
Baidu