@model IEnumerable<BookStore.Models.ProductItem>
<h3>Top Products</h3>
<ul>
@foreach (var todo in Model)
{
<li>@todo.Title</li>
}
</ul>
如果再View Component中，没有指定视图的名称，将默认为Default.cshtml视图。
至此，该View Component就创建好了，你可以在ViewsProductindex.cshtml视图中的任意位置调用该View Component，比如：
<div class="col-md-4">
@Component.Invoke("TopList", 1, 10)
</div>
如果在上述TopListViewComponent中定义的是异步方法InvokeAsync的话，则可以使用@await Component.InvokeAsync()方法来调用，这两个方法的第一个参数都是TopListViewComponent的名称，剩余的参数则是在TopListViewComponent类中定义的方法参数。
注意：一般来说，View Component的视图文件都是添加在ViewsShared文件夹的，因为一般来说ViewComponent不会特定于某个Controller。
使用自定义视图文件
一般来说，如果要使用自定义文件，我们需要在Invoke的方法返回返回值的时候来指定视图的名称，示例如下：
return View("TopN", items);
那么，就需要创建一个ViewsProductComponentsTopN.cshtml文件，而使用的时候则无需更改，还是指定原来的View Component名称即可，比如：
@await Component.InvokeAsync("TopList", 1, 10) //以异步调用为例
总结
一般来说，建议在通用的功能上使用View Component的功能，这样所有的视图文件都可以放在ViewsShared文件夹了。
