눈에 잘 띄지 않는 JavaScript - 별도의 JS 파일을 찾을 수 없음

개념 unobtrusive JavaScript을 사용하여 처음으로 JavaScript를 HTML과 별도의 파일에 배치하려고합니다. 하지만, 내가 무엇을해도 파일을 찾을 수 없다는 오류가 발생합니다.눈에 잘 띄지 않는 JavaScript - 별도의 JS 파일을 찾을 수 없음

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

내가 새로운 MVC 4 응용 프로그램 시작 :

이것은 구글 크롬 콘솔에서 실제 오류 (Ctrl 키를 시프트 J)입니다. 나는 새로운 테스트 페이지 생성 :

<%@ 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을 만들어 : 나는 here 게시 팁을 시도했습니다

$(document).ready(function() { 

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

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

,하지만 난 항상 오류가 발생하는 JavaScript 파일을 찾을 수 없습니다. 이 간단한 테스트에 어떤 문제가 있다고 생각하십니까?

참고 : TestPage는 실제로 입력 상자가 표시된 상태로 표시됩니다.

enter image description here

출처

2013-02-26 Bob Horn

링크를 제공 할 수 있습니까? – istos

사이트에?아니요, 공개적으로 사용할 수 없습니다. 그것은 단지 테스트 응용 프로그램입니다. –

는 서버 측 헬퍼 사용하여 올바른 위치에서 자바 스크립트를 참조하십시오 :이 제대로 자바 스크립트 파일을 참조합니다

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

을

이

은 솔루션 탐색기에서 레이아웃입니다 어떤 위치에서이 뷰를 렌더링했는지에 관계없이 그것은 분명히 당신이 응용 프로그램의 루트에 자바 스크립트 파일을 배치했다고 가정합니다. 다음은 규칙이의 스크립트 폴더를 사용하는 것입니다

이

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

UPDATE : 지금 당신은 당신의 프로젝트 구조를 표시 한 것으로

당신이 ~/Views 폴더 안에 TestPage.js 파일이있는 것 같다. 이것은 작동하지 않습니다. 이 폴더는 클라이언트 측에서 액세스 할 수 없습니다. 명시 적으로 금지되어 있으며 IIS에서 제공하지 않습니다. 정적 파일을 절대로 두어서는 안됩니다. 자바 스크립트 폴더를 ~/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>

그리고 나서 y 내부 우리 스크립트 :

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

출처

2013-02-26 16:36:18

방금 시도했는데 리소스를로드하지 못했습니다. 서버가 404 (찾을 수 없음) http : // localhost : 14385/Home/~/TestPage.js 상태로 응답했습니다. –

WebForms보기 엔진을 사용하고있는 것 같습니다. 나는 나의 대답을 업데이트했다. 당신은'<% = Url.Content() %>'헬퍼를 사용해야합니다. –

그랬어! 감사! 실제로 WebForms 뷰 엔진을 사용하는 것은 아닙니다. 나는 그것을 면도날로 만들고 그것이 여전히 효과가 있는지 볼 것이다. –

눈에 잘 띄지 않는 JavaScript - 별도의 JS 파일을 찾을 수 없음

답변

관련 문제