asp.net core 视图组件

一 什么是视图组件

视图组件类似于部分视图，但比部分视图更强大。视图组件不需要模型绑定，只依赖于调用组件调用时提供的数据。

 视图组件的特点：

• 渲染一块而不是整个响应

• 包含关注点分离和可测试性好处

• 可以有参数和业务逻辑

• 通常在布局页面调用

在复用显示逻辑对于部分视图来说太复杂时，这时就可以用视图组件,比如：

• 动态导航菜单
• 标签云（需要查询数据库）
• 登录界面
• 购物车
• 最近发表的文章
• 典型的博客的侧边栏内容

一个视图组件由两部分组成：

1 组件类，通常继承类ViewComponent

2 返回的结果，通常是视图

组件类可以像控制器一样可以是POCO（但通常都继承ViewComponet,以使用派生出来的属性和方法）

考虑视图组件是否满足应用的规范时，请考虑使用Razor 组件

二 使用视图组件

视图组件类

为public,非嵌套，非抽象类。

• 类的形式有三种与控制器类实现类似：

　　1 继承ViewComponent类

　　2 类使用[ViewComponent]特性

　　3 类名使用后缀“ViewComponent”

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

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

组件名

默认是组件类名除后缀“ViewComponent”部分，也可以用ViewComponentAttribute.Name指定

 

视图组件方法

视图方法有同步和异步两种形式，只能定义其中一种

形式1：返回IViewComponentResult的Invoke方法

形式2：返回Task<IViewComponentResult>的InvokeAsync方法

返回值：通常通过ViewComponent View 传递模型

如果同时定义会发生如下图异常


 参数：在调用时传递进来，不支持模型给定，因为不是它不是通过http调用

视图搜索路径

• /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。可以用View参数指定非默认视图

• 自定义搜索路径：

　　若要自定义视图搜索路径，请修改 Razor 的 ViewLocationFormats 集合。 例如，将新项添加到集合，以搜索路径“/Components/{视图组件名称}/{视图名称}”中的视图：

　　services.AddMvc().AddRazorOptions(options =>
　　{
        options.ViewLocationFormats.Add("/{0}.cshtml");
　　})
　　.SetCompatibilityVersion(CompatibilityVersion.Version_2_2);

在上面的代码中，占位符“{0}”表示路径“Components/{视图组件名称}/{视图名称}”。

调用视图组件

• 方式1

　　在视图想要显示视图组件的地方输入

 　　@await Component.InvokeAsync("视图组件名", new {param1=value,...})

　　上面代码中匿名参数会传递给视图组件方法Invoke或InvokeAsync

• 方式2

　　在ASP.NET Core 1.1 及更高版本中可以使用Tag Helper，

　　假设视图组件名为 WidgetCard，视图组件方法参数为param1,param2;调用如下所示，组件名是Pascal风格转换成如下短横线连接　

 　　<vc:widget-card param1="2" param2="false">
　　 </vc:widget-card>

　　注意：假设你的视图组件在程序集webapp，上面调用方式需要添加如下代码注册程序集

　　@addTagHelper *, webapp

• 方式3

   　　在控制器中直接调用视图组件，如下代码

　　public IActionResult IndexVC()
　　{
    　　return ViewComponent("WidgetCard", new { param1 = 2, param2 = false });
　　}