Link to home
Start Free TrialLog in
Avatar of Anand Majmundar
Anand MajmundarFlag for India

asked on

Reference a JavaScript .js file on localhost aspx in asp.net

Am attempting to Reference a JavaScript .js file - GoogleAuthentication.js - on localhost aspx in asp.net as follows:


<script type="text/javascript" src="~/GoogleAuthentication.js" async defer></script>


or 


<script type="text/javascript" src="../GoogleAuthentication.js" async defer></script>


How do I know whether it is actually getting loaded? It seems not.


The breakpoint in GoogleAuthentication.js - getAccessToken function - through the following button click script is not reached even though JavaScript Debugging has been Enabled in Visual Studio:


<script type = "text/css">

#google-signin-button{

document.getElementById("google-signin-button").addEventListener("click", getAccessToken);

}



Avatar of David H.H.Lee
David H.H.Lee
Flag of Malaysia image

To reference a JavaScript file on localhost in an ASP.NET application, you can use the tilde (~) character to represent the root of the application, like this:


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

Open in new window

To check if the file is getting loaded, you can open the browser developer tools and go to the "Network" tab. Look for the file name in the list of loaded files. If it is not there, it means the file is not being loaded. If it is there, click on it to see the file content.


Regarding your code, there is a syntax error in the CSS selector of the button. You are using the type "text/css" instead of "text/javascript". Also, you need to wrap the code inside a script tag. Here is the corrected code:


<script type="text/javascript">
    document.getElementById("google-signin-button").addEventListener("click",getAccessToken);
</script>

Open in new window

Make sure the button with id "google-signin-button" exists in the HTML markup.

It depends on your kind of ASP.NET project. Such static files should be bundled.

See using static files and bundling.
Avatar of Anand Majmundar

ASKER

To quote:

"To check if the file is getting loaded, you can open the browser developer tools and go to the "Network" tab. Look for the file name in the list of loaded files. If it is not there, it means the file is not being loaded. If it is there, click on it to see the file content."

While Google Developer Tools is reflecting errors in GoogleAuthentication.js file, on clicking js tab under 'Network' that file is not shown. In fact I am loading JQuery and accounts.google.com/gsi/client as well. None of these files appear.
ASKER CERTIFIED SOLUTION
Avatar of Anand Majmundar
Anand Majmundar
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial