.NET Core MVC中_Layout.cshtml内下拉选单被附加asp版本号问题

API 探路者

2026-7-7

问题

在.NET Core MVC应用中添加带国旗图标的语言选择器，功能正常，但下拉选项被自动附加了ASP.NET版本号。将选择器移到_Layout.cshtml以外的文件就能正常显示，相关代码如下：

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - WebApplication2</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/0.8.2/css/flag-icon.min.css">
    <link rel="stylesheet" href="./css/site.css">
    <link rel="stylesheet" href="./WebApplication2.styles.css"  />
</head>
<body>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
        <select class="selectpicker" data-width="fit">
            <option data-content="<span class='flag-icon flag-icon-cz'></span>"></option>
            <option data-content="<span class='flag-icon flag-icon-de'></span>"></option>
            <option data-content="<span class='flag-icon flag-icon-gb'></span>"></option>
        </select>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="./js/site.js"></script>
    <script type='text/javascript'>
        $(function () {
            $('.selectpicker').selectpicker();
        });
    </script>
    @await RenderSectionAsync("Scripts", required: false)
</body>

问题表现：下拉选项中出现额外的ASP版本号后缀，仅在_Layout.cshtml中存在该问题，移至其他视图文件则显示正常。

解决方案

该问题源于.NET Core视图引擎在布局页中会自动对疑似资源路径的内容追加静态文件版本号，误将data-content中的HTML结构识别为需要处理的资源。以下是几种可行的解决方法：

显式定义选项的空值与文本
给每个<option>添加空的value属性和文本内容，避免框架自动填充版本号：

<select class="selectpicker" data-width="fit">
    <option value="" data-content="<span class='flag-icon flag-icon-cz'></span>"></option>
    <option value="" data-content="<span class='flag-icon flag-icon-de'></span>"></option>
    <option value="" data-content="<span class='flag-icon flag-icon-gb'></span>"></option>
</select>

使用局部视图渲染选择器
创建局部视图_LanguageSelector.cshtml，将选择器代码放入其中，再在_Layout.cshtml中通过局部视图引用：
```
@await Html.PartialAsync("_LanguageSelector")
```
局部视图内的内容不会被布局页的资源版本化逻辑干扰，可避免版本号追加。

用Html.Raw()转义data-content内容
通过Html.Raw()告诉视图引擎不要解析data-content中的HTML，防止被误识别为资源路径：

<select class="selectpicker" data-width="fit">
    <option data-content='@Html.Raw("<span class=\"flag-icon flag-icon-cz\"></span>")'></option>
    <option data-content='@Html.Raw("<span class=\"flag-icon flag-icon-de\"></span>")'></option>
    <option data-content='@Html.Raw("<span class=\"flag-icon flag-icon-gb\"></span>")'></option>
</select>

全局禁用静态文件版本追加（不推荐）
若无需全局静态文件版本化，可在Program.cs中关闭该功能，但此方法会影响所有静态资源，仅建议在特殊场景使用：
```
app.UseStaticFiles(new StaticFileOptions
{
    OnPrepareResponse = ctx =>
    {
        ctx.Context.Response.Headers.Remove("X-Version");
    }
});
```

内容的提问来源于stack exchange，提问作者Usama Shahid