I have noticed that HTML code rendered from Razor Pages contains additional attributes. That does not apply to all HTML tags, but have observed this for e.g. for navigation bar in "_Layout.cshtml".
I have reproduced it with standard Visual Studio 2022 ASP.NET Razor Pages template. Herewith example.
Source code:
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
Rendered code:
<nav b-qljal0t0p2 class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
What is the purpose of b-qljal0t0p2 attribute? Can it be controlled and turned off?
>Solution :
This is an ASP CSS Isolation (aka scoped css). Default Razor Page template includes scoped css file _Layout.cshtml.css which makes ASP to inject such hash attributes into all tags in _Layout.cshtml which uses css rules from the scoped css file.
The purpose of these attributes is to avoid overlapping rules with the same name from different components or pages.
And of course you can turn this behavior off by moving css rules from scoped css file to any other.
You can learn more about CSS Isolation from this link https://docs.microsoft.com/en-us/aspnet/core/razor-pages/?view=aspnetcore-6.0&tabs=visual-studio#css-isolation