asp.net core 视图组件（转）

介绍视图组件

视图组件是 ASP.NET Core MVC 中的新特性，与局部视图相似，但是它们更加的强大。视图组件不使用模型绑定，只取决于调用它时所提供的数据。视图组件有以下特点：

  • 渲染一个块，而不是整个响应
  • 在控制器和视图之间同样包含了关注点分离和可测试性带来的好处
  • 可以拥有参数和业务逻辑
  • 通常从布局页调用

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

  • 动态导航菜单
  • 标签云 (需要从数据库查询时)
  • 登录面板
  • 购物车
  • 最近发表的文章
  • 一个典型博客的侧边栏内容
  • 会在所有页面渲染的登录面板，根据用户登录状态显示登录或者注销

一个 视图组件 包含两个部分，类（通常派生自 ViewComponent ）和它返回的结果（通常是一个视图）。类似控制器，视图组件可以是 POCO 类型，但是大部分开发者想要使用派生自 ViewComponent 的方法和属性。

创建视图组件

这个章节包含创建视图组件的高级需求。在稍后的文章中，我们将详细地检查每一个步骤，并创建一个视图组件。

视图组件类

一个视图组件类可以由以下任何一个方式创建：

  • 派生自 ViewComponent
  • 使用 [ViewComponent] 特性装饰一个类，或者这个类的派生类。
  • 创建一个类，并以 ViewComponent 作为后缀。

如同控制器一样，视图组件必须是公开的，非嵌套的，以及非抽象的类。视图组件名称是类名并去掉“ViewComponent”后缀。也可以通过 ViewComponentAttribute.Name 属性进行明确的指定。

一个视图组件类：

  • 完全支持构造函数依赖注入
  • 不参与控制器生命周期，意味着你不能在视图组件中使用过滤器

视图组件方法

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

  • 定义一个 InvokeAsync 方法并返回 IViewComponentResult
  • 通常初始化模型并通过调用ViewComponent View方法传递它到视图
  • 参数来自调用方法，而不是 HTTP，没有模型绑定
  • 不可直接作为 HTTP 终结点，它们从你的代码中调用（通常在视图中）。视图组件从不处理请求
  • 重载的签名，而不是当前 HTTP 请求中的任何细节

视图搜索路径

运行时对视图的搜索路径如下：

  • Views/<controller_name>/Components/<view_component_name>/<view_name>
  • Views/Shared/Components/<view_component_name>/<view_name>

视图组件默认的视图名是 Default，意味着通常你的视图文件会命名为 Default.cshtml。当你创建视图组件结果或者调用 View 方法的时候，你可以指定不同的视图名。

我们建议你命名视图文件为 Default.cshtml 并且使用 Views/Shared/Components/<view_component_name>/<view_name> 路径。在这个例子中使用的 PriorityList 视图组件使用了 Views/Shared/Components/PriorityList/Default.cshtml 这个路径。

调用视图组件

要使用视图组件，从视图中调用 @Component.InvokeAsync("视图组件名", <匿名类型参数>)。参数将传递给 InvokeAsync 方法。在文章中开发的 PriorityList 视图组件被 Views/Todo/Index.cshtml 视图文件调用。在下面，使用了两个参数调用 InvokeAsync 方法：

@await Component.InvokeAsync("PriorityList", new { maxPriority = 2, isDone = false })

从控制器直接调用视图组件

视图组件通常从视图中调用，但是你也可以从控制器方法中直接调用。当视图组件没有像控制器一样定义终结点时，你可以简单实现一个控制器的 Action ，并使用一个 ViewComponentResult作为返回内容。

在这例子中，视图组件通过控制器直接调用：

 public IActionResult IndexVC()
  {
      return ViewComponent("PriorityList", new { maxPriority = 3, isDone = false });
  }

演练：创建一个简单的视图组件

下载，生成并测试启动代码。这是一个简单的项目，使用一个 Todo 控制器来显示 Todo 项列表。

添加一个视图组件类

创建一个 ViewComponents 文件夹并添加下面的 PriorityListViewComponent 类。

using Microsoft.AspNet.Mvc;
using Microsoft.Data.Entity;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using ViewComponentSample.Models;

namespace ViewComponentSample.ViewComponents
{
    public class PriorityListViewComponent : ViewComponent
    {
        private readonly ToDoContext db;

        public PriorityListViewComponent(ToDoContext context)
        {
            db = context;
        }

        public async Task<IViewComponentResult> InvokeAsync(
        int maxPriority, bool isDone)
        {
            var items = await GetItemsAsync(maxPriority, isDone);
            return View(items);
        }
        private Task<List<TodoItem>> GetItemsAsync(int maxPriority, bool isDone)
        {
            return db.ToDo.Where(x => x.IsDone == isDone &&
                                 x.Priority <= maxPriority).ToListAsync();
        }
    }
}

代码注释：

  • 视图组件类可以被放在项目中 任何 文件夹内。
  • 因为类命名为 PriorityListViewComponent，以 ViewComponent 作为后缀结束，在运行时会从视图中使用 "PriorityList" 字符串来引用组件类。我会在后面详细解释。
  • [ViewComponent] 特性可以改变被用来引用视图组件的名字。比如，我们可以命名类为 XYZ，然后应用 ViewComponent 特性：
[ViewComponent(Name = "PriorityList")]
public class XYZ : ViewComponent
  • 上面的 [ViewComponent] 特性告知视图组件选择器在寻找与组件相关的视图时使用名字 PriorityList，并且在从视图中引用组件类时使用 "PriorityList" 字符串。我会在后面详细解释。
  • 组件使用依赖注入使得数据上下文可用。
  • InvokeAsync 暴露一个可以在视图中调用的方法，并且它可以接受任意数量的参数。
  • InvokeAsync 方法返回没有完成并优先级小于等于 maxPriority 的 ToDo 项的集合。

创建视图组件 Razor 视图

  1. 创建 Views/Shared/Components 文件夹。这个文件夹 必须 命名为 Components。
  2. 创建 Views/Shared/Components/PriorityList 文件夹。这个文件夹必须和视图组件类名字匹配，或者是类名去掉后缀（如果我们遵循了约定并且使用 ViewComponent 作为类名后缀）。如果你使用 ViewComponent 特性，类名需要匹配特性中指定的名字。
  3. 创建一个 Views/Shared/Components/PriorityList/Default.cshtml Razor 视图。
@model IEnumerable<ViewComponentSample.Models.TodoItem>

<h3>Priority Items</h3>
<ul>
    @foreach (var todo in Model)
    {
        <li>@todo.Name</li>
    }
</ul>

Razor 视图取一组 TodoItem 并显示它们。如果视图组件的 InvokeAsync 方法没有传递视图名（就像我们例子中），按照约定会使用 Default 作为视图名。在教程的后面部分，我会告诉你如何传递视图的名称。为特定控制器重写默认的样式，添加一个视图到特定控制器的视图文件夹（比如 Views/Todo/Components/PriorityList/Default.cshtml）。

如果视图组件是特定控制器的，你可以添加到特定控制器文件夹（Views/Todo/Components/PriorityList/Default.cshtml）。

  1. 在 Views/Todo/index.cshtml 文件底部添加一个 div 包含调用 PriorityList 组件：
  }
</table>
<div >
    @await Component.InvokeAsync("PriorityList", new { maxPriority = 2, isDone = false })
</div>

标记 @Component.InvokeAsync 展示了调用视图组件的语法。第一个参数是我们想要调用的组件名。随后的参数传递给组件。InvokeAsync 可以接受任意数量的参数。

下面的图片显示了 Priority 项：

你也可以从控制器直接调用视图组件：

public IActionResult IndexVC()
{
    return ViewComponent("PriorityList", new { maxPriority = 3, isDone = false });
}

指定视图名

一个复杂的视图组件在某些条件下可能需要指定非默认的视图。下面的代码展示如何从 InvokeAsync 方法中指定 "PVC" 视图。更新 PriorityListViewComponent 类中的 InvokeAsync 方法。

public async Task<IViewComponentResult> InvokeAsync(int maxPriority, bool isDone)
{
    string MyView = "Default"; // 手动高亮
    // If asking for all completed tasks, render with the "PVC" view. // 手动高亮
    if (maxPriority > 3 && isDone == true) // 手动高亮
    {   // 手动高亮
        MyView = "PVC"; // 手动高亮
    }   // 手动高亮
    var items = await GetItemsAsync(maxPriority, isDone);
    return View(MyView, items);
}

复制 Views/Shared/Components/PriorityList/Default.cshtml 文件到一个视图中并命名为 Views/Shared/Components/PriorityList/PVC.cshtml。添加一个标题到 PVC 视图来表明正在使用此视图。

@model IEnumerable<ViewComponentSample.Models.TodoItem>

<h2> PVC Named Priority Component View</h2> // 手动高亮
<h4>@ViewBag.PriorityMessage</h4>
<ul>
    @foreach (var todo in Model)
    {
        <li>@todo.Name</li>
    }
</ul>

更新 Views/TodoList/Index.cshtml

</table>

<div>
    @await Component.InvokeAsync("PriorityList", new { maxPriority = 4, isDone = true })
</div>

运行应用程序并验证 PVC 视图。

如果 PVC 视图没有渲染，请验证你是否使用 4 或者更高 priority 参数来调用视图组件。

检查视图路径

  1. 改变 priority 参数到 3 或者更低，使得不返回优先级视图。
  2. 暂时重命名 Views/Todo/Components/PriorityList/Default.cshtml 为 Temp.cshtml。
  3. 测试应用程序，你将得到以下错误：

    An unhandled exception occurred while processing the request.

    InvalidOperationException: The view ‘Components/PriorityList/Default‘
    was not found. The following locations were searched:
    /Views/ToDo/Components/PriorityList/Default.cshtml
    /Views/Shared/Components/PriorityList/Default.cshtml.
    Microsoft.AspNetCore.Mvc.ViewEngines.ViewEngineResult.EnsureSuccessful()

  4. 复制 Views/Shared/Components/PriorityList/Default.cshtml 到 Views/Todo/Components/PriorityList/Default.cshtml。
  5. 添加一些标记到 Todo 视图组件视图来表明视图是来自 Todo 文件夹。
  6. 测试 非共享 组件视图。

避免魔法字符串

如果你想编译时安全你可以用类名替换硬编码视图组件名。创建视图组件不以 "ViewComponent" 作为后缀：

using Microsoft.AspNet.Mvc;
using Microsoft.Data.Entity;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using ViewComponentSample.Models;

namespace ViewComponentSample.ViewComponents
{
    public class PriorityList : ViewComponent // 手动高亮
    {
        private readonly ToDoContext db;

        public PriorityList(ToDoContext context) // 手动高亮
        {
            db = context;
        }

        public async Task<IViewComponentResult> InvokeAsync(
        int maxPriority, bool isDone)
        {
            var items = await GetItemsAsync(maxPriority, isDone);
            return View(items);
        }
        private Task<List<TodoItem>> GetItemsAsync(int maxPriority, bool isDone)
        {
            return db.ToDo.Where(x => x.IsDone == isDone &&
                                 x.Priority <= maxPriority).ToListAsync();
        }
    }
}

添加一个 using 语句到你的 Razor 视图文件并使用 nameof 操作符：

@using ViewComponentSample.Models
@using ViewComponentSample.ViewComponents
@model IEnumerable<TodoItem>

<h2>ToDo nameof</h2>
<!-- Markup removed for brevity.  -->
    }
</table>

<div>

    @await Component.InvokeAsync(nameof(PriorityList), new { maxPriority = 4, isDone = true })
</div>

文章来源：https://www.cnblogs.com/dotNETCoreSG/p/aspnetcore-4_3_9-view-component.html

原文地址：https://www.cnblogs.com/kerwincui/p/9686143.html

时间： 2024-10-06 07:02:30

asp.net core 视图组件（转）的相关文章

ASP.NET Core 视图 - ASP.NET Core 基础教程 - 简单教程，简单编程

原文:ASP.NET Core 视图 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 视图 花了几章节,终于把 ASP.NET Core MVC 中的 C 控制器涉及的七七八八了,本章节我们来学习下 V,也就是视图部分. ASP.NET Core MVC 应用程序中,没有任何内容像页面,并且在 URL 中指定路径时, 它也不包含与页面直接对应的任何内容. ASP.NET Core MVC 应用程序中最接近页面的东西被称为视图 是不是很拗口,哈哈,页面就是

12.ASP.NET Core 中间件组件

这篇文章中,我将带领大家一起详细学习:ASP.NET Core Middleware Components.这篇文章中,我将详细讨论下面几个问题: 什么是ASP.NET Core 中的中间件组件? ASP.NET Core应用程序中,在哪里来使用中间件组件? 怎样来配置ASP.NET Core 应用程序中的中间件组件? 使用中间件组件的例子有哪些? ASP.NET Core应用程序中,中间件组件执行的顺序是? 什么是ASP.NET Core中间件组件? ASP.NET Core中间件组件就是组装

ASP.NET Core 入门教程 2、使用ASP.NET Core MVC框架构建Web应用

原文:ASP.NET Core 入门教程 2.使用ASP.NET Core MVC框架构建Web应用 一.前言 1.本文主要内容 使用dotnet cli创建基于解决方案(sln+csproj)的项目 使用Visual Studio Code开发基于解决方案(sln+csproj)的项目 Visual Studio Code Solution插件( vscode-solution-explorer)基础使用介绍 基于 .NET Core web项目模板构建 ASP.NET Core MVC We

你真的了解ASP.NET Core 部署模型吗？

原文:你真的了解ASP.NET Core 部署模型吗? ----------------------------   以下内容针对 ASP.NET Core2.1,2.2出现IIS进程内寄宿 暂不展开讨论-------------------------- 相比ASP.NET,ASP.NET Core 2.1出现了3个新的组件:ASP.NET Core Module.Kestrel.dotnet.exe, 后面我们会理清楚这三个组件的作用和组件之间的交互原理. ASP.NET Core 设计的初

Linux中以单容器部署Nginx+ASP.NET Core

引言 正如前文提到的,强烈推荐在生产环境中使用反向代理服务器转发请求到Kestrel Http服务器,本文将会实践将Nginx --->ASP.NET Core 部署架构容器化的过程. Nginx->ASP.NET Coe部署架构容器化 在Docker中部署Nginx--->ASP.NETCore 有两种选择, 第一种是在单容器内部署Nginx+ASP.NET Core, 这是本文着重要讲述的,另外一种是以独立容器分别部署Nginx和ASP.NET Core,容器之间通过Docker内建

ASP.NET Core Razor 视图组件

视图组件简介 在新的ASP.NET Core MVC中,视图组件类似于局部视图,但它们更强大.视图组件不使用模型绑定,仅依赖于您在调用时提供的数据. 视图组件特性: 呈现页面响应的某一部分而不是整个响应 包括在控制器和视图之间发现的关注分离和可测试性优势 可以具有参数和业务逻辑 通常在页面布局中调用 视图组件是在任何地方可重用的呈现逻辑,对于局部视图来说相对复杂,例如: 动态导航菜单 标签云(查询数据库) 登录面板 购物车 最近发表的文章 典型博客上的侧边栏内容 将在每个页面上呈现的登录面板,并

ASP.NET Core中使用Razor视图引擎渲染视图为字符串

一.前言 在有些项目需求上或许需要根据模板生产静态页面,那么你一样可以用Razor语法去直接解析你的页面从而把解析的页面生成静态页,这样的使用场景很多,不限于生成静态页面,视图引擎为我们提供了模型到视图的代码或文本生成的能力. 本文章中采用的是ASP.NET Core MVC原生的方法:当然我在YOYOFx中也实现了这种视图引擎 ( https://github.com/maxzhang1985/YOYOFx/blob/master/AspNetCore/YOYO.AspNetCore.View

asp.net core系列 41 Web 应用 MVC视图

一.MVC视图 在Web开发的MVC和Razor中,都有使用视图,在Razor中称为"页"..cshtml视图是嵌入了Razor标记的HTML模板. Razor 标记使用C#代码,用于与HTML 标记交互以生成发送给客户端的网页.在MVC目录结构中,Views / [ControllerName] 文件夹下用于创建视图,其中Views/Shared 文件夹下的视图是控制器共享的视图. 1.1  视图页Razor 标记 下面是Views/Home 文件夹中创建一个 About.cshtm

ASP.NET Core MVC 视图

ASP.NET Core MVC中视图的知识和ASP.NET MVC有很多相似之处,学习难度较低.以下内容主要体现了编程中模块化的思想,模块化才应是我们关注的重点. Layout 布局用于提供各个页面所需的公共部分,如:菜单.页头.页尾等.在ASP.NET Core中默认的布局文件是位于/Views/Shared文件夹下的_Layout.cshtml文件: 我们通常在_Layout.cshtml中引入公共资源,如: <link href="~/css/reset.css" rel