Looking at some Razor views, I see a lot of times where a <style> tag is added directly in a view (CSHTML) file.
This seems to work fine, but in fact it adds the <style> tag inside the <body> tag, while it should generally be inside the <head> tag.
How would you some inline CSS to a single razor page so that it appears within the <head> tag? Is there a preferred way?
Like this:
Shared/_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
...
#RenderSection("HeadStyles", required: false)
</head>
<body>
...
</body>
</html>
Home/Index.cshtml or whatever other view you need to do this in
#section HeadStyles {
<style>
.custom-style { color: red; }
</style>
}
The reason why inclusion of <style> tags is not recommended inside <body> is because of causing FOUC.
But if your <style> tag applies to content that's after it in DOM, that risk is null.
No browser currently in use has any trouble parsing <style> tags placed in <body>.
Technically, when the browser meets a <style> tag in DOM it:
pauses rendering
reconstructs CSSOM to include the new declarations
rebuilds the already rendered DOM (this is where FOUC happens, if)
carries on with rendering
best variant is -
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- here is page content -->
<script src="scripts.js" type="text/javascript"></script>
</body>
</html>
in this case browser will load in this sequence
styles
content (which will be already styled)
scripts (which will not slow down page rendering in case if scipts are not so little)
Related
I have a _Layout.cshtml file that contains the following line.
#RenderSection("Scripts", required: false)
And then I have a StorageLayout.cshtml file that specifies _Layout.cshtml as the layout file. StorageLayout.cshtml defines the MainMenu section and contains #RenderBody().
But then my page that uses StorageLayout.cshtml as the layout file gives me an error:
InvalidOperationException: The following sections have been defined but have not been rendered by the page at '/Pages/Shared/_StorageLayout.cshtml': 'Scripts'. To ignore an unrendered section call IgnoreSection("sectionName").
I'm not sure I understand this. The Scripts section is explicitly not required, so why is it an error? And, for that matter, what would be the correct way to implement this section in nested layout files?
required is set to false, which means the section is optional.If the section is not optional, every content page that references the layout page must use the #section directive to define the section and provide content:-
#section Scripts{
// content here
}
In some cases, you might want to make a section optional, but you want to provide some default content in the event that the content page didn't provide anything for the section. You can use the IsSectionDefined method for this:-
#if(IsSectionDefined("OptionalSection"))
{
#RenderSection("OptionalSection")
}
else
{
// default content
}
Any sections defined in the master layout should also be redefined in child layouts:-
_MasterLayout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link href="/css/site.css" rel="stylesheet" type="text/css" />
</head>
<body>
#RenderBody()
#RenderSection("scripts", required:false)
</body>
</html>
_ChildLayout.cshtml
#{
Layout = "/_MasterLayout";
}
<div class="main-content-two-col">
#RenderBody()
</div>
#section scripts {
#RenderSection("scripts", required: false)
}
I think this would help resolve your issue.
I would like my default.aspx to use masterpage but have a different body than the rest of my webpages is this possible? Basically I want my default.aspx to have a background image for the entire page but still use the masterpage because I have menu and things I would like to use on that page as well. Is this possible?
You can define the styles and everything for a particular page in Content Page and not Master Page. In your case, if you want a separate styles and background for default.aspx, you can define those styles in default.aspx page.
inside of default.aspx do
<style>
BODY { background-image: url(....image here ....);}
</style>
I know it is not the nicest pattern but... cmon, masterpages
You can inline it on default.aspx
<style>
body{
/*Background stuff here */
}
</style>
or have an if on your master page
#if(currentpage == "home")
<div id="background">
</div>
#endif
or
#if(currentpage == "home")
<body style="background-stuff-here">
#else
<body>
#endif
Put these lines in you master page head section
<head>
<link type="text/css" rel="stylesheet" href="/styles/common1.css" />
<script type="text/javascript" src="/scripts/common1.js"></script>
<asp:contentplaceholder id="ExtraStylesAndScripts" runat="server" />
</head>
And these lines to you default page
<asp:content contentplaceholderid="ExtraStylesAndScripts" runat="server">
<link type="text/css" rel="stylesheet" href="/styles/extra1.css" />
<link type="text/css" rel="stylesheet" href="/styles/extra2.css" />
<script type="text/javascript" src="/scripts/extra1.js"></script>
<script type="text/javascript" src="/scripts/extra2.js"></script>
</asp:content>
Now you are free to set different page style for different content pages.
You can change background or other appearance in "styles/extra1.css" files.
A very simple solution would be a MultiView and pass in something like an enum object telling the master page what View to display. If you in the future need to add a different design for another page you can just add a View.
I can't get my style sheet to work in Visual Studio. I have tried quite a few things. Here is my code as it currently is.
Index File (Home Page)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
<link href="indexStyleSheet.css" rel="stylesheet" />
</head>
<body>
<h2>red</h2>
</body>
</html>
CSS (The file type is .css)
h2 { color: red;}
Screen shot of file hierarchy
As your css file is in the same directory as your index.html, you don't need to specify a path starting from the root of your project.
This should do it.
<link href="indexStyleSheet.css" rel="stylesheet" />
Edit:
Also, I didn't catch that immediately, what is most likely the cause of all your problems is that your h2 isn't inside the body tag !
I'm developing a mapping application (VS2008 C#) and have my map window (Esri ADF MapControl) displayed within my main aspx.
I'm now compiling a print template with another aspx page which will display and print the current map from the main aspx.
Normally I'd use a Frame tag to dispay the main aspx in my print template however I'm just interested in copying over the map DIV.
You can try do it using jquery:
<!DOCTYPE html>
<html>
<head>
<style>
body{ font-size: 12px; font-family: Arial; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<b>Footer navigation:</b>
<div id="mydiv"></div>
<script>
$("#mydiv").load("mypage.html");
</script>
</body>
</html>
Source: http://api.jquery.com/load/
I want to use Valums file upload javascript. However, when I run the demo or the tests provided by them I get an Origin null is not allowed by Access-Control-Allow-Origin. in Chrome. It doesn't work on firefox either, but it seems to work on Internet Explorer.
The code is too long to post and I don't know where it goes wrong, if you need a part of the code I can add it in.
The html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="fileuploader.css" rel="stylesheet" type="text/css">
<style>
body {font-size:13px; font-family:arial, sans-serif; width:700px; margin:100px auto;}
</style>
</head>
<body>
<p>Back to project page</p>
<p>To upload a file, click on the button below. Drag-and-drop is supported in FF, Chrome.</p>
<p>Progress-bar is supported in FF3.6+, Chrome6+, Safari4+</p>
<div id="file-uploader-demo1">
<noscript>
<p>Please enable JavaScript to use file uploader.</p>
<!-- or put a simple form for upload here -->
</noscript>
</div>
<script src="fileuploader.js" type="text/javascript"></script>
<script>
function createUploader(){
var uploader = new qq.FileUploader({
element: document.getElementById('file-uploader-demo1'),
action: 'do-nothing.htm',
debug: true
});
}
// in your app create uploader as soon as the DOM is ready
// don't wait for the window to load
window.onload = createUploader;
</script>
</body>
</html>
There's probably nothing wrong with your code, but you're trying to violate the same origin policy. Basically, if your site is http://aaa.com/, you cannot make AJAX called to http://bbb.com/.