在ASP.NET Core中使用ViewComponent

HueiFeng發表於2021-04-10
ASP.NETView

前言

在之前的開發過程中，我們對於應用或者說使用一些小的元件，通常使用分佈頁（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

Demo:https://github.com/hueifeng/BlogSample/tree/master/src/ViewComponentDemo

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

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

相關文章