前言

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

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

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

自定義一個組件

創(chuàng)建ViewComponent的方式有三種，如下所示：

• 繼承自ViewComponent
• 使用ViewComponent特性
• 創(chuàng)建一個類，以ViewComponent結(jié)尾
  

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

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

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

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

在視圖頁面中調(diào)用該組件：

@await Component.InvokeAsync("Button")

對于ViewComponent同樣也是跟Controller一樣，進行通過我們服務端特性進行視圖操作，再或者說渲染，比如下面我們要傳遞參數(shù)，進行修改我們的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特性

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

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

如上代碼雖然ButtonTest的命名引發(fā)了視圖綁定失?。ú荒苓M行使用Button），而我們將其加入一個標記，將Name命名為Button這樣彌補了我們命名的不一致行為。

Taghelper方式

通過@addTagHelper指定進行注冊包含組件的程序集，組件位于ViewComponentDemo程序集中

@addTagHelper *, ViewComponentDemo

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

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

在如上代碼中type為我們的方法參數(shù)。

Reference

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

以上就是如何在ASP.NET Core中使用ViewComponent的詳細內(nèi)容，更多關(guān)于ASP.NET Core中使用ViewComponent的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論