Question

Strange Strings in HTML Code of New ASP.NET Core Razor Projects in Visual Studio 2022

I'm encountering an issue when creating new ASP.NET Core web app (Razor) projects using Visual Studio 2022 (Community Edition 17.10.4) with .NET 8.0. Without making any modifications, I see strange strings in the generated HTML code (in this sample it is b-274z30g9x2).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Home page - WebApplication2</title>
    <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/site.css?v=pAGv4ietcJNk_EwsQZ5BN9-K4MuNYS2a9wl4Jw-q9D0" />
    <link rel="stylesheet" href="/WebApplication2.styles.css?v=uVNH-53Dn-p1ggS-urpjbs3CBgOCZPr6gbnYL3-YGfA" />
</head>
<body>
    <header b-274z30g9x2>
        <nav b-274z30g9x2 class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div b-274z30g9x2 class="container">
                <a class="navbar-brand" href="/">WebApplication2</a>
                <button b-274z30g9x2 class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span b-274z30g9x2 class="navbar-toggler-icon"></span>
                </button>
                <div b-274z30g9x2 class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul b-274z30g9x2 class="navbar-nav flex-grow-1">
                        <li b-274z30g9x2 class="nav-item">
                            <a class="nav-link text-dark" href="/">Home</a>
                        </li>
                        <li b-274z30g9x2 class="nav-item">
                            <a class="nav-link text-dark" href="/Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div b-274z30g9x2 class="container">
        <main b-274z30g9x2 role="main" class="pb-3">
            
<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

        </main>
    </div>

    <footer b-274z30g9x2 class="border-top footer text-muted">
        <div b-274z30g9x2 class="container">
            &copy; 2024 - WebApplication2 - <a href="/Privacy">Privacy</a>
        </div>
    </footer>

    <script src="/lib/jquery/dist/jquery.min.js"></script>
    <script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/js/site.js?v=4q1jwFhaPaZgr8WAUSrux6hAuh0XDg9kPS3xIVq36I0"></script>

    

<!-- Visual Studio Browser Link -->
<script type="text/javascript" src="/_vs/browserLink" async="async" id="__browserLink_initializationData" data-requestId="80fbdcdafe9d4b488020d7efe36a623d" data-requestMappingFromServer="false" data-connectUrl="http://localhost:60019/d1553d1eb4604830a9c02b0a57c28ab3/browserLink"></script>
<!-- End Browser Link -->
<script src="/_framework/aspnetcore-browser-refresh.js"></script></body>
</html>

Here are the steps I've taken to troubleshoot the issue:

Checked the release version of my project.
Tried using .NET 7.0.
Tried Visual Studio on another computer.

Interestingly, my older Razor projects don't have these strange strings in their source code and work just fine (I checked them using W3 validator to make sure I did not miss anything).

Has anyone else experienced this issue? Is this a bug or an intentional feature? How can I get rid of it? Any insights would be greatly appreciated.

2 38 2

1 Jan 1970