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.
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.
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".
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.
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...
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.
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.
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>
Related
I want to rename the folder 'VAADIN' inside the vaadin webapps folder.
When a vaadin application user rightclick the page and view page-source there it shows this folder name.
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="./VAADIN/themes/mytheme/favicon.ico">
<link rel="icon" type="image/vnd.microsoft.icon" href="./VAADIN/themes/mytheme/favicon.ico">
<script type="text/javascript" src="./VAADIN/vaadinBootstrap.js?v=7.7.0"></script>
How can i rename that folder name to something else?
No. The name of this directory is hardcoded in VaadinServlet so is not configurable.
I got this answer from vaadin forum.
https://vaadin.com/forum#!/thread/14109320
just don't do it.
Of course it can be done, and because Vaadin is all Open Source, yes it can be done.
./server/src/main/java/com/vaadin/server/Constants.java:136: final String THEME_DIR_PATH = "VAADIN/themes";
./server/src/main/java/com/vaadin/server/Constants.java:140: static final String WIDGETSET_DIR_PATH = "VAADIN/widgetsets";
are places where you'd go first but since Vaadin Framework has grown over many years and we don't live in a perfect world, there are other hard-coded places in the source code as well such as:
./server/src/main/java/com/vaadin/server/BootstrapHandler.java:538: + "/VAADIN/";
./server/src/main/java/com/vaadin/server/BootstrapHandler.java:698: + "/VAADIN/"
The name and location of the VAADIN folder is also a subject matter of many places of documentation,
like
./documentation/advanced/advanced-embedding.asciidoc:92: src="#./#VAADIN/vaadinBootstrap.js">
./documentation/advanced/advanced-embedding.asciidoc:243: src="VAADIN/vaadinBootstrap.js">
If you manage to change it everywhere and recompile the software yourself, then congratulations. It's quite some work,
and doesn't achieve that much in return.
In a nutshell, this is something we don't support - and it's not really worth it if you think about it.
Just be proud you're using state of the art web technology : ) so there's nothing to hide when people find out!
Thanks to https://vaadin.com/web/enver/home
My project is based on Angular Material framework (basically: Angular + web components in Material Design).
The problem I got into is that for some reason one directive ( md-sidenav) causes multidir error.
<md-sidenav layout="column" class="md-sidenav-left" md-component-id="left" md-is-locked-open="false" ng-controller="sideMenuController">
</md-sidenav>
I'm sure md-sidenav is the bad guy since I tried to replace it with another directive and got not issue at all. I'm also sure this directive is used nowhere else in the project, neither the controller associated to it is.
I also noticed this error appeared after I switched to a nested layout (i.e. ng-includes within the main view) but since I made several other changes to the project I can't be sure this is the actual reason.
I created a Plunkr to show the issue.
It actually doesn't run because I have no idea how to include ngRoute since a CDN is not available (feel free to edit the Plukr).
http://plnkr.co/edit/M52I7pn8D4fUaGAlOMtn
There were two mistakes , you have not put the reference as text/javascript for angualr-route script
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js" type="text/javascript"></script>
Embed the sidenav inside a div, since it is already having a directive for it,
<div ng-controller="sideMenuController">
<md-sidenav layout="column" class="md-sidenav-left" md-component-id="left" md-is-locked-open="false" >
</md-sidenav>
</div>
I'm building a simple web site in Dart Web UI. Each page has a header (with site navigation) and a footer. I've used components for the header and footer, and each page looks something like this:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="import" href="header.html">
<link rel="import" href="footer.html">
</head>
<body>
<header-component></header-component>
Page content...
<footer-component></footer-component>
</body>
</html>
This works well, but the components aren't inserted to the HTML itself but loaded dynamically from Dart (or JavaScript) code. Is there some way to have the Web UI compiler insert the header and footer to the HTML file itself so that they would be visible to search engines and to users who have JavaScript disabled?
There isn't a direct way to do this.
This is typically a server-side task: the server takes care to generate the required HTML.
Web components are all about client side, so they work on what's already delivered to the browser.
However, build.dart scripts is executed each time a file in your project changes so you can extend the script to get what you want. I don't think this is a good approach, but it solves your problem.
First add the following placeholder to the target html file (in my case web/webuitest.html):
<header></header>
Now add a header.html file to your project with some content:
THIS IS A HEADER
Now extend the build.dart script so it will check if the header.html was modified, and if it was, it will update webuitest.html:
// if build.dart arguments contain header.html in the list of changed files
if (new Options().arguments.contains('--changed=web/header.html')) {
// read the target file
var content = new File('web/webuitest.html').readAsStringSync();
// read the header
var hdr = new File('web/header.html').readAsStringSync();
// now replace the placeholder with the header
// NOTE: use (.|[\r\n])* to match the newline, as multiLine switch doesn't work as I expect
content = content.replaceAll(
new RegExp("<header>(.|[\r\n])*</header>", multiLine:true),
'<header>${hdr}</header>');
// rewrite the target file with modified content
new File('web/webuitest.html').writeAsStringSync(content);
}
One consequence of this approach is that rewriting the target will trigger build.dart once again, so output files will be built twice, but that's not a big issue.
Of course, this can be made much better, and someone could even wrap it into a library.
Currently, no, it's not possible. What you want is server-side rendering of those templates so that you can serve them directly to the client when they request your pages (including search spiders).
You might want to keep track of this issue however: https://github.com/dart-lang/web-ui/issues/107?source=c
When it's finished things are looking better.
I am here suffering from a simple, common problem.
my site is multi-language featured, built in codeigniter framework.
for eg for a french language here i have used
$lang['login'] = 'ConnÈcter';
this then appeared as Conn�cter in the view.
then i solved this by adding
<meta charset="ISO-8859-1">
which then resolved the issue.
but when the contents is loaded with characters like
Sáenz-Mata & Jiménez-Bremont
then is is changed to
Sáenz-Mata & Jiménez-Bremont
note é is changed to é even when i use
<meta charset="ISO-8859-1">
when above meta is removed, it gives me Conn�cter when the language is converted to french.
so please suggest me something which can handle both situations.
hope somebody understands it.(got messed up describing.)
thanks.
use <meta charset="utf-8">
Use UTF-8 consistently for all pages, as explained in the CodeIgniter User guide. Make sure the encoding of each file matches its declared encoding. What you are experiencing now is caused by mixing encodings (UTF-8 and ISO-8859-1 mostly).
I wondered how I can stop those annoying compiler warnings "The class or CssClass value is not defined" coming from my ASP.NET MVC partial views/ASCX user controls. The CSS is correctly defined, but the reference to the CSS file is obviously on the master page only. My partial views contain lots of CSS class references on div's etc. and so I get massive amounts of warnings which I shouldn't see.
How can I solve this?
Thank you !
Include this in your partial view:
<% if (false) { %>
<link rel="stylesheet" type="text/css" ...
<% } %>
This will make intellisense happy, and excludes the stylesheet when the page is rendered, so that it is not included twice.
One way is to turn HTML Syntax Checking off (Tools->Options->Text editor->HTML->Show Errors->In CSS).
I use the Firefox Tidy plug in, which gives better advice, IMHO.
This is not a flaw in ASP.Net MVC, and I don't think it's going to be it's going to be fixed in the next version. This is a 'limitation' (notice how i avoid the word flaw) in asp.net (not just mvc) that prevents it from accessing header information that's included in the master page. So you don't have access to javascript/css in the content pages/usercontrols.
The code provided by Robert Harvey is a hack solution that we've been using to overcome this.
It works by using the enclosing the include file in an if block that's always false. So the compiler sees the css file but the runtime doesn't.