解读ASP.NET 5 & MVC6系列教程（14）：View Component

下面我来为你详细讲解 ASP.NET 5 & MVC6 系列教程中的第 14 篇文章——View Component 的完整攻略。

一、View Component 简介

View Component 是在 ASP.NET Core 中新增加的基于 HTTP 特性的 MVC 元素。它的主要功能是可以自定义组件部件并将其添加到页面中。与使用PartialView不同的是，View Component 是一个独立于页面之外的类，通常归类为一个单独的文件。

因此，它更加灵活和可维护，也非常适用于那些需要在不同页面中多次使用的功能块。例如网站中常见的友情链接、广告推广等。

二、View Component 的使用

1. 创建 View Component

View Component 是一个普通的 C# 类，必须继承自 Microsoft.AspNetCore.Mvc.ViewComponent 类，这个基类提供了所有的必要工具和方法。

下面给出一个简单的 View Component 示例：

public class MyViewComponent : ViewComponent
{
    public IViewComponentResult Invoke()
    {
        return View("MyViewComponent");
    }
}

在这个例子中，我们首先继承了 ViewComponent 类，并重写了该类的 Invoke 方法。这个方法就是 View Component 的最主要执行方法，在这里我们返回一个名称为 MyViewComponent 的视图。

2. 定义 View Component 视图

View Component 所呈现的内容是在 View Component 视图中定义的。这个视图与普通的 Razor 视图有点不同，它必须为 View Component 提供一个固定的命名，并且必须创建在特定的文件夹中。

在 ASP.NET Core MVC 项目中，创建一个名为 Components 的文件夹。在这个文件夹中创建一个 MyViewComponent 视图，这个视图中将使用 className参数。

<p class="@className">Hello World!</p>

3. 在 Razor 视图中使用 View Component

在 Razor 视图中使用 View Component 要比在控制器中使用 PartialView 更灵活。在页面中使用 View Component 的方式类似于Html辅助方法。即使用下面三个步骤：

1.在视图中使用 @component 指令呼叫视图组件

@{Html.RenderComponent("MyViewComponent", new { className = "red" });}

这个指令需要指定在调用中使用的组件名称和参数。

2.在视图组件的 Invoke 方法中返回该组件使用的视图名称。

public IViewComponentResult Invoke(string className)
{
    return View("MyViewComponent", className);
}

3.在组件视图中使用值提供的参数。

<p class="@Model">Hello World!</p>

这里我们的 View Component 根据接收的参数 className 向页面中添加了一个带有红色文字的段落标签。

三、View Component 的应用场景

View Component 是一个非常强大的 ASP.NET Core 基于 HTTP 特性的 MVC 元素。由于它的灵活性，你可以用它来实现各种不同的场景。例如：

1. 友情链接和广告推广
   网站中通常需要添加一些友情链接，这些链接可能需要被多个页面使用。使用 View Component ，可以将这个功能块定义成一个 View Component ，并加上适当的参数，以便在需要使用的地方重复使用。

2. 搜索框和购物车等常见控件
   ASP.NET Core 提供了自己的控件，例如 SearchBox 控件和 BreadCrumb 等。但是当这些控件不能满足我们的需求时，我们通常可以使用 View Component 来自定义功能块，然后在不同的页面上使用。

示例 1：
我们现在有一个需要在页面上展示所有产品的功能块，可以使用 View Component 来定义这个功能块。

步骤 1：创建 View Component 类

public class ProductList : ViewComponent
{
    public IViewComponentResult Invoke()
    {
        var products = GetProductList(); // 模拟获取商品信息
        return View("ProductList", products);
    }

    private List<ProductData> GetProductList()
    {
        // 模拟获取商品信息
        return new List<ProductData>()
        {
            new ProductData { Id = 1, Name = "Product 1", Price = 10 },
            new ProductData { Id = 2, Name = "Product 2", Price = 20 },
            new ProductData { Id = 3, Name = "Product 3", Price = 30 }
        };
    }
}

在这个 View Component 中，我们获取了商品信息，然后将这个信息传递给了视图 ProductList 。

步骤 2：创建 ProductList 视图

在 Views 文件夹中创建名为 ProductList 的视图，并为这个视图编写下面的 Html 代码：

<h2>Product List</h2>
<table class="table">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var product in Model)
        {
            <tr>
                <td>@product.Id</td>
                <td>@product.Name</td>
                <td>@product.Price</td>
            </tr>
        }
    </tbody>
</table>

步骤 3：在 Razor 视图中使用 View Component

最后，在需要显示 ProductList 视图的 Razor 视图中调用 View Component，就像这样：

@{Html.RenderComponent("ProductList");}

这样，在需要显示所有商品的地方，我们就可以直接调用 View Component ，不需要重复撰写代码。

示例 2：
需要在页面中展示广告条，可以使用 View Component 来定义这个功能块。

步骤 1：创建 View Component 类

public class Advertise : ViewComponent
{
    public IViewComponentResult Invoke(string imageUrl)
    {
        return View("Advertise", imageUrl);
    }
}

在这个 View Component 中，我们为组件提供了一个 imageUrl 参数，这个参数可以在使用组件的时候传递进来。

步骤 2：创建 Advertise 视图

在 Views 文件夹中创建名为 Advertise 的视图，并为这个视图编写下面的 Html 代码：

<a href="#"><img src="@Model" /></a>

步骤 3：在 Razor 视图中使用 View Component

最后，在要显示广告的 Razor 视图中调用 View Component，就像这样：

@{Html.RenderComponent("Advertise", new { imageUrl = "images/advertise01.jpg" });}

这样，我们就可以根据需要随时更改 imageUrl 参数，将不同的图片展示给用户。

到此，View Component 的完整攻略就讲解完了，希望可以帮助到你。