ASP.NET Core 中的视图组件ViewComponent

视图组件ViewComponent是自ASP.NET Core以来的一个新的功能,它与部分视图类似,但是要强大许多,部分视图没有对应的背后代码,而视图组建有独立的后端代码支持,可重用性高。细心的朋友可以发现,如下源码就是本网站首页的技术文章区块的代码。



上图圈红的三个文件为相关的文件,ArticleViewComponent.cs文件为视图组建的后端文件,你可以放置在任何自定义的目录下;Default.cshtml是视图页面,目录结构有一定的规制,具体细节参考:https://docs.microsoft.com/zh-cn/aspnet/core/mvc/views/view-components?view=aspnetcore-2.2#view-search-path,Index.cshtml是首页视图,里面包含调用代码。

1. 后端代码
using ASY.Hrefs.BLL.IService;
using ASY.Hrefs.Model.Models;
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using System.Threading.Tasks;

namespace www.hrefs.cn.Components
{
[ViewComponent(Name = "Article")]
public class ArticleViewComponent : ViewComponent
{
private IArticleService ArticleService;
public ArticleViewComponent(IArticleService articleService)
{
this.ArticleService = articleService;
}

public async Task<IViewComponentResult> InvokeAsync(int size, int skip)
{
var items = await GetItemsAsync(size, skip);
return View(items);
}

private Task<IEnumerable<Article>> GetItemsAsync(int size, int skip)
{
var list = this.ArticleService.ListByPaging(size, skip, "id,title,icon");
return Task<IEnumerable<Article>>.Factory.StartNew(() => { return list; });
}
}
}

我们命名这个视图组建为Article,这个名字在后面调用时候会用到,它必须继承ViewComponent,里面只要包含InvokeAsync方法,带有2个参数,这个方法可以带有0个或者多个参数,调用地方一一对应即可。IArticleService代码未提供,为数据业务代码,大家知道它的作用即可。

2. 视图页面
@model IEnumerable<Article>
<div id="article" style="">
<div class="article-bd">
<div class="article-item-img">
<a style="display:inline-block;" href="/article/@Model.FirstOrDefault().Id">
<img src="@Model.FirstOrDefault().Icon" style="width:310px;height:192px;" />
</a>
</div>
@foreach (var item in Model)
{
<div class="article-item"><a href="/article/@item.Id">@Html.Raw(item.Title)</a></div>
}
</div>
</div>

3. 调用

@await Component.InvokeAsync("Article", new { size = 10, skip = 0 })


调用非常简单,它可以放在视图,模版页面的任何地方,第一个参数为视图组建的名字,后面参数为匿名类型,里面包含的字段与InvokeAsync方法参数一致,假如InvokeAsync方法没有参数,这里就不需要传递一个匿名对象。

ASP.NET Core 中的视图组件ViewComponent的介绍就完了,详细细节参考官方中文网站:https://docs.microsoft.com/zh-cn/aspnet/core/mvc/views/view-components?view=aspnetcore-2.2,截图效果如下

Posted by 何敏 on 2019/04/29 15:53:34