ASP.NET中如何使用View Component

ASP.NET中如何使用View Component，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

View Component的创建

目前，View Component类的创建方式有如下三种：

直接继承于ViewComponent

给类加上ViewComponent特性，或继承于带有ViewComponent特性的类

创建一个类，类名以ViewComponent结尾

和Controller一样，View Component必须是public的，不能嵌套，不能是抽象类。举例来说，我们创建一个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类上定义一个名称为TopList的ViewComponent特性，其效果和定义TopListViewComponent类一样，系统在查找的时候，都会认可，并且在其构造函数中通过依赖注入功能提示构造函数中参数的类型实例。

Invoke方法是一个约定方法，可以传入任意数量的参数，系统也支持InvokeAsync方法实现异步功能。

View Component的视图文件创建

以在ProductController的视图里调用View  Component为例，我们需要在Views\Product文件夹下创建一个名称为Components的文件夹(该文件夹名称必须为Components)。

然后在Views\Product\Components文件夹下创建一个名称为TopList 的文件夹(该文件夹名称必须和View  Component名称一致，即必须是TopList)。

在Views\Product\Components\TopList文件夹下，创建一个Default.cshtml视图文件，并添加如下标记：

@model IEnumerable<BookStore.Models.ProductItem>  <h4>Top Products</h4> <ul>     @foreach (var todo in Model)     {         <li>@todo.Title</li>     } </ul>

如果再View Component中，没有指定视图的名称，将默认为Default.cshtml视图。

至此，该View Component就创建好了，你可以在Views\Product\index.cshtml视图中的任意位置调用该View  Component，比如：

<div class="col-md-4">   @Component.Invoke("TopList", 1, 10)   </div>

如果在上述TopListViewComponent中定义的是异步方法InvokeAsync的话，则可以使用@await  Component.InvokeAsync()方法来调用，这两个方法的***个参数都是TopListViewComponent的名称，剩余的参数则是在TopListViewComponent类中定义的方法参数。

注意：一般来说，View  Component的视图文件都是添加在Views\Shared文件夹的，因为一般来说ViewComponent不会特定于某个Controller。

使用自定义视图文件

一般来说，如果要使用自定义文件，我们需要在Invoke的方法返回返回值的时候来指定视图的名称，示例如下：

return View("TopN", items);

那么，就需要创建一个Views\Product\Components\TopN.cshtml文件，而使用的时候则无需更改，还是指定原来的View  Component名称即可，比如：

@await Component.InvokeAsync("TopList",  1, 10)  //以异步调用为例

关于ASP.NET中如何使用View Component问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注亿速云行业资讯频道了解更多相关知识。