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.

Where is your "Teste.js" located? Try to use a relative path or even better the @Url.Content. — gustavodidomenico
– gustavodidomenico, Commented Apr 15, 2013 at 22:23
Try src="@Url.Content("~/Script/Teste.js")" so that the path with be properly resolved. — Tim M.
– Tim M., Commented Apr 15, 2013 at 22:23
Agreed you should use some dev tools mentioned above to determine if the script is being found or not. — Tommy
– Tommy, Commented Apr 15, 2013 at 22:37
@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. — Travis Watson
– Travis Watson, Commented Apr 15, 2013 at 22:49

Tommy · Accepted Answer · 2013-04-15 22:45:11Z

3

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.

edited Apr 15, 2013 at 22:45

answered Apr 15, 2013 at 22:31

Tommy

39.9k10 gold badges93 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Travis Watson Over a year ago

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 Over a year ago

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 Over a year ago

Now it works.... The problem was on the Path.... Its "Scripts" and not "Script".... Thx for the help

Tommy Over a year ago

@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.

Chris Moschini · Accepted Answer · 2013-04-15 22:38:52Z

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.

Flavia · Accepted Answer · 2013-04-15 22:40:05Z

0

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.

answered Apr 15, 2013 at 22:40

Flavia

5614 silver badges9 bronze badges

Comments

Travis Watson · Accepted Answer · 2013-04-15 22:46:14Z

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.

Collectives™ on Stack Overflow

Javascript in asp.net MVC... Beginner issue

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related