问题
I'm developing an app in ASP.Net MVC4 and am having a strange issue with whitespace. I've developed plenty of MVC3 sites with Razor without this issue.
Here's my template cshtml file:
<!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>
Note the line with the RenderBody() call - there's no extraneous whitespace here.
When I call an action, the rendered body is prepended with some whitespace which I can't see that I've added, and can't seem to get rid of. I call an action with no logic, it only returns the following view:
@{
ViewBag.Title = "Dashboard";
}
<h1>Dashboard</h1>
It's definitely using the correct template (specified in my _ViewStart.cshtml)
Viewing the page in Google Chrome, the source shows extra whitespace. See the image below:
A similar issue can be seen in IE10. This is obviously affecting the design. I've tried using Meleze.Web to strip out any extra whitespace, but whitespace still remains.
I'm at a loss with this one, as it's a relatively simple site so far, there's nothing funky going on yet, so I can't see where this whitespace is coming from.
Has anybody else seen this with MVC4 or Razor before?
Edit: I've tried removing all stylesheets and script files, the whitespace still exists.
回答1:
After struggling with this for a while, I've found the solution.
There must have been a funny character in the root _ViewStart.cshtml file. I deleted the contents of the ViewStart file and retyped it, which solved the problem. This got me thinking that a strange character could be causing the issue.
Don't like answering my own question, but I hope this helps somebody else. In theory, this won't be an MVC4-specific issue, you could encounter the same problem in MVC3.
回答2:
I encountered the same problem, and Steve's answer put me on the right track, that it might be an unusual character embedded in the file.
In my case, it turned out to be a duplicate Unicode Byte-Order Mark (0xEFBBBF) at the start of the file. It seems to have snuck in when I copied and pasted the file contents in from a Git Extensions diff view.
Incidentally, Visual Studio has a built-in Hex viewer. If you right-click on a file in the Solution Explorer and click "Open With..." you can select "Binary Editor".
回答3:
I have been experiencing the same problem, and tried the approach you put forth, Steve. However, that didn't solve my problem. What I found was involved in causing the problem was the h2 tag at the top of my child page:
<h2>@ViewData("Title")</h2>
When I removed the wrapping tags, everything worked fine:
@ViewData
As a test, I took the styles for the h2 and placed them in their own class and then wrapped my page title content with a span:
<span class="pagetitle">@ViewData("Title")</span>
This worked fine, so is how I corrected the problem with my site. Though I don't know the true root cause, this did fix my problem, so perhaps it will help someone else out there.
回答4:
I've just experienced a similar problem - in my case, one of the @using directives at the top of the view was causing an issue. I found the same thing in a couple of different views in my project.
One thing that helped me to locate the offending characters was pasting the whole view's contents into Notepad - it was immediately clear that the lines in question had somehow been encoded differently (they appeared smaller than the other lines, even in Notepad). Deleting the lines and rewriting them from scratch solved the issue, though I'm sadly none the wiser how I got into that position in the first place...
回答5:
I have had the same issue and thanks to the clues here I was able to identify the problem.
After a lot of investigation I figured out that there was a Unicode character ‘zero width no-break space’ at the start of the page. This character is added to a page when it is saved/encoded as ‘UTF-8 with BOM’. I can only guess that the page was edited outside of visual studio, copied in from somewhere else, or maybe the page encoding was set incorrectly in VS. You stated in other answers you can see it by the looking at the once copied and pasted into notepad.
回答6:
I faced the same problem, and I fixed it as follwoing: - change column (Field) datatype in your database from nchar to nvarchar. this is because nchar reserve fixed length, hence if your string is shorter than this length it will complete it with spaces.
回答7:
I had a similar problem, but a much more obvious solution. I had an Html.Partial() inclusion in my <head> element with an ; after the method call. Which again is rendered in the body.
<head>
@await Html.PartialAsync("Test"); // The ";" is rendered in the body, remove it!
</head>
<body>
...
</body>
来源：https://stackoverflow.com/questions/12601957/strange-whitespace-appearing-in-mvc4-razor-view