当前位置: 移动技术网 > IT编程>开发语言>.net > .Net Core组件化视图(部分视图)

.Net Core组件化视图(部分视图)

2019年12月04日  | 移动技术网IT编程  | 我要评论

牧魂者,2015首尔歌谣大赏,z8500

.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

参考地址:

 

 

 

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

验证码:
移动技术网