布局文件配置

默认创建的视图是不完整的html，因此需要配置布局文件使页面完整。

添加布局文件

在Views文件夹下创建一个名为Shared的文件夹。

在Shared文件夹下右键【添加-Razor组件】，选择Razor布局，保持默认名称_Layout.cshtml，点击添加。

_Layout.cshtml中的代码如下所示：

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
<body>
    <div>
        @RenderBody()
    </div>
</body>
</html>

当访问视图时，会将视图中的内容嵌入到布局文件的@RenderBody()部分。

引入前端文件

将wwwroot文件夹中的bulma.css、sweetalert2.all.js、htmx.js文件拖到head标签底部。

<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <link href="~/bulma/bulma.css" rel="stylesheet" />
    <script src="~/sweetalert2.all.js"></script>
    <script src="~/htmx.js"></script>
</head>

添加区域

由于我们会在视图中添加JavaScript代码，而JavaScript一般都会添加到body标签的底部，因此可以使用RenderSection方法完成此过程。

<body>
    <div>
        @RenderBody()
    </div>
    @await RenderSectionAsync("Scripts", false)
</body>

如果视图中出现@section Scripts，则会将其中的代码嵌入布局文件对应的部分。

@section Scripts
{
    <script>
        //JavaScript代码
    </script>
}

添加视图开始文件

虽然布局文件已经创建，但是如果此时访问视图，页面仍然是不完整的，它没有和布局文件产生联系。

在Views文件夹下右键【添加-Razor组件】，选择Razor视图开始，保持默认名称_ViewStart.cshtml，点击添加。

Layout = "_Layout"指定视图默认选择Shared文件夹中的 _Layout.cshtml文件作为布局文件。

@{
    Layout = "_Layout";
}

添加视图导入文件

导入视图文件会将一些指令默认添加到视图中。

在Views文件夹下右键【添加-Razor组件】，选择Razor视图导入，保持默认名称_ViewImports.cshtml，点击添加。

在_ViewImports.cshtml中添加以下代码：

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

ASP.NET Core MVC中的某些特定标签用法需要引入标记帮助程序才能生效。

之后在需要在全局引入某些命名空间，也可以通过视图导入文件来完成。