Asp.net core 学习笔记 ( ViewComponent 组件 )

2021-05-16 04:28

阅读：627

标签：res 不同的学习笔记添加升级 code 组件 var tag

refer : https://docs.microsoft.com/en-us/aspnet/core/mvc/views/view-components

core 和 Angular 的 component 是不同的.

core 的 component 只是对 partial view 的升级而已.

从前 partial view 只是一个 view 的封装, component 则是 controller + view 的封装

所以方便一些.

首先定义一个 class 继承 ViewComponent, component 的名字就是 class name, 当然我们也可以改它,

[Area("Web")]
[ViewComponent(Name = "keatkeat")] //修改 name 
public class MyHeader : ViewComponent
{
    private DB db { get; set; }

    public MyHeader(
        DB db
    )
    {
        this.db = db;
    }

    public Task InvokeAsync(string value) //调用时可以传参哦 
    {
        var vm = new ViewModel
        {
            name = value
        };
        return Task.FromResult(View(vm));
    }
}

调用

@addTagHelper *, Project@{ var value = "keatkeat87"; }
@await Component.InvokeAsync("keatkeat",value)
@await Component.InvokeAsync(nameof(Project.Web.ViewComponents.MyHeader.MyHeader),value)
vc:keatkeat value="@value" >vc:keatkeat>

上面有 3 种调用的方式

第一种是写入 component 名字

第二种是通过 nameof 找到 class, 如果你修改了名字, 那么这个调用是会坏掉的哦.

第三种是通过 element 模式 (需要在 _ViewImports.cshtml 添加 @addTagHelper *, Project, Project 是我项目的名字, 直接放整个项目 assembly 就可以了)

ViewComponent 的模板和一般的 controller 查找不同, 一般的 controller View name 是 Index.cshtml

而 ViewComponent 则是 Components/ComponentName/Default.cshtml

Asp.net core 学习笔记 ( ViewComponent 组件 )

标签：res 不同的学习笔记添加升级 code 组件 var tag

原文地址：http://www.cnblogs.com/keatkeat/p/7749315.html

上一篇：HTTP协议（持续更新）

下一篇：【初学者必读】能让你月薪过万的5大web前端核心技能

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：Asp.net core 学习笔记 ( ViewComponent 组件 )
文章链接：http://soscw.com/index.php/essay/86093.html

亲，登录后才可以留言！

Asp.net core 学习笔记 ( ViewComponent 组件 )

评论

热门文章

推荐文章

最新文章

置顶文章