我的位置:首页 > .Net系列>ASP.NET

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

时间:2019-07-24 08:55:00 来源:互联网 作者: 神秘的大神 字体:

之前我们详细介绍过分布视图(partial view),在有一些更加复杂的场景下,.net core为我们提供了更加强大的组件 view  component.

可以认为view component是partial view的替代品。

 

我认为view component是 .net core中非常重要的一个功能,除了跟partial view类似的特征外,view component比较方便带参数和业务逻辑,一般通过layout page调用。

一些典型的应用场景如动态导航菜单,登录框,购物车等。

 

一个 view component 由两部分组成:类(继承 ViewComponent)和 渲染视图

* 或者我们可以类比成微型的 controller和view

 

详细步骤

首先我们创建一个.net core 2.2项目作为演示,如下一组图。

 

 

我们设置这么一个场景:

传递不同参数,例如 柱状图、饼状图,返回不同的图形。

* 仅作演示,我们不返回真正的图形,用文字说明代替。

 

我们利用框架自带的首页(如下图)来演示。

 

 

 

我们前面说过,一个 view component 由两部分组成:类(继承 ViewComponent)和 渲染视图,我们先来创建这个类。

一、创建 view component 类:

创建ViewComponents 文件夹,在该文件夹下添加一个类 ChartViewComponent

 

 

注意:约定大于配置,这个类以 ViewComponent结尾 ,普通的view调用它时,会将这个后缀去掉。

添加如下方法:

 

 

 

二、创建 view component 视图

1、新建文件夹: Views/Shared/Components ,约定大于配置,文件夹必须命名为Components

2、新建文件夹: Views/Shared/Components/Chart ,约定大于配置,命名必须和之前的类ChartViewComponent去掉后缀后一样,即 Chart

3、新建Razor view: Views/Shared/Components/Chart/Default.cshtml,约定大于配置,必须为Default

 

 

添加如下代码:

 

 

三、调用 view component

最后我们打开 Views/Home/Index.cshtml ,在最后面添加如下调用代码:

 

 

运行就能看到调用结果:

 

 

实用小贴士

一、直接通过controller调用调试

view component 有一个很方便的地方是可以直接通过controller调用,这样就能单独显示,方便我们调试。

我们打开 HomeController,添加如下方法,修改下参数,返回5个饼状图。

 

 

输入如下地址 xxx/home/indexvc

 

 

二、同一个 view component, 根据不同条件返回多个视图

我们可以在view component 的类方法中根据不同条件返回不同视图。

1、如下图,将Default.cshtml复制一份,修改名称 AnotherChart.cshtml

 

 

增加下图方框内容:

 

 

2、修改类方法,增加如下判断:

 

 

通过 xxx/home/indexvc 来测试,发现已经跳转到另外一个视图:

 

 

总结

一、我们不深入研究,从实用角度来说,可以把view component 简单理解为微型的 controller和 view,注意两点区别:

1、view component 的view不能直接通过 http调用

2、view component 的类方法不与她自己的view 模型绑定。典型的使用方式是:

Controller –>

调用controller的view –>

传参数调用 view component 类方法InvokeAsync –>

调用 view component 的view

 

二、现在都推荐使用异步方法,同步的方法就不演示了,和之前的controller类似。

(* 本文中因为没访问数据库,实际上还是执行时还是同步)

 

三、view component 中 view的查找顺序,按照如下优先级

1、/Views/{Controller Name}/Components/{View Component Name}/{View Name}

2、/Views/Shared/Components/{View Component Name}/{View Name}

3、/Pages/Shared/Components/{View Component Name}/{View Name}

可以看到,也能单独为每个controller建Components的文件夹,不过一般来说我们都在Shared的文件夹下面建,就不另作说明了。

 

我们推荐view component的view 命名为 Default.cshtml , 使用路径为Views/Shared/Components/{View Component Name}/{View Name}

 

祝 学习进步 :)

 

P.S. 系列文章列表:https://www.cnblogs.com/miro/p/3777960.html