前言

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

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

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

自定義一個(gè)組件

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

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

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

對(duì)于View Component我們有了一個(gè)基本的認(rèn)識(shí)，下面的話創(chuàng)建一個(gè)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")

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

我們修改一下原方法，同時(shí)增加一個(gè)Enum類型，進(jìn)行樣式的選擇

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

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

ViewComponent特性

因?yàn)樵谖覀兊囊晥D關(guān)系綁定中，我們更多的是依賴于命名式綁定，而當(dāng)我們組件的命名與類命名不一致時(shí)，會(huì)導(dǎo)致我們搜索不到相關(guān)的視圖，當(dāng)然我們可能會(huì)在使用過程中對(duì)其應(yīng)用不一樣的Name，而對(duì)于這種情況，我們可以使用ViewCompoentAttribute
進(jìn)行標(biāo)記，通過這種方式我們可進(jìn)行視圖的綁定，如下所示：

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

如上代碼雖然ButtonTest的命名引發(fā)了視圖綁定失敗（不能進(jìn)行使用Button），而我們將其加入一個(gè)標(biāo)記，將Name命名為Button這樣彌補(bǔ)了我們命名的不一致行為。

Taghelper方式

通過@addTagHelper指定進(jìn)行注冊(cè)包含組件的程序集，組件位于ViewComponentDemo程序集中

@addTagHelper *, ViewComponentDemo

切記這種方式有一個(gè)弊端，參數(shù)不是可選性參數(shù)，也就是你必須把每一個(gè)參數(shù)都進(jìn)行顯示的調(diào)用一下，否則將導(dǎ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的詳細(xì)內(nèi)容，更多關(guān)于ASP.NET Core中使用ViewComponent的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論