0

控えめなJavaScriptの概念を使用して、JavaScriptをHTMLとは別のファイルに配置しようとしています。しかし、何をしても、ファイルが見つからないというエラーが表示されます。

これは、グーグルクロームコンソール（ctrl-shift-j）の実際のエラーです：

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

私は新しいMVC4アプリから始めました。新しいテストページを作成しました。

<%@ 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;
});

ここに投稿されたヒントを試しましたが、JavaScriptファイルが見つからないというエラーが常に発生します。この簡単なテストの何が問題になっているのでしょうか。

注：TestPageが実際に表示され、入力ボックスが表示されます。

これは、ソリューションエクスプローラーのレイアウトです。

ここに画像の説明を入力してください

4

1 に答える 1

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ます。

また、ファイル内でjQueryを使用しているようです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;
于 2013-02-26T16:36:18.507 に答える