ASP.NET Core MVC学习之视图组件（View Component）

2023-08-17 20:07:04 69

1.视图组件介绍

视图组件是ASP.NETCoreMVC的新特性，类似于局部视图，但它更强大。视图组件不使用模型绑定，并且仅依赖于调用它时所提供的数据。

视图组件特点：

呈块状，而不是整个响应

包括在控制器和视图之间发现的相同的关注点和可测试性优点

可以拥有参数和业务逻辑

通常从布局页面调用

视图组件可以用在任何需要重复逻辑且对局部视图来说过于复杂的情况，例如：

动态导航菜单

标签云（需要查询数据库）

登录面板

购物车

最近发表的文章

典型博客上的侧边栏内容

将在每个页面上呈现的登录面板，根据用户的登录状态显示注销或者登录的链接

视图组件有两部分组成，类（通常派生自ViewComponent）和它返回的结果（通常是一个视图）。与控制器一样，视图组件可以是POCO，但大多数是利用ViewComponent派生的方法和属性。

2.创建视图组件

(1)视图组件类

一个视图组件类通常可以通过以下任一方式创建：

派生自ViewComponent

使用[ViewComponent]属性装饰类，或从具有[ViewComponent]属性的类派生

创建一个名称后缀为ViewComponent结尾的类

像控制器一样，视图组件必须是public，非嵌套和非抽象类。视图组件名称是删除了ViewComponent后缀的类名，可以使用ViewComponentAttribute.Name属性显示指定。

视图组件类优点：

完全支持构造函数依赖注入

不参与控制器生命周期，这意味着不能在视图组件中使用过滤器

(2)视图组件方法

视图组件在InvokeAsync方法中定义其逻辑，并返回IViewComponentResult。参数直接来自视图组件的调用，而不是来自模型绑定。视图组件从不直接处理请求。通常，视图组件通过调用View方法初始化模型并将其传递给视图。总之，视图组件有以下特点：

定义一个InvokeAsync方法并返回IViewComponentResult。

通常通过调用 ViewComponentView方法初始化模型并将其传递给视图。

参数来自调用方法，而不是HTTP，没有模型绑定。

不能直接作为HTTP端点访问，它是从你的代码（通常在视图中）调用的。视图组件不处理请求。

在签名上重载，而不是当前HTTP请求的任何细节。

(3)视图搜索路径

运行时在以下路径搜索视图：

Views//Components//

Views/Shared/Components//

视图组件的默认视图名称是Default，这意味着你的视图文件通常名为Default.cshtml。你可以在创建视图组件结果或调用View方法时指定其他的视图名称。

3.调用视图组件

要使用视图组件，请从视图中调用 @Component.InvokeAsync("视图组件名称",<匿名参数>)。参数将传递到InvokeAsync方法。如下：

@awaitComponent.InvokeAsync("TopicRankList",new{days=5})

视图组件通常从视图中调用，但也可以从控制器方法中直接调用，虽然视图组件不像控制器那样定义终结点。

publicActionResultIndex()
{
returnViewComponent("TopicRankList",new{days=5});
}

4.实战视图组件

添加一个ViewCompoents文件夹，然后添加UserRankList类：

publicclassUserRankList:ViewComponent
{
privatereadonlyDataContext_db;
privateIMemoryCache_memoryCache;
privatestringcacheKey="topicrank";

publicUserRankList(DataContextdb,IMemoryCachememoryCache)
{
_db=db;
_memoryCache=memoryCache;
}

publicIViewComponentResultInvoke(intdays)
{
varitems=newList();
if(!_memoryCache.TryGetValue(cacheKey,outitems))
{
items=GetRankUsers(10,days);
}
_memoryCache.Set(cacheKey,items,TimeSpan.FromMinutes(10));
returnView(items);
}

privateListGetRankUsers(inttop,intdays)
{
return_db.User.OrderBy(o=>o.Id).Take(top).ToList();
}
}

视图组件类可以在项目的任何文件夹中。[ViewComponent]特性可以更改用于引用视图组件的名称，例如，可以命名类为XYZ，并应用[ViewComponent]特性：

[ViewComponent(Name="UserRankTop")]
publiccalssXYZ:ViewComponent

Invoke方法返回列表，然后创建视图组件视图。

创建View/Shared/Components文件夹。这个文件夹必须名为Components。然后在里面创建UserRankList文件夹，添加Default.cshtml视图：

@modelList

user

@foreach(variteminModel)
{
@item.Name
}

最后在视图中调用：@awaitComponent.InvokeAsync("UserRankList",new{days=5})

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对毛票票的支持。

ASP.NET Core MVC学习之视图组件（View Component）

user

热门推荐

随机推荐