ASP.NET Core MVC 之视图组件(View Component)

简介: ASP.NET Core MVC 之视图组件(View Component)1.视图组件介绍  视图组件是 ASP.NET Core MVC 的新特性,类似于局部视图,但它更强大。视图组件不使用模型绑定,并且仅依赖于调用它时所提供的数据。

ASP.NET Core MVC 之视图组件(View Component)
1.视图组件介绍

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

  视图组件特点:

    呈块状,而不是整个响应

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

    可以拥有参数和业务逻辑

    通常从布局页面调用

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

    动态导航菜单

    标签云(需要查询数据库)

    登录面板

    购物车

    最近发表的文章

    典型博客上的侧边栏内容

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

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

2.创建视图组件

  (1)视图组件类

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

    派生自ViewComponent

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

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

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

  

  视图组件类优点:

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

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

  (2) 视图组件方法

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

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

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

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

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

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

  (3) 视图搜索路径

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

  Views//Components//

  Views/Shared/Components//

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

3.调用视图组件

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

@await Component.InvokeAsync("TopicRankList",new { days=5})
  视图组件通常从视图中调用,但也可以从控制器方法中直接调用,虽然视图组件不像控制器那样定义终结点。

    public ActionResult Index()
    {
        return ViewComponent("TopicRankList", new { days = 5 });
    }

4.实战视图组件

  添加一个 ViewCompoents 文件夹,然后添加 UserRankList类:

复制代码

public class UserRankList : ViewComponent
{
    private readonly DataContext _db;
    private IMemoryCache _memoryCache;
    private string cacheKey = "topicrank";

    public UserRankList(DataContext db, IMemoryCache memoryCache)
    {
        _db = db;
        _memoryCache = memoryCache;
    }

    public IViewComponentResult Invoke(int days)
    {
        var items = new List<User>();
        if (!_memoryCache.TryGetValue(cacheKey, out items))
        {
            items = GetRankUsers(10, days);
        }
        _memoryCache.Set(cacheKey,items,TimeSpan.FromMinutes(10));
        return View(items);
    }

    private List<User> GetRankUsers(int top, int days)
    {
        return _db.User.OrderBy(o => o.Id).Take(top).ToList();
    }
}

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

[ViewComponent(Name="UserRankTop")]
public calss XYZ:ViewComponent
  Invoke 方法返回列表,然后创建视图组件视图。

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

复制代码
@model List

user


@foreach (var item in Model)
{
    <label>@item.Name</label>
}


复制代码
  最后在视图中调用:@await Component.InvokeAsync("UserRankList", new { days=5})

原文地址https://www.cnblogs.com/afei-24/p/11317885.html

相关文章
|
2月前
|
监控 前端开发 API
一款基于 .NET MVC 框架开发、功能全面的MES系统
一款基于 .NET MVC 框架开发、功能全面的MES系统
|
5月前
|
开发框架 前端开发 JavaScript
ASP.NET MVC 教程
ASP.NET 是一个使用 HTML、CSS、JavaScript 和服务器脚本创建网页和网站的开发框架。
72 7
|
5月前
|
存储 开发框架 前端开发
ASP.NET MVC 迅速集成 SignalR
ASP.NET MVC 迅速集成 SignalR
114 0
|
6月前
|
开发框架 前端开发 .NET
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
ASP.NET MVC WebApi 接口返回 JOSN 日期格式化 date format
85 0
|
6月前
|
开发框架 前端开发 安全
ASP.NET MVC 如何使用 Form Authentication?
ASP.NET MVC 如何使用 Form Authentication?
102 0
|
6月前
|
开发框架 .NET
Asp.Net Core 使用X.PagedList.Mvc.Core分页 & 搜索
Asp.Net Core 使用X.PagedList.Mvc.Core分页 & 搜索
187 0
|
9月前
|
开发框架 前端开发 .NET
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
246 0
|
9月前
|
开发框架 前端开发 JavaScript
JavaScript云LIS系统源码ASP.NET CORE 3.1 MVC + SQLserver + Redis医院实验室信息系统源码 医院云LIS系统源码
实验室信息系统(Laboratory Information System,缩写LIS)是一类用来处理实验室过程信息的软件,云LIS系统围绕临床,云LIS系统将与云HIS系统建立起高度的业务整合,以体现“以病人为中心”的设计理念,优化就诊流程,方便患者就医。
97 0
|
9月前
|
开发框架 前端开发 .NET
C# .NET面试系列六:ASP.NET MVC
<h2>ASP.NET MVC #### 1. MVC 中的 TempData\ViewBag\ViewData 区别? 在ASP.NET MVC中,TempData、ViewBag 和 ViewData 都是用于在控制器和视图之间传递数据的机制,但它们有一些区别。 <b>TempData:</b> 1、生命周期 ```c# TempData 的生命周期是短暂的,数据只在当前请求和下一次请求之间有效。一旦数据被读取,它就会被标记为已读,下一次请求时就会被清除。 ``` 2、用途 ```c# 主要用于在两个动作之间传递数据,例如在一个动作中设置 TempData,然后在重定向到另
410 5
|
存储 开发框架 前端开发
[回馈]ASP.NET Core MVC开发实战之商城系统(五)
经过一段时间的准备,新的一期【ASP.NET Core MVC开发实战之商城系统】已经开始,在之前的文章中,讲解了商城系统的整体功能设计,页面布局设计,环境搭建,系统配置,及首页【商品类型,banner条,友情链接,降价促销,新品爆款】,商品列表页面,商品详情等功能的开发,今天继续讲解购物车功能开发,仅供学习分享使用,如有不足之处,还请指正。
186 0

热门文章

最新文章