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

使用方法

1，定義類派生自ViewComponent類

2，增加Task<IViewComponentResult> InvokeAsync方法

3，在InovkeAsync方法中增加邏輯，并返回視圖結(jié)果

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

具體實(shí)例：

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

另外，我們可以給InvokeAsync方法增加參數(shù)，在調(diào)用組件的時(shí)候，可以傳遞數(shù)據(jù)，如下：

[ViewComponent(Name = "Pager" )] ? public? class? Pager: ViewComponent ? { ????? public? Task<IViewComponentResult> 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<IViewComponentResult>(View( "~/Views/ViewComponets/Pager.cshtml" )); ????? } ? }

視圖組件創(chuàng)建好后，在視圖上使用以下方法調(diào)用：

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

?View Components as Tag Helpers

在asp.net core mvc 1.1版本中，又增加了一個(gè)新的特性，就是可以使用標(biāo)簽方式調(diào)用視圖組件，類似下列效果：

<vc:組件名稱 param1="" param2=""></vc:組件名稱>

這有什么好處？Component.Invoke是在視圖中使用C#代碼執(zhí)行視圖組件，而標(biāo)簽方式更貼近前端技術(shù)，對(duì)前端開發(fā)人員來說更友好。另外一個(gè)就是我們實(shí)現(xiàn)一個(gè)在線模板編輯器也更加的方便。

要實(shí)現(xiàn)一個(gè)在線模板編輯器我們可以分幾步走：

第一步：先實(shí)現(xiàn)簡(jiǎn)單修改視圖代碼，可以帶到我們需要的效果

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

第三步：提供組件配置窗口，可以配置對(duì)應(yīng)的參數(shù)

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

以一個(gè)企業(yè)展示站點(diǎn)作為場(chǎng)景，來說一下實(shí)現(xiàn)思路：

一般一個(gè)企業(yè)展示網(wǎng)站主要用于企業(yè)信息宣傳使用，表現(xiàn)形式就是文章，網(wǎng)站首頁會(huì)包含很多內(nèi)容板塊，每個(gè)板塊有自己的一些特性，比如展示條數(shù)，內(nèi)容來源，滾動(dòng)顯示等。如下內(nèi)容設(shè)置

?第一步：先實(shí)現(xiàn)簡(jiǎn)單修改視圖代碼，可以帶到我們需要的效果

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

[ViewComponent(Name= "contentblock" )] ???? public? class? ContentBlockViewComponent:ViewComponent ???? { ???????? /// <summary> ???????? /// 內(nèi)容展示組件 ???????? /// </summary> ???????? /// <param name="showCount">顯示條數(shù)</param> ???????? /// <param name="source">信息來源板塊</param> ???????? /// <returns></returns> ???????? public? async Task<IViewComponentResult> InvokeAsync( int? showCount, int? source) ???????? { ???????????? //TODO:根據(jù)參數(shù)從指定板塊獲取數(shù)據(jù) ???????????? return? View( "~/Views/ContentBlock.cshtml" );??? ???????? } ???? }

　　

　然后我們?cè)谑醉撘晥D上使用<vc:contentblock showcount="6" source="1"/>展示內(nèi)容。當(dāng)參數(shù)發(fā)生改變時(shí)，我們可以直接在視圖上修改組件調(diào)用方法即可。到此我們實(shí)現(xiàn)了第一步：簡(jiǎn)單修改代碼實(shí)現(xiàn)想要的效果。

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

這一步其實(shí)也很好實(shí)現(xiàn)，直接在系統(tǒng)中增加一個(gè)在線html編輯器（使用codemirror），直接通過讀取視圖文件內(nèi)容，展示到前臺(tái)頁面上，根據(jù)需要修改代碼并提交保存。實(shí)現(xiàn)到這一步，對(duì)于最終用戶來說，還是需要掌握一定的html知識(shí)，所以一般比較難，只能提供給開發(fā)使用。

第三步：提供組件配置窗口，可以配置對(duì)應(yīng)的參數(shù)

codemirror中有一個(gè)Tag Matcher組件，我們可以以這個(gè)為思路，實(shí)現(xiàn)一個(gè)標(biāo)簽選中事件，讀取當(dāng)前標(biāo)簽的一些信息，并在配置窗口中顯示對(duì)應(yīng)信息，這個(gè)的還沒具體實(shí)現(xiàn)。如果這部分可以實(shí)現(xiàn)，應(yīng)該一小部分用戶就可以自己操作了。

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

這是終極目標(biāo)，我的思路是直接在頁面上呈現(xiàn)頁面內(nèi)容，可以在視圖組件輸出視圖上增加一個(gè)根標(biāo)簽，如

<div viewcomponent="組件名稱">其他視圖內(nèi)容</div>

然后在頁面上使用jquery給帶有viewcomponet屬性的標(biāo)簽增加mouseover事件，當(dāng)鼠標(biāo)移動(dòng)到div上后，顯示一個(gè)設(shè)置按鈕，點(diǎn)擊按鈕彈出類似第三部的配置窗口，在配置窗口中填寫參數(shù)，并保存。提交保存的時(shí)候，需要把頁面的名稱及組件的名稱傳遞到服務(wù)器端，服務(wù)器端接收后，首先找到對(duì)應(yīng)的view文件，然后讀取內(nèi)容，再進(jìn)行html分析（可以使用htmlagilitypack)，找到對(duì)應(yīng)的視圖組件標(biāo)簽，進(jìn)行參數(shù)替換，最后保存文件內(nèi)容。到此完成一個(gè)配置的過程。

第三步跟第四步的實(shí)現(xiàn)代碼后續(xù)會(huì)慢慢提供。

原文地址：http://www.cnblogs.com/dxp909/p/7049009.html

---

.NET社區(qū)新聞，深度好文，微信中搜索dotNET跨平臺(tái)或掃描二維碼關(guān)注

總結(jié)

以上是生活随笔為你收集整理的View Components as Tag Helpers，离在线模板编辑又进一步的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。