在asp.net core mvc中增加了ViewComponent（視圖組件）的概念，視圖組件有點類似部分視圖，但是比部分視圖功能更加強大，它更有點像一個控制器。

使用方法

1，定義類派生自ViewComponent類

2，增加Task InvokeAsync方法

3，在InovkeAsync方法中增加邏輯，並返回視圖結果

4，在類上增加ViewComponent特性，可以標註組件名稱：[ViewComponent(Name="組件名稱")]。這一步不是必需的。

具體實例：

[ViewComponent(Name="templatetest")]
public class TemplateViewComponent:ViewComponent
{
public async Task InvokeAsync
{
return View("~/Views/test.cshtml");
}
}　　

另外，我們可以給InvokeAsync方法增加參數，在調用組件的時候，可以傳遞數據，如下：

[ViewComponent(Name ="Pager")]
public class Pager: ViewComponent
{
public Task InvokeAsync(int page,int pagesize,int count)
{
ViewBag.PageIndex = page;
ViewBag.PageSize = pagesize;
int totalPage = count / pagesize;

if (count%pagesize>0)
{
totalPage += 1;
}

ViewBag.PageTotal = totalPage;
ViewBag.RecordCount = count;
return Task.FromResult(View("~/Views/ViewComponets/Pager.cshtml"));
}
}

視圖組件創建好後，在視圖上使用以下方法調用：

@await Component.InvokeAsync("組件名稱",參數對象)或者@await Component.InvokeAsync(typeof(組件),參數對象)

View Components as Tag Helpers

在asp.net core mvc 1.1版本中，又增加了一個新的特性，就是可以使用標籤方式調用視圖組件，類似下列效果：

這有什麼好處？Component.Invoke是在視圖中使用C#代碼執行視圖組件，而標籤方式更貼近前端技術，對前端開發人員來說更友好。另外一個就是我們實現一個在線模板編輯器也更加的方便。

要實現一個在線模板編輯器我們可以分幾步走：

第一步：先實現簡單修改視圖代碼，可以帶到我們需要的效果

第二步：提供在線的html代碼編輯器，直接在線編輯html代碼

第三步：提供組件配置窗口，可以配置對應的參數

第四步：可視化的頁面編輯

以一個企業展示站點作為場景，來說一下實現思路：

一般一個企業展示網站主要用於企業信息宣傳使用，表現形式就是文章，網站首頁會包含很多內容板塊，每個板塊有自己的一些特性，比如展示條數，內容來源，滾動顯示等。如下內容設置

第一步：先實現簡單修改視圖代碼，可以帶到我們需要的效果

我們可以在控制器中根據需要獲取所需要的數據，然後直接綁定到視圖上，但是如果客戶要求有變動，比如展示條數的變動，我們只能是修改代碼，重新發布，比較麻煩。所以我們可以把這些內容塊做成一個一個的組件，然後在視圖上直接調用，假設我們定義組件叫ContentBlockViewComponent，具體邏輯如下：

[ViewComponent(Name="contentblock")]
public class ContentBlockViewComponent:ViewComponent
{
///

/// 顯示條數 /// 信息來源板塊 ///
public async Task InvokeAsync(int showCount,int source)
{
//TODO:根據參數從指定板塊獲取數據
return View("~/Views/ContentBlock.cshtml");
}
}

然後我們在首頁視圖上使用展示內容。當參數發生改變時，我們可以直接在視圖上修改組件調用方法即可。到此我們實現了第一步：簡單修改代碼實現想要的效果。

這一步其實也很好實現，直接在系統中增加一個在線html編輯器（使用codemirror），直接通過讀取視圖文件內容，展示到前台頁面上，根據需要修改代碼並提交保存。實現到這一步，對於最終用戶來說，還是需要掌握一定的html知識，所以一般比較難，只能提供給開發使用。

codemirror中有一個Tag Matcher組件，我們可以以這個為思路，實現一個標籤選中事件，讀取當前標籤的一些信息，並在配置窗口中顯示對應信息，這個的還沒具體實現。如果這部分可以實現，應該一小部分用戶就可以自己操作了。

這是終極目標，我的思路是直接在頁面上呈現頁面內容，可以在視圖組件輸出視圖上增加一個根標籤，如

然後在頁面上使用jquery給帶有viewcomponet屬性的標籤增加mouseover事件，當滑鼠移動到div上後，顯示一個設置按鈕，點擊按鈕彈出類似第三部的配置窗口，在配置窗口中填寫參數，並保存。提交保存的時候，需要把頁面的名稱及組件的名稱傳遞到伺服器端，伺服器端接收後，首先找到對應的view文件，然後讀取內容，再進行html分析（可以使用htmlagilitypack)，找到對應的視圖組件標籤，進行參數替換，最後保存文件內容。到此完成一個配置的過程。

第三步跟第四步的實現代碼後續會慢慢提供。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！