ASP.NET Core(2.X) MVC 视图组件的应用,例:动态加载系统菜单导航栏链接

博主在使用.NET Core做WEB项目时,为实现动态添加系统导航栏,从分部视图改用视图组件。介绍了视图组件可用于动态导航菜单等场景,还说明了创建视图组件类的方法、默认视图名称及路径,最后给出调用视图组件的相关内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

LZ最近在用.NET Core做一个WEB项目,刚好今天做到动态添加系统导航栏的地方,一开始还是按原来所学的,用分部视图,最后发现分部视图在这里,根本不进Controller中的Action,而是直接调用视图展现,查阅官方文档https://docs.microsoft.com/zh-cn/aspnet/core/mvc/views/view-components?view=aspnetcore-2.1,了解了下视图组件的用法,文档中,明确描述了可用与导航栏的制作,也提到了其它业务功能模块的应用:

视图组件可用于具有可重用呈现逻辑(对分部视图来说过于复杂)的任何位置,例如:

  • 动态导航菜单
  • 标记云(查询数据库的位置)
  • 登录面板
  • 购物车
  • 最近发布的文章
  • 典型博客上的边栏内容
  • 一个登录面板,呈现在每页上并显示注销或登录链接,具体取决于用户的登录状态

创建视图组件: 

可通过以下任一方法创建视图组件类:

  • 从 ViewComponent 派生
  • 使用 [ViewComponent] 属性修饰类,或者从具有 [ViewComponent] 属性的类派生
  • 创建名称以 ViewComponent 后缀结尾的类

与控制器一样,视图组件必须是公共、非嵌套和非抽象的类。 视图组件名称是删除了“ViewComponent”后缀的类名。 也可以使用 ViewComponentAttribute.Name 属性显式指定它。

添加 ViewComponent 类

视图组件的默认视图名称为“默认”,这意味着视图文件通常命名为“Default.cshtml”。 可以在创建视图组件结果或调用 View 方法时指定不同的视图名称。

创建一个 ViewComponents 文件夹并添加以下 PriorityListViewComponent 类(类名必须以ViewComponent为结尾):

//如果不制定Name,此视图组件Name为PriorityListViewComponent中的PriorityList
    [ViewComponent(Name = "MenuList")]
    public class PriorityListViewComponent : ViewComponent
    {
        SYSManagementBLL bLL = new SYSManagementBLL();

        public async Task<IViewComponentResult> InvokeAsync(int strGroupID)
        {
            List<SYSPageMuneModel> items = bLL.GetMenuList(strGroupID);
            //第一个参数为视图名称,如果没有,即为:“Default”,第二个参数为传到该分部视图的参数
            return View("Menu",items);
        }
    }

建议将视图文件(分部视图)命名为 Default.cshtml 并使用 Views/Shared/Components/{View Component Name}/{View Name} 路径。 此示例中使用的 MenuList视图组件对视图组件视图使用 Views/Shared/Components/MenuList/Menu.cshtml。

 调用视图组件:

 

 分部视图中的【全部】代码:

@model IEnumerable<DBModel.SYSPageMuneModel>
@*Model 就是视图组件的返回值return View("Menu",items);中的items*@
@foreach (var item in Model)
{
    @*可按实际需求写逻辑*@
    <dd><a href="@item.PageURL" target="myFrameName">@item.PageName</a></dd>
}

至此,大功告成,以上即为使用视图组件的基本设置与操作。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值