ASP.NET MVC Razor 呈现额外的空白

Question

在 Asp.net MVC 中，Razor 在文本块之间插入额外的空间。我想以这种方式呈现一个列表：“1, 2, 3”，但得到“1, 2, 3”。

@for (int i = 1; i < 3; i++)
{
  <text>@i</text>
  if (i != 2)
  {
    <text>, </text>
  }
}

有什么办法可以去掉多余的空格？

Answer 1

我想这样渲染一个列表：“1, 2, 3”

又快又脏：

@string.Join(", ", Enumerable.Range(1, 3))

显然，自定义助手似乎更适合在视图中格式化某些内容：

public static class HtmlExtensions
{
    public static IHtmlString FormatList(this HtmlHelper html, IEnumerable<int> list)
    {
        return MvcHtmlString.Create(string.Join(", ", list));
    }
}

然后简单地说：

@Html.FormatList(Model.MyList)

Answer 2

您看到数字和逗号之间有多余的空格，因为您的剃须刀模板在数字和逗号之间包含换行符（在浏览器中显示为空格）：

@for (int i = 1; i < 3; i++)
{
  <text>@i</text> >LINE BREAK HERE<
  if (i != 2)
  {
    <text>, </text>
  }
}

我喜欢Darin's answer，我建议删除循环并用更具声明性的语句替换它，但如果你不想走那么远，请尝试至少删除换行符：

@for (int i = 1; i < 3; i++)
{
    <text>@i</text>if (i != 2){<text>, </text>}
}

Answer 3

您可以将所有文本累积在StringBuilder 中，然后在循环之外执行@stringBuilderObject.ToString()，而不是每次在循环中写出不同位置的文本。

Answer 4

问题在于生成的源。当您查看实际来源时：

1 , 2 , 3

如您所见，其中有很多空白区域，浏览器会折叠成一个空格（查看definition for normal）。

如果您所做的只是输出这三个数字，则使用StringBuilder 或string.Join 是解决此问题的方法。但是，如果您正在尝试做其他事情并且这是一个简化的示例，那么see this blog post 可以使用ol/ul 和lis 来实现它。

Answer 5

我可能认为这不是 Razor 的问题，而是元素渲染时带有一些边距。

1. 打开 FireBug（或 Chrome 或其他），看看它确实是标记问题。
2. 在你的css文件中尝试添加

文本{边距：0}