Javascript in asp.net MVC... Beginner issue

Question

I created an Asp.Net MVC Internet Aplication and in my Index view of the Home Controller I have this

This is the first line, before the script results.
<script type="text/javascript" src="~/Script/Teste.js"></script>
<br />
This line comes after the script.

In my Teste.js I have this:

document.write("Yes! I am now a JavaScript coder!");

But nothing happens. If I change the src attribute and put some random name src="aaaa", despite the fact "aaaa" doesnt exist, I get no error in runtime.

• gustavodidomenico: Where is your "Teste.js" located? Try to use a relative path or even better the @Url.Content.
• Tim M.: Try src="@Url.Content("~/Script/Teste.js")" so that the path with be properly resolved.
• Ze Carioca Silva: I tried with the Url.Content and still doesnt work
• Tommy: Agreed you should use some dev tools mentioned above to determine if the script is being found or not.
• Travis Watson: @ZeCariocaSilva, You need to heed @TimMedora's comment. Always use the URL helpers beginning with ~ when you reference URLs in your MVC applications. If you don't, your website will break if it happens to not be located in the root directory.

Answer 1

EDIT

Also, check your path again. The default MVC templates in VS create a folder called Scripts, not Script. ("~/Scripts/teste.js")

Per the comment below, this was not the root cause of the issue, but in other cases can easily bite new JavaScript developers.

Most likely, your document.write function is firing before the document is ready, leading to the appearance that nothing is happening. Try the following in your Teste.js file

window.onload = function ()
{
 document.write("Yes! I am now a JavaScript coder!");
 //or even better as a test
 alert("This alert was called");
}

Check the source of your page as well, it could be the document is being written to, you just can't see it due to markup/page styling.

As for you second issue, there will be no 'Runtime Exception' thrown if you reference a non-existent file. If you are using tools like Firebug or Chrome's developer tools, you should see a request to http://siteDomain/Scripts/aaaa.js with a response of 404, not found.

• Travis Watson: document.write can exist in the body and function properly without ensuring the DOM is fully loaded. See this fiddle. You're not using the DOM with document.write, you're creating it.
• Tommy: Thanks @Travis - I know this to be true, but wanted to ensure that there was not some weird issue on OP end. This typically bites most beginner devs with JS. :)
• Ze Carioca Silva: Now it works.... The problem was on the Path.... Its "Scripts" and not "Script".... Thx for the help
• Tommy: @Travis, I updated my answer with some 'pre qualifying' text about the solution I initially proposed in order to not confuse others that may stumble across this.

Answer 2

You generally should avoid using document.write() unless you absolutely have to use it for some reason... I don't think I've ever come across such a situation, and write a lot of Javascript.

Try this:

1) Put this in your HTML:

<script src="/scripts/teste.js"></script>

2) Put this in your JS:

alert('Yes! I am now a JavaScript coder!');

3) Open Chrome since it makes it easy to look for external resources loading and open the Network tab in Developer Tools (click the menu button at top-right, Tools> Developer Tools, Network tab).

4) Run your project and copy/paste the URL in the browser that comes up into this Chrome window, and hit enter.

When your page loads one of 2 things will happen:

A) You'll get the alert box you wanted or

B) You'll find out why it isn't loading because the Network tab will show the browser attempting to fetch teste.js and failing in some fashion, for example a 404, which would indicate you've got a typo in the path, or the script isn't where you thought it was, etc.

Answer 3

Put the following line at the very end of your document. There should not be anything after. Then try to load the page.

<script type="text/javascript" src="~/Script/Teste.js"></script>

Also, try pressing F12 once the page loads to see the source. Check if you script is there.

Answer 4

In MVC, the tilde is used to refer to the root URL of your application. However, it cannot normally parse this information. If you write:

<script src="~/Script/Teste.js"></script>

The lookup will fail, because the ~ means nothing special in HTML. If you're using Razor as your view engine (not ASPX), you need to wrap that call in Url.Content like so:

<script src="@Url.Content(~/Script/Teste.js)"></script>

Doing this will ensure a valid URL is provided to the browser.

With that in mind, you need to check that you have the file name and folder name both correct. You also need to ensure that the file is being deployed with your application. You can do this my opening the properties panel while the file is selected in the Solution Explorer and pressing F4.