在ASP.NET Core中使用ViewComponent

2021 年 4 月 10 日
筆記
.NET, Asp.Net Core, ASP.NET Core 5.0, ASP.NET CORE MVC, ASP.NET MVC

前言

在之前的開發過程中，我們對於應用或者說使用一些小的組件，通常使用分布頁（partial view），再往前在Web Form中我們會進行應用WEB Control，好吧提及一個關鍵性程式碼TagPrefix：TagName，通過這種的標記我們便可以在我們web form中進行引入我們的組件，當然自從.NET MVC之後呢，就已經沒有了WebControl，而對於.NET Core後，又多了一個特性ViewComponent。

對於ViewComponent看起來它類似於小的控制器，而對於我們小的組件或者小部分通用型功能，可通過ViewComponent進行實現，比如說留言欄、菜單等等。

ViewComponent是由兩部分組成，一部分是類（通常該類集成與ViewComponent），而另外一部分是視圖（Razor和普通的View一樣），當然ViewComponent同樣也支援POCO，不繼承ViewComponent，但類名以ViewComponent結尾。

自定義一個組件

創建ViewComponent的方式有三種，如下所示：

繼承自ViewComponent
使用ViewComponent特性
創建一個類，以ViewComponent結尾

需要注意的是View Component必須是公共的（public），非嵌套，非抽象類。

對於View Component我們有了一個基本的認識，下面的話創建一個ButtonViewComponent示例，作為我們的參考：

using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace ViewComponentDemo.ViewComponents
{
    public class ButtonViewComponent : ViewComponent
    {
        public async Task<IViewComponentResult> InvokeAsync()
        {
            return View();
        }
    }
}

在視圖頁面中調用該組件：

@await Component.InvokeAsync("Button")

對於ViewComponent同樣也是跟Controller一樣，進行通過我們服務端特性進行視圖操作，再或者說渲染，比如下面我們要傳遞參數，進行修改我們的Button的樣式：

我們修改一下原方法，同時增加一個Enum類型，進行樣式的選擇

@await Component.InvokeAsync("Button",ButtonType.Success)

 public async Task<IViewComponentResult> InvokeAsync(ButtonType type = ButtonType.Success)
 {
        ViewBag.Type = type;
        //return View("name",model);//允許強類型
        return View();
 }
 
    public enum ButtonType
    {
        Default,
        Primary,
        Success,
        Info,
        Warning,
        Danger,
        Link
    }

ViewComponent特性

因為在我們的視圖關係綁定中，我們更多的是依賴於命名式綁定，而當我們組件的命名與類命名不一致時，會導致我們搜索不到相關的視圖，當然我們可能會在使用過程中對其應用不一樣的Name，而對於這種情況，我們可以使用ViewCompoentAttribute
進行標記，通過這種方式我們可進行視圖的綁定，如下所示：

    [ViewComponent(Name ="Button")]
    public class ButtonTest : ViewComponent
    {
        public async Task<IViewComponentResult> InvokeAsync(ButtonType type = ButtonType.Success)
        {
            ViewBag.Type = type;
            return View();
        }
    }

如上程式碼雖然ButtonTest的命名引發了視圖綁定失敗（不能進行使用Button），而我們將其加入一個標記，將Name命名為Button這樣彌補了我們命名的不一致行為。

Taghelper方式

通過@addTagHelper指定進行註冊包含組件的程式集，組件位於ViewComponentDemo程式集中

@addTagHelper *, ViewComponentDemo

通過如下內容，我們便可以進行直接引用我們的視圖，相對來說這種方式看起來美觀一些。

切記這種方式有一個弊端，參數不是可選性參數，也就是你必須把每一個參數都進行顯示的調用一下，否則將導致搜索不到.

<vc:button type="@ButtonType.Success"></vc:button>

在如上程式碼中type為我們的方法參數。

Reference

//www.cnblogs.com/TomXu/p/4496486.html

//docs.microsoft.com/zh-cn/aspnet/core/mvc/views/view-components

Tags: .NET Asp.Net Core ASP.NET Core 5.0 ASP.NET CORE MVC ASP.NET MVC