ASP.NET Core 使用 ViewComponent 视图组件教程

小渣渣

在大量页面调用同一个视图结果的时候，我们可以把相同的内容封装成视图组件，当然，也可以向视图组件传入参数，返回响应结果，场景：排行榜、表单、表格等，本文使用 asp.net core 3.1 讲解如何使用 ViewComponent 视图组件教程。

View components

视图组件类似于局部视图，但是功能更强大。视图组件不使用模型绑定，而仅依赖于调用模型时提供的数据。本文是使用控制器和视图编写的，但是视图组件也可以与Razor Pages一起使用。

视图组件：

• 呈现块而不是整个响应。
• 包括在控制器和视图之间发现的相同的关注点分离和可测试性好处。
• 可以具有参数和业务逻辑。
• 通常从布局页面调用。
  

视图组件可用于您具有可重用的渲染逻辑的任何地方，这些渲染逻辑对于局部视图而言过于复杂，例如：

• 动态导航菜单
• 标签云（查询数据库的地方）
• 登录面板
• 购物车
• 最近发表的文章
• 典型博客上的侧边栏内容
• 登录面板将显示在每个页面上，并显示注销或登录的链接，具体取决于用户的登录状态
  

局部视图

asp.net mvc利用RenderAction局部视图加载动态数据
https://www.itsvse.com/thread-4828-1-1.html

在 asp.net mvc 5 中，我们可以使用局部视图，代码如下：

登录可见。

调用方式：

登录可见。

ViewComponent 就是替代局部视图的功能。

ViewComponent 入门

视图组件类：

• 完全支持构造函数依赖注入
• 不参与控制器的生命周期，这意味着您不能在视图组件中使用过滤器
• 废话少说，直接开始，我们要封装一个城市区域分类的组件功能。
  

首先，在项目目录下面新建一个 “ViewComponents” 文件夹，新建一个 “RootClassification.cs” 类文件，代码如下：

登录可见。

视图页面，我们在项目 “/Views/Shared” 文件夹下面，新建一个 “Components” 文件夹，接着再新建一个 “RootClassification” 文件夹（这里是和我们新建的组件类要对象起来），再新建一个 “Default.cshtml” 文件，代码如下：

登录可见。

结构如下：



详细路径为：/Views/Shared/Components/RootClassification/Default.cshtml

为什么要建这样的路径呢？这是和 asp.net core 组件的运行机制有关系。

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

/Views/{Controller Name}/Components/{View Component Name}/{View Name}
/Views/Shared/Components/{View Component Name}/{View Name}
/Pages/Shared/Components/{View Component Name}/{View Name}

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

调用，我们在需要使用该组件的地方调用即可，代码如下：

登录可见。

重新运行项目，效果图如下：

fessicon

回复才能看代码？

小渣渣

ASP.NET Core 中的视图组件
https://learn.microsoft.com/zh-c ... ews/view-components