Unobtrusive JavaScript - Separate JS File Not Found

Question

Make sure you reference your javascript from the correct location using server side helpers:

<script src="<%= Url.Content("~/TestPage.js") %>"></script>

This will properly reference the javascript file no matter from which location you have rendered this view. It assumes obviously that you have placed your javascript file in the root of your application. The The convention is to use the Scripts folder for this:

<script src="<%= Url.Content("~/Scripts/TestPage.js") %>"></script>

UPDATE:

Now that you have shown your project structure you seem to have placed the TestPage.js file inside the ~/Views folder. This won't work. This folder is not accessible from the client side. It is explicitly forbidden and not served by IIS. You should never place any static files inside. Move your javascript folder to the ~/Scripts folder.

Also you seem to be using jQuery inside your TestPage.js file but you never referenced it so your script won't work. If you want to use jQuery make sure that you have added it as well:

<script src="<%= Url.Content("~/Scripts/jquery-1.8.2.js") %>"></script>
<script src="<%= Url.Content("~/Scripts/TestPage.js") %>"></script>

or if you don't want to use jQuery fix your script so that it doesn't depend on it:

function dosomething() {
    alert('snuh');
}

window.onload = function() {
    document.getElementById('foo').onclick = dosomething;
};

or if you place your scripts at the end of your DOM you don't even need to wrap them in a document ready handler because at this stage the DOM will be ready and you can manipulate it:

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <meta name="viewport" content="width=device-width" />
    <title></title>
</head>
<body>
    <div>
        <input id="foo" value="snuh" />
    </div>
    <script src="<%= Url.Content("~/Scripts/TestPage.js") %>"></script>
</body>
</html>

and then inside your script:

function dosomething() {
    alert('snuh');
}
document.getElementById('foo').onclick = dosomething;