Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Strange whitespace appearing in MVC4 Razor View

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:

Whitespace shown in Google Chrome developer tools

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.

like image 365
Steve Kennaird Avatar asked Sep 26 '12 12:09

Steve Kennaird


People also ask

What is @section in Razor?

@section is for defining a content are override from a shared view. Basically, it is a way for you to adjust your shared view (similar to a Master Page in Web Forms).

What is the difference between Razor view and Razor page?

The difference between them is that View Pages are Razor views that are used to provide the HTML representations (aka views) for services in much the same way View Pages work for MVC Controllers.

What is ViewData in Razor?

ViewData is a container for data to be passed from the PageModel to the content page. ViewData is a dictionary of objects with a string-based key. You add items to ViewData as follows: public class IndexModel : PageModel.

What does the Razor View Engine consists of?

Razor View Engine is a markup syntax which helps us to write HTML and server-side code in web pages using C# or VB.Net. It is server-side markup language however it is not at all a programming language.


1 Answers

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.

like image 189
Steve Kennaird Avatar answered Oct 25 '22 11:10

Steve Kennaird