布局文件配置

> 默认创建的视图是不完整的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中的某些特定标签用法需要引入**标记帮助程序**才能生效。

之后在需要在全局引入某些命名空间，也可以通过**视图导入文件**来完成。

布局文件配置