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 

 

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

相關推薦:

mui SQL分頁加搜尋功能 案例

React學習筆記案例2

非同步(1) async & await

利用vue.js加weex的相關外掛實現微信的一個簡單頁面

TagHelper Syntax for View Components

八、VueJs 填坑日記之引數傳遞及內容頁面的開發

asp.net core 2.0 webapi整合signalr

[譯]ASP.NET Core 2.0 檢視元件