本实验展示如何创建和重用 Partial 视图。

准备测试页面

使用 VS Code 打开 Module4\Tutorial_Lab_4 文件夹下的 MyWebApp 项目。

运行项目，可以看到如下页面：

我们将要做些改进，以实现以下需求：

1. 使用大写字母展示 Location 属性

2. 使用颜色块展示 Color 属性

3. 确保别的 HTML table 可以重用该数据模板

首先，我们先介绍一个新概念 —— 数据模板（data template）。数据模板是用于呈现特定类型对象的可重用 UI 组件。一类对象可能支持多种数据模板。

例如，对于订单记录，我们可以为它创建两个数据模板。一个模板用于将订单显示为表中的一行，另一个模板用于在一个矩形区域中显示该订单的详细信息。

在 ASP.NET Core 中用户控件（user control）、数据模板（data template）和分部视图（partial view）都指一个东西。

创建 Partial View

上例中，我们代码中的数据（models）和业务逻辑（controllers）都是正确的。我们唯一需要做的就是改进视图。这也是模型、视图和控制器分离的好处。

改进后的代码片段：

<tr>
    <td>@t.ID</td>
    <td>@t.Name</td>
    <td>@t.Location</td>
    <td>@t.Color</td>
</tr>

这里存在的问题是，我们只满足了前两个需求，最后一个作为模板重用只能依靠创建分部视图才好实现。

在 Views\Shared 文件夹下创建 RoleTableRow.cshtml：

@model MyWebApp.Models.Transformer
<tr>
    <td>@Model.ID</td>
    <td>@Model.Name</td>
    <td>@Model.Location.ToUpper()</td>
    <td><div style="width:24px;height:24px;background:@Model.Color"/></td>
</tr>

然后更改 Index 视图里面的 foreach 代码：

@foreach(var t in Model){
    @Html.Partial("RoleTableRow", t)
}

运行程序，页面效果：