2010-04-10 9 views
0

jquery를 처음 사용하고 UI 플러그인을 시험해보고 있습니다. 어떤 이유로이 다음 코드는 작동하지 않습니다. 그 의미에서 탭을 렌더링하지 않고 단지 텍스트 일뿐입니다. 그러나 페이지 소스를 복사하여 HTML 페이지에 붙여 넣은 다음보기 폴더에 넣으면 모든 것이 멋지게 보이므로 모든 js 경로가 양호하다고 가정합니다. 어떤 아이디어?ASP.NET MVC에서 Jquery UI 탭 컨트롤 사용

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>Details</title> 
    <link href="../../Scripts/themes/base/ui.all.css" rel="stylesheet" type="text/css" /> 
    <script src="../../Scripts/jquery-1.3.2.js" type="text/javascript"></script> 
    <script src="../../Scripts/ui/ui.core.js" type="text/javascript"></script> 
    <script src="../../Scripts/ui/ui.tabs.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#tabs").tabs(); 
     });  
</script> 
</head> 

<body> 
    <div> 

    <div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">Text 1</a></li> 
     <li><a href="#tabs-2">Text 2</a></li> 
     <li><a href="#tabs-3">Text 3</a></li> 
    </ul> 
    <div id="tabs-1"> 
      <div>tab1 content - adsfadfadsf</div>  
    </div> 
    <div id="tabs-2"> 
     <div>tab 2 content -adfadfadf </div>  
    </div> 
    <div id="tabs-3"> 
     <div>tab 3 content -adfadfadfadf</div>  
    </div> 
    </div> 
    </div> 
</body> 
</html> 

답변

2

먼저 상대 경로에 "~ /"표기법을 사용하면 가상 폴더로 배포 할 때 문제가 발생하지 않습니다. 또한 당신이 도우미를 작성할 수 자신이를 캡슐화 :

Html.Css("~/Content/style.css"); 

:

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

당신은 당신의 CSS를 발생할 것 같은

Html.Script("~/Script/js-debug.js", "~/Script/js-prod.js"); 

같은 문제로 MvcContrib에 아주 좋은 도우미가 최신 프로젝트에서 사용하고 있으며 프로그래밍 실수를 볼 수 없으므로 스크립트 경로에있어 문제가 있다고 가정합니다.

또한 그것이 마지막에 모든 JS 코드를 넣어 아마 더 나은, 마지막으로 ... 방화범을 사용하여 JS는 스크립트가 모두로드 된 경우 등, 얻을 오류가있는 것을 확인

을 아주 쉽게 귀하의 HTML 페이지 (태그 바로 뒤에. 반드시 필요하지는 않지만 브라우저에서 페이지를 구문 분석 한 후 스크립트가 다운로드 될 때 페이지를 더 빨리로드하는 데 도움이됩니다.)

+1

같은 것을 사용, 당신은 귀하의 의견에 그 부분을 구현 상관없이, 당신은을 삽입 할 수 스크립트 참조는 항상 맨 아래에 렌더링됩니다. 페이지 헤더와 CSS 참조에 동일한 기술을 사용했습니다. –

+1

적어도이 게시물과 같은 오래된 게시물을 찾으려면 배지를 받았습니까? 그래도 좋은 의견. :) –

1

다른 코드에 문제가없는 것 같습니다. ASP.NET MVC View에서 URL로 작업 할 때 html 헬퍼를 사용하는 것이 좋습니다 :

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

그래서 나는 모든 JS 경로가 좋은

귀하의 가정에있는 대부분 잘못된 가정합니다./Action이 렌더링되고 /Views/Action/Index.aspx보기를 사용하는 경우 작업의 상대 경로는 /Views/Action/Index.html을 직접 표시하는 경우와 다릅니다.

그래서 페이지 하단에 "스크립트"라는 마스터 뷰 섹션을 배치 할

<script src="<%= Url.Content("~/Content/js/jquery-1.2.3.min.js") %>" type="text/javascript"></script>