I'm in the middle of upgrading a solution from VS2010/MVC3/.Net 4 to VS2012/MVC4/.Net 4.5. The solution has been upgraded using VS2012's project migration tool and I followed this guide to upgrade MVC3 to 4.
At the moment, Razor is giving me problems. Syntax highlighting doesn't appear for anything but the layout page, and when I try to move around in a view I either get the dialog:
Waiting for a background operation to complete. This dialog will close
when the operation completes.
Or I get an error telling me to check the Visual Studio activity log (C:\Users{User}\AppData\Roaming\Microsoft\VisualStudio\11.0\ActivityLog.xml), which led me to this error:
System.NullReferenceException: Object reference not set to an instance
of an object. at
Microsoft.VisualStudio.Web.HTML.Implementation.Projection.GrowingSpanTracker.EnsureNoOverlap()
at
Microsoft.VisualStudio.Web.HTML.Implementation.Projection.GrowingSpanTracker.EnsureTrackingPoints()
at
Microsoft.VisualStudio.Web.HTML.Implementation.Projection.GrowingSpanTracker.OnTextBufferChanged(Object
sender, TextContentChangedEventArgs e) at
Microsoft.VisualStudio.Text.Utilities.GuardedOperations.RaiseEvent[TArgs](Object
sender, EventHandler`1 eventHandlers, TArgs args)
The Source column of the log says it comes from a "Editor or Editor Extension". I'm running vanilla VS2012 here, with no extensions aside from the first party stuff (Microsoft Web Developer Tools, NuGet Package Manager, and Visual Studio Extensions for Windows Library for JavaScript).
EDIT: Some additional details. If I create a new solution and MVC4 project, add the line:
#RenderSection("title", false)
to the layout, and then attempt to define the section in a view:
#section title{Stuff}
The moment I start typing "Stuff" within the braces I get the same errors/behavior.
Turns out whatever changed in Razor made braces a bit more...sensitive. If you have a section defined in your layout like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#RenderSection("title", false) - MyApp</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#RenderSection("css",false)
</head>
...
And then, in a view that uses the layout, try to use that section exactly like this (make sure you actually type it, don't copy/paste):
#model MyApp.Web.Models.HomeIndexModel
#section title {Lovely Title}
Razor will throw a fit and toss an error into your Visual Studio activity log. Highlighting and most Intellisense support will also fail to work. After some trial and error, I found that it works fine if you basically never leave the braces on the same line. So, write it like this:
#model MyApp.Web.Models.HomeIndexModel
#section title {
Lovely Title
}
And it will work fine.
Related
Problem
Editor-1
Built with
NextJs
ReactJs
Chakra-UI
Open Source editor
Editor-2
Built With
NextJs
ReactJs
Open Source editor
No chakra UI
Editor-2 has no problem but Editor-1 has a problem.
To reproduce
Paste the below markdown into both editors one by one
# Save your application from crashing by the wrong use of Web Storage API or localStorage in the browser
While coding front-end applications, we may need to store some data on the client side. There are four types of storage on the browser namely cookie, localStorage, sessionStorage and indexDB.
## Github source
see code for
- [getLocalStorage](https://gist.github.com/ats1999/877f00d4618f091e606bd77fd0a58f8c#file-save-web-storage-js-L2)
- [setLocalStorage](https://gist.github.com/ats1999/877f00d4618f091e606bd77fd0a58f8c#file-save-web-storage-js-L12)
- [isCookie](https://gist.github.com/ats1999/877f00d4618f091e606bd77fd0a58f8c#file-save-web-storage-js-L23)
## What is `Web Storage API`
The Web Storage API provides mechanisms by which browsers can store key/value pairs, in a much more intuitive fashion than using cookies.
<https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API>
***
When you refer to the above-mentioned document, then you'll get the importance of **web storage**. But do you know that if you are not using it safely, then it'll break your application from further processing? Meaning, if the cookie is blocked, then you won't be able to access `web storage API`, it'll throw an error like below.
// error - when cookie is blocked
Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
at file:///home/rahul/Desktop/projects/test/index.js:1:1
## Let's try
[block-cookie](https://www.google.com/search?q=how+to+block+cookie&oq=how+to+block+cookie&aqs=chrome..69i57.4096j0j1&sourceid=chrome&ie=UTF-8)
> You can refer to the above link to know more about, how can you block cookies.
**HTML file**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="index.js"></script>
<title>Document</title>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
**JavaScript file**
// index.js
if(localStorage)
console.log("local item storage is persent")
console.log("hello")
Now, after blocking the cookie, load the HTML file in a browser. You won't see any information on browser console`(hello), etc`. This is because, once your script encountered an exception, the javascript engine stops further processing.
In order to avoid crashing the application, we need to wrap the code into `try` and `catch`.
// index.js
try {
if(localStorage)
console.log("local item storage is persent")
} catch (error) {
console.log(error)
}
console.log("hello")
Now, you can try the above code. In the above code, exception is handled by the `catch` block. Although, we still can not access `localStorage` this way our application will not crash.
## Do I need to `try/catch` everywhere?
Writing `try/catch` everywhere can be a tedious task. To avoid writing `try/catch`, we can wrap it into another function.
/**
* get item from localstorage
* #param {String} str name of attribte in local storage`
* #returns item | false
*/
function getLocalStorage(str){
try {
return localStorage.getItem(str);
} catch (error) {
return false;
}
}
// call
getLocalStorage('item');
## conclusion
instead of using `localStorage.getItem(str)` , we should use `getLocalStorage(str)`.
If you liked, then please give a star -> <https://gist.github.com/ats1999/877f00d4618f091e606bd77fd0a58f8c>
## Thanku
Now
Compare the scroll bar of both editors.
Editor-1 scroll bar
Editor-2 scroll bar
The Problem
You can see that the editor-1 scroll bar is ending before the end of the editor. But, the editor-2 scroll bar is ending at the right position.
The only difference in both is that editor-1 uses chakra-ui as the UI framework in the entire application.
I was able to create the desired result by adding a height: 100% to the div element (see image).
Here was the update that was made. If you need to use global css, then I'd suggest targeting .ProseMirror to add the height property. I simply added inline css using the DOM in Chrome to show what change I made:
Image before adding in the height property. Notice the gap. Not just with the scrollbar but with the text itself. It doesn't go all the way to the bottom.
Image after the update, now it looks like Editor 2!
i'm building my first gatsby site and i've run into a few css issues during deployment.
first off, when i load the site, none of the css loads - but when i click on latest promotions/hktaxi (completed pages) and then epayment services (links back to index.js - same as homepage), the css loads. i initially thought this was a netlify issue, which is why i decided to deploy it to github pages too - but the page looks exactly the same on both platforms.
the page is responsive on web, but not on mobile. i've read solutions online that the meta tag for the viewport should be put in my html file - however, i don't have one. should i be creating a html.js file and inserting the meta tag there?
put the repo here for reproducibility: github.com/claudiahleung/gatsby-learnings
thanks!
There's a lack of implementation but a few cents and a bunch of plausible causes:
It seems, according to the described behavior that you have some hydration issues. At the initial render point, none of your styles are being loaded or applied but when you move back and forwards (where rehydration occurs) it loads. This issue normally appears when you block that hydration by pointing directly to the DOM instead of React's virtual DOM (vDOM), for instance, when asking for window or document outside React's scope (without hooks).
That said, this is an implementation issue, not a Netlify's or GitHub issue. This should (and must) happen when building your project locally, since, in the end, what Netlify's does is to build your project on their server and you should be able to reproduce it locally by gatsby build && gatsby serve. If locally things work as expected, you may start thinking in a Netlify issue (normally related with mismatching Node versions between environments).
In your case, I'm pretty sure that your issue comes because you are using styled-components but you haven't read the implementation details in Gatsby's docs because you are missing the required plugins and details in your gatsby-config.js such as:
module.exports = {
plugins: [`gatsby-plugin-styled-components`],
}
That's not true at all, you can customize the HTML output (because Gatsby allows you to do it) and manipulate it as you wish, adding the needed meta tags (which is not the solution to your issues). Simply run:
cp .cache/default-html.js src/html.js
Or manually copy the default-html.js from .cache folder to /src and rename it to html.js. If Gatsby, when compiling your project, finds that file under /src folder, will use it as a "template" for your compiled code. It will look like:
import React from "react"
import PropTypes from "prop-types"
export default function HTML(props) {
return (
<html {...props.htmlAttributes}>
<head>
<meta charSet="utf-8" />
<meta httpEquiv="x-ua-compatible" content="ie=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
{props.headComponents}
</head>
<body {...props.bodyAttributes}>
{props.preBodyComponents}
<div
key={`body`}
id="___gatsby"
dangerouslySetInnerHTML={{ __html: props.body }}
/>
{props.postBodyComponents}
</body>
</html>
)
}
HTML.propTypes = {
htmlAttributes: PropTypes.object,
headComponents: PropTypes.array,
bodyAttributes: PropTypes.object,
preBodyComponents: PropTypes.array,
body: PropTypes.string,
postBodyComponents: PropTypes.array,
}
Outside the scope of the question. I would recommend ignoring the .cache and the public folders by adding them in the .gitignore file. They are autogenerated in each project compilation and it may lead you to some Git conflicts (unless you are the only contributor) but it's a good practice to don't push it to avoid noise in the repository.
I've downloaded a bootstrap template and I'm trying to serve the page using Thymeleaf and Spring MVC. When I open the actual page statically on my computer it shows up as it was shown online, but when I start my Spring Boot application I get errors in the parsing of the HTML file.
Example:
rg.xml.sax.SAXParseException: Open quote is expected for attribute "onclick" associated with an element type "a".
All of the exceptions I get are with rg.xml.sax.SAXParseException and no matter how many I change it wants me to fix more so I realized this must be a configuration issue, because how else would it work statically.
So hoping I can get some pointers:
Here is the head of my HTML file:
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="description" content=""/>
<meta name="author" content=""/>
<title>Stylish Portfolio - Start Bootstrap Theme</title>
<link href="../static/css/bootstrap.min.css"
th:href="#{css/bootstrap.min.css}" rel="stylesheet"/>
<!-- Custom CSS -->
<link href="../static/css/stylish-portfolio.css"
th:href="#{css/stylish-portfolio.css}" rel="stylesheet"/>
<!-- Custom Fonts -->
<link href="../static/font-awesome/css/font-awesome.min.css"
th:href="#{font-awesome/css/font-awesome.min.css}" type="text/css"/>
</head>
Now, I thought this was a Thymeleaf issue, but I took all the Thymeleaf away and make the same file with this header and got the same HTML errors:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="description" content=""/>
<meta name="author" content=""/>
<title>Stylish Portfolio - Start Bootstrap Theme</title>
<link href="../static/css/bootstrap.min.css"/>
<!-- Custom CSS -->
<link href="../static/css/stylish-portfolio.css"/>
<!-- Custom Fonts -->
<link href="../static/font-awesome/css/font-awesome.min.css"/>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css"/>
</head>
Here is the endpoint that is serving this content:
#RequestMapping(value = "/test", method = RequestMethod.GET)
public static String test() throws RuntimeException {
try{
return "index_bootstrap";
} catch (Exception e) {
throw new RuntimeException(e);
}
}
Any pointers as to why I get errors like these would be a huge help:
2016-12-27 20:53:16.956 ERROR 73461 --- [nio-8080-exec-1] o.thymeleaf.templateparser.ErrorHandler : [THYMELEAF][http-nio-8080-exec-1] Fatal error during parsing
org.xml.sax.SAXParseException: Open quote is expected for attribute "onclick" associated with an element type "a".
at org.apache.xerces.util.ErrorHandlerWrapper.createSAXParseException(Unknown Source) [xercesImpl-2.11.0.jar:na]
2016-12-27 20:53:16.959 ERROR 73461 --- [nio-8080-exec-1] org.thymeleaf.TemplateEngine : [THYMELEAF][http-nio-8080-exec-1] Exception processing template "index2": Exception parsing document: template="index2", line 34 - column 36
2016-12-27 20:53:16.963 ERROR 73461 --- [nio-8080-exec-1] o.a.c.c.C.[.[.[/].[dispatcherServlet] : Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed; nested exception is org.thymeleaf.exceptions.TemplateInputException: Exception parsing document: template="index2", line 34 - column 36] with root cause
org.xml.sax.SAXParseException: Open quote is expected for attribute "onclick" associated with an element type "a".
Thymeleaf 2.1(currently used in spring boot)
Why are you getting exceptions? It's because Thymeleaf works in six different modes. Most of them works only with well-formed XML files. The default mode for thymeleaf in spring as well. You wrote your files in careless HTML 5 manner, which is not xml valid and parser couldn't handle those files.
Here is description from thymeleaf documentation.
Out-of-the-box, Thymeleaf allows you to process six kinds of templates, each of which is called a Template Mode:
XML
Valid XML
XHTML
Valid XHTML
HTML5
Legacy HTML5
All of these modes refer to well-formed XML files except the Legacy HTML5 mode, which allows you to process HTML5 files with features such as standalone (not closed) tags, tag attributes without a value or not written between quotes. In order to process files in this specific mode, Thymeleaf will first perform a transformation that will convert your files to well-formed XML files which are still perfectly valid HTML5 (and are in fact the recommended way to create HTML5 code).
According to this, you could leave your html files as they are and make them work by switching thymeleaf mode to "Legacy HTML5". You could accomplish this in two steps:
In your application.properties file append the line:
spring.thymeleaf.mode=LEGACYHTML5
This mode need additional Neko library on classpath in version greater than 1.9.15. If you are using maven simply add a following dependency to your pom file:
<dependency>
<groupId>net.sourceforge.nekohtml</groupId>
<artifactId>nekohtml</artifactId>
<version>1.9.22</version>
</dependency>
And that's it. Above solution worked fine for me (with Spring Boot 1.4.1).
Thymeleaf 3
You apparently don't use that version of thymeleaf, but I just let you know. 3rd paragraph of migration guide says, that in Thymeleaf version 3 you needn't any extra effor to support HTML 5 files.
Thymeleaf 3.0 is no longer XML-based, thanks to its new parsing system, so there is no need to write XML-valid HTML code anymore (even if we still recommend you to do so for legibility reasons). When in HTML mode, Thymeleaf is now much more lenient in terms of closed tags, quoted attributes, etc.
<!--版本3对网页编写放松-->
<thymeleaf.version>3.0.5.RELEASE</thymeleaf.version>
<thymeleaf-layout-dialect.version>2.2.1</thymeleaf-layout-dialect.version>
</properties>
I've installed Microsoft Expression Web 4, installed php 5.3.28, renamed the php.ini-production to php.ini, did display_errors=on, did cgi.force_redirect=0, switched the positions of php_mbstring.dll and php_exif.dll (ran php.exe and it said it could not find php_mbstring.dll), directed expression web to the php-cgi.exe, and forced expression web 4 to boot a server for every test. I run the sample code for php information as follows...
file name - "index.php"
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled 1</title>
</head>
<body>
<?php
phpinfo() ;
?>
</body>
</html>
I get a blank page (WSOD), and am still looking for a solution.
In short I've been following the instructions given here.
And followed up with some additional potential fixes with little success.
Thank you in advance for your time.
Solved the problem, did a full reinstall of all products involved.
I am trying a very simple contentpage at ~/View.cshtml that consists of
#inherits ViewPage
#{
Layout = "SimpleLayout";
ViewBag.Title = "Title";
}
<div id="content-page">
<p>Test</p>
</div>
at ~/Views/Shared/SimpleLayout.cshtml is
<!DOCTYPE HTML>
<html>
<head>
<title>Simple Layout</title>
</head>
<body>
<div id="content">
#RenderBody()
</div>
</body>
</html>
In debug mode it works fine, but on deploy it then shows
Compilation Error
Description: An error occurred during the compilation of a resource
required to service this request. Please review the following specific
error details and modify your source code appropriately.
Compiler Error Message: CS0146: Circular base class dependency
involving 'RazorOutput.ViewPage' and 'RazorOutput.ViewPage'
I'm trying to follow the RockStars example as closely as possible, so don't have an idea of what's wrong. My service views work fine.
Any suggestions would be appreciated.
Update
When the name of the page is changed (e.g. NewPage.cshtml) then it will not work in Debug either, throwing the same exception.
In Web.Config, make sure that you have:
<compilation debug="false">
I was getting the same error, and this fixed it.
Setting compilation debug="false" as suggested above did not work for me.
I was having the same error running locally in IIS Express and found that if I added this to the web.config it would work:
<appSettings>
<add key="webPages:Enabled" value="false" />
</appSettings>
I found that setting in ServiceStack's RazorRockstar sample, after comparing it line by line with my own project to see why mine wasn't working.
I was receiving similar compilation errors when trying to render Razor pages. Check that your website's AppHost is inheriting from AppHostBase and not AppHostHttpListenerBase.