ASP.NET中如何使用View Component

ASP.NET中如何使用View Component，針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡(jiǎn)單易行的方法。

View Component的創(chuàng)建

目前，View Component類的創(chuàng)建方式有如下三種：

直接繼承于ViewComponent

給類加上ViewComponent特性，或繼承于帶有ViewComponent特性的類

創(chuàng)建一個(gè)類，類名以ViewComponent結(jié)尾

和Controller一樣，View Component必須是public的，不能嵌套，不能是抽象類。舉例來(lái)說，我們創(chuàng)建一個(gè)View  Component，類名為TopListViewComponent，代碼如下：

public class TopListViewComponent : ViewComponent {     private readonly ApplicationDbContext db;      public TopListViewComponent(ApplicationDbContext context)     {         db = context;     }      public IViewComponentResult Invoke(int categoryId, int topN)     {         List col = new List();         var items = db.TodoItems.Where(x => x.IsDone == false &&                                             x.categoryId == categoryId).Take(topN);          return View(items);     } }

上述類，也可以定義成如下這樣：

[ViewComponent(Name = "TopList")] 
public class TopWidget 
{ 
    // 其它類似 
} 

通過在TopWidget類上定義一個(gè)名稱為TopList的ViewComponent特性，其效果和定義TopListViewComponent類一樣，系統(tǒng)在查找的時(shí)候，都會(huì)認(rèn)可，并且在其構(gòu)造函數(shù)中通過依賴注入功能提示構(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 IEnumerable<BookStore.Models.ProductItem>  <h4>Top Products</h4> <ul>     @foreach (var todo in Model)     {         <li>@todo.Title</li>     } </ul>

如果再View Component中，沒有指定視圖的名稱，將默認(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)說，View  Component的視圖文件都是添加在Views\Shared文件夾的，因?yàn)橐话銇?lái)說ViewComponent不會(huì)特定于某個(gè)Controller。

使用自定義視圖文件

一般來(lái)說，如果要使用自定義文件，我們需要在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)用為例

關(guān)于ASP.NET中如何使用View Component問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。