.Net Core组件化视图（部分视图）

.Net Core组件化视图（部分视图）

1.背景

     1.以前我们使用.Net的时候使用部分视图的方式在，.Net Core 中能在单独处理逻辑的部分视图没有了，但是我们还是想使用现在的.Net Core换了一种方式，将视图组件化了。

2.视图组件介绍

   1.可以将我们的视图重复的部分分离出来，达到可复用。

    2.可以编写业务逻辑，参数传递，单独测试，使用简单。

    3.将复杂的页面，简单化。

3.视图组件特点

   1.派生自ViewComponent使用 [ViewComponent] 属性装饰类，或从具有 [ViewComponent] 属性的类派生像控制器一样，视图组件必须是 public ，非嵌套和非抽象类。

      视图组件名称是删除了 ViewComponent 后缀的类名，可以使用 ViewComponentAttribute.Name 属性显示指定。

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

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

    总之，视图组件有以下特点：

1.   定义一个 InvokeAsync 方法并返回 IViewComponentResult。
2.  通常通过调用  ViewComponent View 方法初始化模型并将其传递给视图。
3.  参数来自调用方法，而不是 HTTP，没有模型绑定。
4. 不能直接作为 HTTP 端点访问，它是从你的代码（通常在视图中）调用的。视图组件不处理请求。
5. 在签名上重载，而不是当前 HTTP 请求的任何细节。

4.视图组件路径

 

     /Views/Home/Components/Header/Index.cshtml

     /Views/Shared/Components/Header/Index.cshtml

     /Pages/Shared/Components/Header/Index.cshtml

     1.只能放在这3个位置，规则在下面。

　　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>

 

这个就是放错了，提示我放到正确的位置。

5.视图组件的使用

      1.后台代码

　　　　视图组件类可以在项目的任何文件夹中。 [ViewComponent] 特性可以更改用于引用视图组件的名称。

[ViewComponent(Name = "Header")]
    public partial class HeaderController : ViewComponent
    {
        //调用异步方法
        public async Task<IViewComponentResult> InvokeAsync(int id) {
            //返回参数，Inex是自己定义的视图名称，如果没有就是default
            //第二个是返回参数，和之前的view()的参数一样。
            return  View("Index",id);
        }
    }

　　　　继承于ViewComponent返回IViewComponentResult。

         还可以这样

        /// <summary>
        /// 控制器调用
        /// </summary>
        /// <returns></returns>
        public IActionResult Info() {
            return ViewComponent("Header", 5);
        }

        2.前台代码

@await Component.InvokeAsync("Header", new { id=123})

效果

 

 

 

 

参考代码：https://gitee.com/D_C_L/Test_ViewComponent.git

参考地址： https://www.cnblogs.com/afei-24/p/11317885.html