在之前的MVC中,我們經(jīng)常需要類似一種小部件的功能,通常我們都是使用Partial View來(lái)實(shí)現(xiàn),因?yàn)镸VC中沒(méi)有類似Web Forms中的WebControl的功能。但在MVC6中,這一功能得到了極大的改善。新版MVC6中,提供了一種叫做View Component的功能。
你可以將View Component看做是一個(gè)mini的Controller——它只負(fù)責(zé)渲染一小部分內(nèi)容,而非全部響應(yīng),所有Partial View能解決的問(wèn)題,你都可以使用View Component來(lái)解決,比如:動(dòng)態(tài)導(dǎo)航菜單、Tag標(biāo)簽、登錄窗口、購(gòu)物車(chē)、最近閱讀文章等等。
View Component包含2個(gè)部分,一部分是類(繼承于ViewComponent),另外一個(gè)是Razor視圖(和普通的View視圖一樣)。就像新版MVC中的Controller一樣,ViewComponent也可以使POCO的(即不繼承ViewComponent類,但類名以ViewComponent結(jié)尾)。
View Component的創(chuàng)建
目前,View Component類的創(chuàng)建方式有如下三種:
直接繼承于ViewComponent給類加上ViewComponent特性,或繼承于帶有ViewComponent特性的類創(chuàng)建一個(gè)類,類名以ViewComponent結(jié)尾
和Controller一樣,View Component必須是public的,不能嵌套,不能是抽象類。
舉例來(lái)說(shuō),我們創(chuàng)建一個(gè)View Component,類名為T(mén)opListViewComponent,代碼如下:
public class TopListViewComponent : ViewComponent
{
private readonly ApplicationDbContext db;
public TopListViewComponent(ApplicationDbContext context)
{
db = context;
}
public IViewComponentResult Invoke(int categoryId, int topN)
{
Liststring> col = new Liststring>();
var items = db.TodoItems.Where(x => x.IsDone == false
x.categoryId == categoryId).Take(topN);
return View(items);
}
}
上述類,也可以定義成如下這樣:
[ViewComponent(Name = "TopList")]
public class TopWidget
{
// 其它類似
}
通過(guò)在TopWidget類上定義一個(gè)名稱為T(mén)opList的ViewComponent特性,其效果和定義TopListViewComponent類一樣,系統(tǒng)在查找的時(shí)候,都會(huì)認(rèn)可,并且在其構(gòu)造函數(shù)中通過(guò)依賴注入功能提示構(gòu)造函數(shù)中參數(shù)的類型實(shí)例。
Invoke方法是一個(gè)約定方法,可以傳入任意數(shù)量的參數(shù),系統(tǒng)也支持InvokeAsync方法實(shí)現(xiàn)異步功能。
View Component的視圖文件創(chuàng)建
以在ProductController
的視圖里調(diào)用View Component為例,我們需要在Views\Product
文件夾下創(chuàng)建一個(gè)名稱為Components
的文件夾(該文件夾名稱必須為Components
)。
然后在Views\Product\Components
文件夾下創(chuàng)建一個(gè)名稱為TopList
的文件夾(該文件夾名稱必須和View Component名稱一致,即必須是TopList
)。
在Views\Product\Components\TopList
文件夾下,創(chuàng)建一個(gè)Default.cshtml
視圖文件,并添加如下標(biāo)記:
@model IEnumerableBookStore.Models.ProductItem>
h3>Top Products/h3>
ul>
@foreach (var todo in Model)
{
li>@todo.Title/li>
}
/ul>
如果再View Component中,沒(méi)有指定視圖的名稱,將默認(rèn)為Default.cshtml
視圖。
至此,該View Component就創(chuàng)建好了,你可以在Views\Product\index.cshtml視圖中的任意位置調(diào)用該View Component,比如:
div class="col-md-4">
@Component.Invoke("TopList", 1, 10)
/div>
如果在上述TopListViewComponent中定義的是異步方法InvokeAsync的話,則可以使用@await Component.InvokeAsync()
方法來(lái)調(diào)用,這兩個(gè)方法的第一個(gè)參數(shù)都是TopListViewComponent的名稱,剩余的參數(shù)則是在TopListViewComponent類中定義的方法參數(shù)。
注意:一般來(lái)說(shuō),View Component的視圖文件都是添加在Views\Shared文件夾的,因?yàn)橐话銇?lái)說(shuō)ViewComponent不會(huì)特定于某個(gè)Controller。
使用自定義視圖文件
一般來(lái)說(shuō),如果要使用自定義文件,我們需要在Invoke的方法返回返回值的時(shí)候來(lái)指定視圖的名稱,示例如下:
return View("TopN", items);
那么,就需要?jiǎng)?chuàng)建一個(gè)Views\Product\Components\TopN.cshtml
文件,而使用的時(shí)候則無(wú)需更改,還是指定原來(lái)的View Component名稱即可,比如:
@await Component.InvokeAsync("TopList", 1, 10) //以異步調(diào)用為例
總結(jié)
一般來(lái)說(shuō),建議在通用的功能上使用View Component的功能,這樣所有的視圖文件都可以放在Views\Shared
文件夾了。
您可能感興趣的文章:- 解讀ASP.NET 5 & MVC6系列教程(16):自定義View視圖文件查找邏輯
- Asp.net mvc在view中用C#代碼動(dòng)態(tài)創(chuàng)建元素