Asp.net core 學習筆記 ( ViewComponent 元件 )

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) //呼叫時可以傳參哦 
    {
        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 

 

關鍵詞:nbsp viewcomponent component value view db core name keatkeat class

相關推薦:

Passing a ViewModel by Attribute to ASP.NET Core ViewComponents

Why You Should Use View Components, not Partial Views, in ASP.NET Core

Tag Helpers in ASP.NET Core

Dynamic CSS in an ASP.NET Core MVC View Component

ASP.NET Core Middleware

Asp.Net core 檢視元件ViewComponent

Writing Multitenant ASP.NET Core Applications

ASP.NET CORE 自定義檢視元件(ViewComponent)注意事項