ASP.NET Core MVC - 在 header、main 等上生成的属性

Question

在使用 ASP.NET Core MVC 模板在 Visual Studio 中生成的 Web 应用程序中，当应用程序运行时，

_Layout.cshtml

中的某些标记会生成属性。例如：

b-ywrky5rk6w

中

<header b-ywrky5rk6w="">
    <nav b-ywrky5rk6w="" class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
        <div b-ywrky5rk6w="" class="container-fluid">

它是从哪里产生或控制的？我看到

obj\Debug\net8.0\scopedcss\bundle

中存在样式表。但我不知道如何利用它。

Answer 1

b-ywrky5rk6w

与 ASP.NET Core 中的作用域 CSS 相关。它可以帮助您启用特定组件的样式而不影响其他组件，这将帮助您处理大型应用程序或可重用组件。

它是从哪里产生或控制的？

这些属性 (

b-ywrky5rk6w

) 是 ASP.NET Core 框架用于将作用域 CSS 规则应用于特定元素的唯一标识符。当您在作用域 CSS 文件中定义样式时，框架会转换 CSS 选择器以确保它们仅适用于预期元素，并将这些属性添加到 HTML 元素和相应的 CSS 规则中。

在 ASP.NET Core 中，如果您创建一个扩展名为

.cshtml.css

的 CSS 文件并将其放置在 Razor 视图文件（

.cshtml

文件）旁边，则此 CSS 文件中定义的样式的范围仅限于该视图。

例如，如果您有

_Layout.cshtml

，则可以创建一个

_Layout.cshtml.css

文件，其中包含您想要将其范围限定到

_Layout

视图的样式。

当您构建项目时，ASP.NET Core 构建过程会生成唯一的属性选择器（如

b-ywrky5rk6w

）并更新您的 HTML 和 CSS 以包含这些属性。此过程是在构建期间处理的，这就是您看到生成的属性的原因。

但我不知道如何利用它

要使其与您的应用程序配合使用，您可以按照以下步骤操作：

1) 在 Razor 视图文件旁边创建一个扩展名为

.cshtml.css

的 CSS 文件。

例如

_Layout.cshtml

，创建

_Layout.cshtml.css

。

2）在此文件中添加您的 CSS 规则。样式将自动限定在您视图中的元素范围内。

3）当您构建并运行应用程序时，ASP.NET Core 将自动处理范围，向相关元素添加唯一属性，并确保您的样式仅应用于这些元素。