View Component

View Component

在之前的MVC中,我们经常需要类似一种小部件的功能,通常我们都是使用Partial View来实现,因为MVC中没有类似Web Forms中的WebControl的功能。但在MVC6中,这一功能得到了极大的改善。新版MVC6中,提供了一种叫做View Component的功能。

你可以将View Component看做是一个mini的Controller——它只负责渲染一小部分内容,而非全部响应,所有Partial View能解决的问题,你都可以使用View Component来解决,比如:动态导航菜单、Tag标签、登录窗口、购物车、最近阅读文章等等。

View Component包含2个部分,一部分是类(继承于ViewComponent),另外一个是Razor视图(和普通的View视图一样)。就像新版MVC中的Controller一样,ViewComponent也可以使POCO的(即不继承ViewComponent类,但类名以ViewComponent结尾)。

View Component的创建

目前,View Component类的创建方式有如下三种:

  1. 直接继承于ViewComponent
  2. 给类加上ViewComponent特性,或继承于带有ViewComponent特性的类
  3. 创建一个类,类名以ViewComponent结尾

和Controller一样,View Component必须是public的,不能嵌套,不能是抽象类。

举例来说,我们创建一个View Component,类名为TopListViewComponent,代码如下:

public class TopListViewComponent : ViewComponent
{
    private readonly ApplicationDbContext db;

    public TopListViewComponent(ApplicationDbContext context)
    {
        db = context;
    }

    public IViewComponentResult Invoke(int categoryId, int topN)
    {
        List<string> col = new List<string>();
        var items = db.TodoItems.Where(x => x.IsDone == false &&
                                            x.categoryId == categoryId).Take(topN);

        return View(items);
    }
}

上述类,也可以定义成如下这样:

[ViewComponent(Name = "TopList")]
public class TopWidget
{
    // 其它类似
}

通过在TopWidget类上定义一个名称为TopList的ViewComponent特性,其效果和定义TopListViewComponent类一样,系统在查找的时候,都会认可,并且在其构造函数中通过依赖注入功能提示构造函数中参数的类型实例。

Invoke方法是一个约定方法,可以传入任意数量的参数,系统也支持InvokeAsync方法实现异步功能。

View Component的视图文件创建

以在ProductController的视图里调用View Component为例,我们需要在Views\Product文件夹下创建一个名称为Components的文件夹(该文件夹名称必须为Components)。

然后在Views\Product\Components文件夹下创建一个名称为TopList 的文件夹(该文件夹名称必须和View Component名称一致,即必须是TopList)。

Views\Product\Components\TopList文件夹下,创建一个Default.cshtml视图文件,并添加如下标记:

@model IEnumerable<BookStore.Models.ProductItem>

<h3>Top Products</h3>
<ul>
    @foreach (var todo in Model)
    {
        <li>@todo.Title</li>
    }
</ul>

如果再View Component中,没有指定视图的名称,将默认为Default.cshtml视图。

至此,该View Component就创建好了,你可以在Views\Product\index.cshtml视图中的任意位置调用该View Component,比如:

  <div class="col-md-4">
    @Component.Invoke("TopList", 1, 10)
  </div>

如果在上述TopListViewComponent中定义的是异步方法InvokeAsync的话,则可以使用@await Component.InvokeAsync()方法来调用,这两个方法的第一个参数都是TopListViewComponent的名称,剩余的参数则是在TopListViewComponent类中定义的方法参数。

注意:一般来说,View Component的视图文件都是添加在Views\Shared文件夹的,因为一般来说ViewComponent不会特定于某个Controller。

使用自定义视图文件

一般来说,如果要使用自定义文件,我们需要在Invoke的方法返回返回值的时候来指定视图的名称,示例如下:

return View("TopN", items);

那么,就需要创建一个Views\Product\Components\TopN.cshtml文件,而使用的时候则无需更改,还是指定原来的View Component名称即可,比如:

@await Component.InvokeAsync("TopList",  1, 10)  //以异步调用为例

总结

一般来说,建议在通用的功能上使用View Component的功能,这样所有的视图文件都可以放在Views\Shared文件夹了。

同步与推荐

本文已同步至目录索引:解读ASP.NET 5 & MVC6系列

时间: 2024-12-18 22:52:13

View Component的相关文章

解读ASP.NET 5 &amp; MVC6系列(14):View Component

原文:解读ASP.NET 5 & MVC6系列(14):View Component 在之前的MVC中,我们经常需要类似一种小部件的功能,通常我们都是使用Partial View来实现,因为MVC中没有类似Web Forms中的WebControl的功能.但在MVC6中,这一功能得到了极大的改善.新版MVC6中,提供了一种叫做View Component的功能. 你可以将View Component看做是一个mini的Controller--它只负责渲染一小部分内容,而非全部响应,所有Parti

(初识MVC Core)七、复用的View:View Component

1.优点: 1)相当于PartialView + 一个小型轻量级的Controller(注:PartialView无法包含业务逻辑) 2)适用于较为复杂业务 3)可以使用Razor语法 2.创建View Component 结构: 1)创建ViewComponents文件夹.MovieCountViewComponent.cs using CoreModel; using CoreModelTwo.Services; using Microsoft.AspNetCore.Mvc; using S

MVC+EFCore 完整教程18 -- 升级分布视图至 View Component

之前我们详细介绍过分布视图(partial view),在有一些更加复杂的场景下,.net core为我们提供了更加强大的组件 view  component. 可以认为view component是partial view的替代品. 我认为view component是 .net core中非常重要的一个功能,除了跟partial view类似的特征外,view component比较方便带参数和业务逻辑,一般通过layout page调用. 一些典型的应用场景如动态导航菜单,登录框,购物车等

[React Native] Complete the Notes view

In this final React Native lesson of the series we will finalize the Notes view component and squash a few bugs in the code. import firebase from 'firebase'; import React from 'react'; import { View, StyleSheet, Text, ListView, TextInput, TouchableHi

利用View静态画图

you should consider creating a custom View component and drawing with a Canvas in View.onDraw(). The most convenient aspect of doing so is that the Android framework will provide you with a pre-defined Canvas to which you will place your drawing call

ASP.NET 5系列教程 (三):view components介绍

在ASP.NET MVC 6中,view components (VCs) 功能类似于虚拟视图,但是功能更加强大. VCs兼顾了视图和控制器的优点,你可以把VCs 看作一个Mini 控制器.它负责控制应用中的某一功能模块,例如: 动态导航菜单 标签云 登录面板 购物车 最近文章 博客侧边栏 假如使用VC 创建了登录面板,可以在很多场景中调用,例如: 用户没有登录 用户已登录,需要退出使用其他帐号登录或者管理其他帐号. 如果当前登录角色为管理员,渲染管理员登录面板 你可以根据用户的需求获取数据进行

一起脱去小程序的外套和内衣 - 微信小程序架构解析

版权声明:本文由渠宏伟  原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/760767001484042227 来源:腾云阁 https://www.qcloud.com/community 作者介绍: 渠宏伟,腾讯高级工程师,从事Web前端开发5年,先后负责企鹅电竞.腾讯视频VIP.腾讯OA开发框架.腾讯微信HR助手等项目.对Web前端架构..NET架构有丰富的经验. 微信小程序的公测掀起了学习小程序开发的浪潮,天生跨

自定义视图

1.创建一个视图类实现spring的View接口,并且把视图类用@Component注解为sprinmvc组建(重要) package com.hy.springmvc.views; import java.util.Map; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.springframework.stereotype.Compo

CSS Modules如何使用?

本文和大家分享的主要是CSS Modules的相关内容,一起来看看吧,希望对大家学习css有所帮助. 什么是css模块化? 为了理解css模块化思想,我们首先了解下,什么是模块化,在百度百科上的解释是,在系统的结构中,模块是可组合.分解和更换的单元.模块化是一种处理复杂系统分解成为更好的可管理模块的方式.它可以通过在不同组件设定不同的功能,把一个问题分解成多个小的独立.互相作用的组件,来处理复杂.大型的软件.看完模块化,是不是有种拼图的即视感,可以把大图分成各个小图,然后把小图拼成大图,分与合的