Question

使用概念unobtrusive JavaScript，我第一次尝试将JavaScript放在与HTML不同的文件中。但是，无论我做什么，我都会收到一个错误，即找不到该文件。

这是Google Chrome控制台中的实际错误（ctrl-shift-j）：

GET http://localhost:14385/Home/TestPage.js 404 (Not Found)

我开始使用新的MVC 4应用程序。我创建了一个新的测试页面：

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

<!DOCTYPE html>

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

我在同一个文件夹中创建了一个新的TestPage.js：

$(document).ready(function() {

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

    document.getElementById('foo').onclick = dosomething;
});

我已经尝试了发布here的提示，但我总是收到错误，找不到JavaScript文件。知道这个简单的测试有什么问题吗？

注意：TestPage实际显示，输入框显示。

这是解决方案资源管理器中的布局：

enter image description here

Answer 1

确保使用服务器端助手从正确的位置引用您的javascript：

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

无论您从哪个位置呈现此视图，这都将正确引用javascript文件。它显然假设您已将javascript文件放在应用程序的根目录中。惯例是使用Scripts文件夹：

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

更新：

现在您已经显示了项目结构，您似乎已将TestPage.js文件放在~/Views文件夹中。这不行。无法从客户端访问此文件夹。它是明确被禁止的，不是由IIS提供的。你永远不应该在里面放置任何静态文件。将您的javascript文件夹移动到~/Scripts文件夹。

此外，您似乎在TestPage.js文件中使用了jQuery，但您从未引用它，因此您的脚本无法正常工作。如果你想使用jQuery，请确保你也添加了它：

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

或者如果您不想使用jQuery修复您的脚本以使其不依赖于它：

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

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

或者如果您将脚本放在DOM的末尾，您甚至不需要将它们包装在文档就绪处理程序中，因为在此阶段DOM将准备好并且您可以操作它：

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

然后在你的脚本中：

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

不引人注目的JavaScript - 找不到单独的JS文件

1 个答案: