如何让Razor Pages不在分部视图前渲染多余空格？

这个多余的空格既不是HTML特性也不是内联span导致的，根源是Razor引擎默认会保留分部视图文件中的空白字符（换行、空格）。

你的分部视图代码里，@{}代码块结束后有换行，Razor会把这个换行转换成页面输出中的空白字符，最终就会在括号(和分部视图渲染的<span>之间多出一个空格。

解决方法 #

可以通过以下两种方式消除这个空格：

1. 压缩分部视图代码，去掉不必要的空白 #

把分部视图里的代码紧凑排列，避免代码块和HTML标签之间出现换行：

@model double
@{
    var color = Model switch
    {
        >= 1.0 => "text-primary",
        >= 0.8 => "text-success",
        >= 0.6 => "text-warning",
        _ => "text-danger",
    };
}<span class="@color">@Model.ToString("P0")</span>

注意把}和<span>放在同一行，中间不要留空格或换行。

2. 使用Razor空白控制语法 #

在代码块结束处添加-来抑制后续的空白输出，修改分部视图的代码块部分：

@model double
@{
    var color = Model switch
    {
        >= 1.0 => "text-primary",
        >= 0.8 => "text-success",
        >= 0.6 => "text-warning",
        _ => "text-danger",
    };
-}<span class="@color">@Model.ToString("P0")</span>

这里的-}会告诉Razor忽略代码块后面的所有空白字符，避免输出多余空格。

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