MVC4 Razor 视图中出现奇怪的空格答案

【问题标题】：Strange whitespace appearing in MVC4 Razor ViewMVC4 Razor 视图中出现奇怪的空格
【发布时间】：2012-09-26 12:41:40
【问题描述】：

我正在用 ASP.Net MVC4 开发一个应用程序，但遇到了一个奇怪的空白问题。我用 Razor 开发了很多 MVC3 网站，没有这个问题。

这是我的模板 cshtml 文件：

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>HF - Content Management - @ViewBag.Title</title>
    <link href="@Url.Content("~/content/bootstrap/bootstrap.min.css")" rel="stylesheet" />
    @Styles.Render("~/bundles/css/hf-cms-logged-in")
</head>
    <body>

        @Html.Partial("Partials/NavBar")

        <div class="container">@RenderBody()</div>

        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="@Url.Content("~/scripts/bootstrap/bootstrap.min.js")"></script>
        @Scripts.Render("~/bundles/js/validation")
        <script src="@Url.Content("~/scripts/hf-cms.js")"></script>
    </body>
</html>

注意调用 RenderBody() 的那一行 - 这里没有多余的空格。

当我调用一个动作时，渲染的主体会添加一些空白，我看不到我已经添加了这些空白，而且似乎无法摆脱这些空白。我调用一个没有逻辑的动作，它只返回以下视图：

@{
    ViewBag.Title = "Dashboard";
}    
<h1>Dashboard</h1>

它肯定使用了正确的模板（在我的 _ViewStart.cshtml 中指定）

在谷歌浏览器中查看页面，源代码显示额外的空白。见下图：

在 IE10 中可以看到类似的问题。这显然影响了设计。我尝试使用Meleze.Web 去除任何多余的空白，但空白仍然存在。

我对这个感到茫然，因为到目前为止它是一个相对简单的网站，还没有什么时髦的东西，所以我看不出这个空白是从哪里来的。

以前有没有其他人用 MVC4 或 Razor 看到过这个？

编辑：我已经尝试删除所有样式表和脚本文件，空白仍然存在。

【问题讨论】：

Partials/NavBar的内容是什么？
我以前见过这个，但是在浏览器中查看时它并没有影响元素的布局。它对您的设计有何影响？
我不认为 NavBar 视图会影响有问题的空白，因为它位于单独的 div 中，但尽管如此：pastie.org/4808917
我正在使用 Twitter Bootstrap，但我还没有弄清楚哪些 CSS 规则会影响它，但是如果我在 Chrome 开发人员工具/html 检查器中删除该空格，则该空格下方的内容会向上移动大约 20 像素
如果您有 VS2012，您是否尝试过 Page Inspector 功能以查看它是否会详细说明您的来源？

标签： asp.net-mvc razor asp.net-mvc-4

【解决方案1】：

经过一段时间的努力，我找到了解决方案。

在根 _ViewStart.cshtml 文件中一定有一个有趣的字符。我删除了 ViewStart 文件的内容并重新键入它，从而解决了问题。 This 让我想到一个奇怪的角色可能会导致问题。

不喜欢回答我自己的问题，但我希望这对其他人有所帮助。理论上，这不会是特定于 MVC4 的问题，您可能会在 MVC3 中遇到同样的问题。

【讨论】：

这解决了我的问题。多么奇怪的问题.. 顺便说一句，实际上鼓励你回答你自己的问题 - blog.stackoverflow.com/2011/07/…
这是什么奇怪的角色？
不幸的是我没有发现。我只是再次创建了文件，而不是分析导致问题的确切字符。
非常奇怪——我也发生了同样的事情。当我将 _ViewStart 文件复制到另一个文本编辑器中时，顶部的“@”字符出现了奇怪的风格化。当我删除它并重新输入它时，它看起来不一样了。我对此没有任何解释，但它也解决了我的问题。
哇。所以我似乎也有同样的问题。我将 _ViewStart 复制到记事本 ++ 中，也注意到了奇怪的格式问题。为了记录，奇怪的字符似乎是\ufeff你知道，好的“零宽度不间断空间”，从现在开始我将称之为“暗物质”。

【解决方案2】：

我遇到了同样的问题，史蒂夫的回答让我走上了正轨，这可能是文件中嵌入的一个不寻常的字符。

在我的例子中，它原来是文件开头的重复的 Unicode 字节顺序标记 (0xEFBBBF)。当我从 Git Extensions 差异视图复制并粘贴文件内容时，它似乎已经偷偷溜进来了。

顺便说一下，Visual Studio 有一个内置的十六进制查看器。如果您在解决方案资源管理器中右键单击文件并单击“打开方式...”，则可以选择“二进制编辑器”。

【讨论】：

【解决方案3】：

我遇到了同样的问题，并尝试了你提出的方法，史蒂夫。然而，这并没有解决我的问题。我发现导致问题的原因是我的子页面顶部的 h2 标签：

<h2>@ViewData("Title")</h2>

当我删除包装标签时，一切正常：

@ViewData

作为测试，我采用了 h2 的样式并将它们放在自己的类中，然后用 span 包装我的页面标题内容：

<span class="pagetitle">@ViewData("Title")</span>

这很好，所以我如何纠正我的网站问题。虽然我不知道真正的根本原因，但这确实解决了我的问题，所以也许它会帮助其他人。

【讨论】：

【解决方案4】：

我刚刚遇到了类似的问题 - 就我而言，视图顶部的 @using 指令之一导致了问题。我在项目的几个不同视图中发现了相同的内容。

帮助我找到违规字符的一件事是将整个视图的内容粘贴到记事本中 - 很明显，有问题的行以某种方式编码不同（它们看起来比其他行小，即使在记事本中也是如此）。删除这些行并从头开始重写它们解决了这个问题，尽管我很遗憾我一开始是如何进入那个位置的......

【讨论】：

【解决方案5】：

我也遇到过同样的问题，多亏了这里的线索，我才能够确定问题所在。

经过大量调查，我发现页面开头有一个 Unicode 字符“零宽度不间断空格”。此字符在保存/编码为“带有 BOM 的 UTF-8”时添加到页面。我只能猜测该页面是在 Visual Studio 之外编辑的，是从其他地方复制的，或者可能是 VS 中的页面编码设置不正确。您在其他答案中说，您可以通过查看曾经复制并粘贴到记事本中来看到它。

【讨论】：

【解决方案6】：

我遇到了同样的问题，我将其修复为以下问题： - 将数据库中的列（字段）数据类型从 nchar 更改为 nvarchar。这是因为 nchar 保留固定长度，因此如果您的字符串短于该长度，它将用空格完成。

【讨论】：

【解决方案7】：

我遇到了类似的问题，但有一个更明显的解决方案。在方法调用之后，我的 <head> 元素中包含 Html.Partial() 和 ;。再次呈现在正文中。

<head>
    @await Html.PartialAsync("Test"); // The ";" is rendered in the body, remove it!
</head>
<body>
   ...
</body>

【讨论】：