概述

在实际项目中，视图通常由可重用的组件构成。这些组件包括 Layout View（布局视图）、Content View（内容视图）和 Partial View（分部视图）。

本节将详细介绍 Layout View 和 Partial View 的概念，具体使用参考对应的 Lab。

Layout Views

有些 UI 元素是整个网站公用的，例如导航栏和页脚。布局视图的想法是我们创建一个包含这些常见 UI 元素的模板视图页面，并且在该模板内为内容视图留下一些空白区域。当开发人员添加视图时，可以重用布局视图，直接在布局视图中嵌入内容视图。

ASP.NET Core 布局视图的概念是：

  • RazorPage 类是所有视图的基类，它有一个 public string Layout {get;set;} 属性

  • 每次视图启动时，都会执行 ~\Views 文件夹中的 _ViewStart.cshtml。在该文件的代码中，你可以看到 @{ Layout = "_Layout"; } ，这句代码的意思是所有内容视图的默认布局视图是 _Layout.cshtml

  • 基于搜索视图的功能，Razor 引擎可以在 ~\Views\Shared 文件夹中找到 _Layout.cshtml 文件

  • _Layout.cshtml 文件中包含公用的 UI 元素代码。它们构成了完整视图的页面架构。你还可以在该布局视图中找到 @RenderBody() 和 @RenderSection()：

    • @RenderBody() 是内容视图的占位符

    • @RenderSection() 用于呈现内容页面的可选部分。即内容页面可能包含此内容部分，也可能不包含

  • 内容页面可以通过添加 @{Layout = ...} 来重写 _ViewStart.cshtml 中设置的 Layout 属性值

Partial Views

HTML Helper 帮助我们创建和重用 UI 组件。问题是超链接、文本框和下拉列表这些 UI 组件都不是面向业务逻辑的。那么有办法构建面向业务逻辑的 UI 组件吗？

假设你正在构建一个在线购物网站，可能需要设计一个购物车 UI 组件。购物车 UI 组件可以向用户显示所选商品、总价格、折扣信息等。因为商品的选择，总价计算和折扣计算都是业务逻辑聚焦的，所以购物车 UI 组件是一个面向业务逻辑的组件。

面向业务逻辑的 UI 组件还有一个更接地气的名字 —— 用户控件。

ASP.NET Core 中的用户控件或可重用的面向业务逻辑的 UI 组件称为分部视图。分部视图和内容视图基本没有区别，但通常分部视图被设计为可重用组件。而且，与在布局视图中使用 @RenderBody() 来呈现内容视图不同，我们使用 @Html.Partial() 来呈现分部视图。而且分部视图还可以有自己的 View Model（视图模型）。

Partial 方法的重载包括：

  • 用于强类型视图模型： public static IHtmlContent Partial(this IHtmlHelper htmlHelper, string partialViewName, object model);

  • 用于弱类型视图模型：public static IHtmlContent Partial(this IHtmlHelper htmlHelper, string partialViewName, ViewDataDictionary viewData);

  • 没有视图模型：public static IHtmlContent Partial(this IHtmlHelper htmlHelper, string partialViewName);