ASP.NET MVC 3 How to inject Javascript into the master layout - javascript

I am trying out the new razor view engine from MVC 3. The issue that I am having is that I have Javascript that is page specific. I normally have all my Javascript code before the tag closes. I was thinking of putting a section just before I close the body tag on my master layout. Some thing to the effect of:
<script type="text/javascript">
#RenderSection("JavaScript")
</script>
But VS2010 underlines it in green. So which ever pages uses this master layout can have it's Javascript injected Here. How would you guys do it? The reason why I want to do it like this is because then I can add JavaScript from the master layout also in here, other I will have to define a separate script tag just below the #RenderSection.
When I do the following then VS gives me a warning (I don't like warnings):
Validation (HTML 4.01): Element 'link' cannot be nested within element 'link'.
Here is my code for the above warning:
#section HeadSection
{
<link href="http://yui.yahooapis.com/2.8.2r1/build/button/assets/skins/sam/button.css" rel="stylesheet" type="text/css">
<link href="http://yui.yahooapis.com/2.8.2r1/build/datatable/assets/skins/sam/datatable.css" rel="stylesheet" type="text/css">
}
How can I get these warnings away?

Here's what I'd do, according to the best practices you should place your scripts at the bottom of the page.
_Layout.cshtml
<html>
<head>
#* ... *#
</head>
<body>
#* ... *#
#RenderSection("Scripts", false)
</body>
</html>
MyView.cshtml
#section Scripts
{
<script src="#Url.Content("~/Scripts/myScript.js")"
type="text/javascript"></script>
}

I would use #RenderSection("head", false) in my _layout page. Then you can inject whatever you want in the head of the page (including script)...and by using false you make it optional on all of your view pages.

You can turn off or modify VS's XHTML validation checking:
http://weblogs.asp.net/scottgu/archive/2005/11/23/431350.aspx

You need to close the link tags.
Like this:
#section HeadSection
{
<link href="http://yui.yahooapis.com/2.8.2r1/build/button/assets/skins/sam/button.css" rel="stylesheet" type="text/css" />
<link href="http://yui.yahooapis.com/2.8.2r1/build/datatable/assets/skins/sam/datatable.css" rel="stylesheet" type="text/css" />
}
And then follow Ryan's answer.

Related

JavaScript file doesn't load

I'm using Spring MVC, Thymeleaf and want to import a javascript file in my html document. Although all links are set correctly and the files appear in the debugging view in my browser, they don't load.
There is following JS in the HTML that should call a datepicker, but it doesn't show up:
<script th:inline="javascript">
/*<![CDATA[*/
$( function() {
$( "#datepicker" ).Datepicker(
);
} );
/*]]>*/
</script>
the files are included this way:
<script type="text/javascript" th:src="#{/resources/js/file.js}"></script>
CSS files work just fine just with the type changed.
Any ideas how to fix this?
Shows error on Chrome debugging
Now I deleted all not necessary js files from the import and it shows following error:
more precise error
This shows that the jquery-1.12.4 is used.
When you are using Spring and Thymeleaf the following project structure is recommended:
src
|-main
|-resources
|-static
| |-css
| |-bootstrap.min.css
| |-application.css
| |-images
| |-js
| |-jquery-3.1.1.js
|-templates
Then including different resources in your templates will look like this:
<head>
<link href="../static/css/bootstrap.min.css" rel="stylesheet" media="screen"
th:href="#{/css/bootstrap.css}"/>
<link href="../static/css/application.css" rel="stylesheet" media="screen"
th:href="#{/css/application.css}"/>
<script src="../static/js/jquery-3.1.1.js"
th:src="#{/js/jquery-3.1.1.js}"></script>
</head>
The Answer:
1) <th:block></th:block> makes no diffrence
2) The additions to the html tag
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
make no difference
3) placing the script-tags with content at the bottom of the body is the same as when placing it in the head
4) I use Bootstrap in this project and used the datepicker inside a div of Bootstrap. After placing it somewhere else in the body and not inside a div it worked.
Conclusion:
If you are using Spring MVC and Thymeleaf and want to include JavaScript files you need:
1) <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" >
2) <link th:href="#{/resources/.../file.css}" rel="stylesheet" type="text/css"/>
3) <script type="text/javascript" th:src="#{/resources/.../file.js}"></script>
4) Make sure your JS or CSS files are not "overwritten" by following files
Thanks for your time and help #Parth!

Add JS Script to this HTML

I want to add this "TimeCircles JavaScript but, I can't do it correctly, I will add the files of it in the following location: /js/count-down/timecircles.css and /js/count-down/timecircles.js
The HTML file: https://www.dropbox.com/s/diho8tcumte5pqr/coming-soon.html
The JS link: http://git.wimbarelds.nl/TimeCircles/
<script src='/js/count-down/timecircles.js' type='text/javascript'></script>
<link href='/js/count-down/timecircles.css' type='text/css'/>
Stick this in the head of your HTML.

Rainbow Jquery Plugin does not work

I am trying to implement the rainbow jquery plugin on my blog: https://levalencia-public.sharepoint.com/blog
Rainbow plugin here:
http://craig.is/making/rainbows
I have included the following on the head
<link rel="stylesheet" href="css/rainbow/kimbie-dark.css" />
I have included the following before the body end tag
<!-- you can create a custom build with specific languages this should go before the closing </body> -->
<script src="js/rainbow.min.js"></script>
<script src="js/languages/generic.js"></script>
<script src="js/languages/csharp.js"></script>
<script src="js/languages/css.js"></script>
<script src="js/languages/html.js"></script>
<script src="js/languages/javascript.js"></script>
<script src="js/languages/shell.js"></script>
<script> //<![CDATA[
$(document).ready(function() {
Rainbow.color();
});
//]]>
</script>
Then I included one post to test it with the code:
<pre><code data-language="javascript">var testing = true;</code></pre>
When I check the source code of my blog, it looks like the html is being changed, because I see this:
If I debug the rainbow.color is being hit.
So I am clueless
First of all, Rainbow initializes itself so you should be able to remove this without any problem:
<script> //<![CDATA[
$(document).ready(function() {
Rainbow.color();
});
//]]>
</script>
The main issue you are seeing is that your theme file is not being included correctly. If you look at the theme you are including it is not a valid css file. It is returning some sort of html.
See
https://levalencia-public.sharepoint.com/_catalogs/masterpage/css/rainbow/kimbie-dark.css

Referencing JQuery correctly

I am trying to use Jquery for the first time and I am getting an issue. I am using VS 2013, asp.net and VB.
My head tag is as follows.
<head runat="server">
<title></title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
<script src="Bin/jquery-1.10.2.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#LowerText').hide();
$('#UpperText').hide();
$('#AssetStatusChoice').change(function () {
if($('#AssetStatusChoice').val("Fully Available"))
{
$('#CommentsText').hide();
}
if ($('#AssetStatusChoice').val("Restricted"))
{
$('#UpperLimit').show();
$('#LowerLimit').show();
}
if ($('#AssetStatusChoice').val("Unavailable"))
{
$('#Commentstext').show();
}
});
});
</script>
</head>
When I debug the page I get the following error.
0x800a1391 - JavaScript runtime error: '$' is undefined
It seems from Googling the error that I am not referencing the js file correctly. Can anyone help?
Add <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script> and Remove the
<script src="Bin/jquery-1.10.2.js" type="text/javascript"></script>
<script> Just use a host Jquery instead of adding it to you source. Read more :
3 reasons why you should use hosted jQuery
IIS doesn't serve content in the /bin directory.
Move it to another directory like /scripts or /js or /scripts/lib, something like that. The bin directory is a bad place to put script files.
You have a number of options here. You could use the Google CDN by adding the following to your header:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Or, as it appears you're using .NET, you could do this:
<script type="text/javascript" src="<%=ResolveClientUrl("~/Bin/jquery-1.10.2.js") %>"></script>
The second option gives you the additional advantage that when used in a master page can be used in any content pages at any file system level and it will still resolve correctly.
As Stefan has also said, I'd recommend moving your jQuery file from your bin directory.
Copy the jQuery file in some other folder, like Scripts, or js, and in Solution Explorer check to see all files. Find the jQuery file you just copied, include it in the project, then drag it on the page where you want to place it. A correct script tag will be created.

How to call javascript in MVC3 pattern

I'm new to the ASP.NET MVC 3 pattern and I want to call a JavaScript function in view (or controller), to display the result in a div or span object.
My solution
I create a new ASP MVC3 Solution (using Razor)
Add a new JavaScript in Script folder
Add a simple script function in the new JavaScript file, like this:
function HolaMundo(){
return "hola desde javascript";
}
Add a reference from the JavaScript in the index.csHTML file from my default controller.
#section JavaScript
{
<script src="#Url.Content("~/Scripts/Maps.Helper.js")" type="text/javascript">
</script>
}
Finally add a call for the function:
<p>
<div id="map_canvas2" style = "width:100%; height:100%">
result from Javascript
</div>
</p>
<script type="text/javascript">
$(document).ready(function() {
<text>
$('#map_canvas2').text(HolaMundo());
</text>
});
</script>
Result
Doesn't work
So, can any help me? I appreciate your help.
You should remove the <text> tags from your script so that the view looks like this:
<p>
<div id="map_canvas2" style = "width:100%; height:100%">
result from Javascript
</div>
</p>
<script type="text/javascript">
$(document).ready(function() {
$('#map_canvas2').text(HolaMundo());
});
</script>
The <text> tag is used by the Razor interpreter to indicate a literal value to be rendered as-is without processing. It's useful when you are mixing server side code with client side markup or script. For example:
<script type="text/javascript">
$(document).ready(function() {
#if (Model.IsFooBar)
{
<text>$('#map_canvas2').text(HolaMundo());</text>
}
});
</script>
Also make sure that the section that you have defined in your Index.cshtml view:
#section JavaScript
{
<script src="#Url.Content("~/Scripts/Maps.Helper.js")" type="text/javascript"></script>
}
you should make sure that is registered in your _Layout.cshtml somewhere. For example in the <head>. Also make sure that you have included the jQuery script to your page:
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
#RenderSection("JavaScript")
</head>
...
or even better before the closing </body> tag which is where it is recommended to place scripts to avoid blocking the browser loading the DOM while fetching them:
...
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
#RenderSection("JavaScript")
</body>
</html>

Categories