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>
Related
I need the following:
I have an html page, which has declared several javascripts inside the body tag. However, I must make an asynchronous process prior to loading all of these components and render the page, and then continue the process. Any tips on how to solve this?
Thank you.
My code structure:
<html>
<script>
function loadFromServer() {
//this operation is async, and I need to`enter code here` process this before load
//the scripts declareds in body.
}
</script>
<body>
//content
//js loads
</body>
</html>
Have you tried putting the scripts declaration after the body tag?
<body>
...
</body>
<!-- script declarations here -->
<script src=""></script>
<script src=""></script>
<script src=""></script>
I have an application that allows the use of inline javascript, but not javascript from source files. I'm trying to modify a webpage to open on this browser, and need to know how to put the javascript files from the webpage inline.
Use <script> tags in your HTML. They can go anywhere - I prefer inside the <head> tag:
<head>
<script type="text/javascript">
// put anything here - any type of valid javascript works
// if you import jquery, you can use jquery here too!
</script>
</head>
You should place your imported code into the script tag in your HTML page (application in your case), look at the following example:
<html>
<head>
<script type="text/javascript">
//Import your JS script here, e.g.:
function doSomething(){
..
}
</script>
</head>
<body>...</body>
</html>
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
I have the j-query function test() in (chart.js) another solution file which is added the reference of main projects. Now i want to call the test() method from default.aspx page.
This is my code.
chart.js
function test(){
//for Example
}
default.aspx
<script>
test(); //call chart.js function
</script>
If i call the test method() from default.aspx page it is "undfined". how to call the j-query method which is located in another solution file but the same is added reference to the main project. Anyone could help on this..
Thanks,
Bharathi
you should put reference to tht perticular js file at starting of the page like below :-
<script type="text/javascript" src="chart.js" />
<script>
test(); //call chart.js function
</script>
Try this
<script type="text/javascript" src="chart.js">
$(document).ready(function()
{
test();
});
</script>
It seems like you are using a JS.page and that you are trying to call it with a script.
If you want to have your chart.js called into the default.aspx page do it like this.
<script src="assets/chart.js"></script>
place this in the head sections
In the head section of your aspx page add this:
<script type="text/javascript" src="chart.js" />//add reference of the chart.js file
<script type="text/javascript" language="javascript">
test(); //call chart.js function
</script>
You have to add that js file (chart.js) before your script block, may be in head tags of page. like following
<script type="text/javascript" src="chart.js" />
and Make sure your jQuery file is added even before it. so it should be like following
<script type="text/javascript" src="jQuery.js" />
<script type="text/javascript" src="chart.js" />
<script type="text/javascript">
test(); //call chart.js function
</script>
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.