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<IViewComponentResult> InvokeAsync(string value) //调用时可以传参哦, 好像不支持 optional and default value /.\
{
var vm = new ViewModel
{
name = value
};
return Task.FromResult<IViewComponentResult>(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