Blazor上下文菜单概述

的Blazor Context菜单组件在传统的类似菜单的结构中显示带有数据(平面或层次)的上下文弹出窗口。它允许您调用命令，同时保留屏幕空间。

除了内置的导航功能，您可以浏览项及其子项，定义模板对于单个节点，呈现文本和图标/图像，并对其进行响应事件。

上下文菜单组件是Blazor的Telerik UI，一个专业级的UI库，包含100个本地组件，用于构建现代和功能丰富的应用程序。想要试用它，可以注册一个30天的免费试用期。

下载免费试用

创建上下文菜单

1. 添加TelerikContextMenu标记，并设置其选择器参数设置为CSS选择器，它将匹配您想要附加上下文菜单的元素。
2. 为其提供模型集合数据财产。上下文菜单将自动识别属性名称，如Id，ParentId，文本还有其他一些。否则,使用绑定配置自定义属性名。
3. 处理OnClick事件响应用户操作。

@*使用上下文菜单执行操作*@ 
右击(或长按触摸设备)进入上下文菜单。
   @code{公共列表 MenuItems {get;设置;} async任务ClickHandler(ContextMenuItem clickkeditem) {if (!string.IsNullOrEmpty(clickedItem. commandname)){控制台。程序现在将执行{clickedItem。CommandName}操作”);}}保护覆盖空白OnInitialized(){菜单项=新列表< ContextMenuItem >(){新ContextMenuItem{文本=“更多信息”=“信息”图标,CommandName = "信息"},新ContextMenuItem{分离器= true},新的ContextMenuItem{文本=“高级”,项=新列表< ContextMenuItem >(){新ContextMenuItem{文本=“Delete”图标=“删除”,CommandName =“Delete”},新ContextMenuItem{文本=“报告”,图标=“取消”,CommandName = "报告 " } } } }; base.OnInitialized(); } public class ContextMenuItem { public string Text { get; set; } public string CommandName { get; set; } public string Icon { get; set; } public bool Separator { get; set; } public List Items { get; set; } } }

数据绑定

要显示任何项，Blazor上下文菜单需要一个数据源，您可以通过数据财产。上下文菜单允许您以平面数据和层次结构的方式显示项。阅读更多关于Blazor上下文菜单数据绑定…

每个目标定制

相同的上下文菜单可以很容易地附加到许多目标，或者您可以使用它ShowAsync (x, y)方法根据业务逻辑需求、数据和事件显式地显示它。欲知详情，请浏览集成篇文章。

导航视图

菜单通常用于列出应用程序中的页面、视图或部分，以便用户可以在其中导航。要用菜单做到这一点，你有两个选项:

• 使用内置的UrlField在绑定数据如果为给定的项目提供了URL，菜单将为您生成在锚中填充URL。本文开头提供了一个示例。
• 使用一个模板要生成所需的链接(例如，NavLink组件)使用您自己的代码来进行微调。

阅读更多关于Blazor上下文菜单导航…

图标

为了说明每个菜单项的用途，Blazor上下文菜单允许您添加图像、图标类或字体图标。阅读更多关于Blazor菜单图标…

模板

您可以使用内置模板的功能，并自定义项目中呈现的内容。阅读更多关于Blazor上下文菜单模板…

事件

上下文菜单生成您可以处理和进一步自定义其行为的事件。阅读更多关于Blazor上下文菜单事件…

菜单参数

背景信息菜单参数如下表所示，与本界面其他特性无关。检查上下文菜单API参考获取属性、方法和事件的完整列表。

菜单参考和方法

控件添加对组件实例的引用以使用菜单方法。

@*以编程方式打开和关闭ContextMenu *@ 
 normal target 
    @code { public List MenuItems { get; set; } // the context menu is a generic component and its type depends on the model it binds to TelerikContextMenu TheContextMenu { get; set; } async Task ShowContextMenu(MouseEventArgs e, bool IsSpecial) { await TheContextMenu.ShowAsync(e.ClientX, e.ClientY); } // generate sample data for the listview and the menu protected override void OnInitialized() { MenuItems = new List() { new ContextMenuItem { Text = "More Info", Metadata = "info" }, new ContextMenuItem { Text = "Special Command", Metadata = "special" } }; base.OnInitialized(); } public class ContextMenuItem { public string Text { get; set; } public string Metadata { get; set; } } } 

下一个步骤

• 将上下文菜单绑定到数据

• 处理OnClick事件的上下文菜单来响应用户的操作

另请参阅

• 数据绑定上下文菜单
• 现场演示:上下文菜单
• API参考