在ASP.NET MVC中使用Jquery UI Tab控件

时间:2010-04-10 05:16:48

标签: jquery asp.net-mvc

我是jquery的新手,正在尝试使用UI插件。出于某种原因,以下代码不起作用,从某种意义上说,它不会呈现选项卡,而只是一堆文本。但是当我复制页面源并将其粘贴到html页面中并将其放在views文件夹中时,一切看起来都很棒,所以,我认为所有的js路径都很好。有什么想法吗?

<!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>

3 个答案:

答案 0 :(得分:2)

首先始终是相对路径的“〜/”表示法,这将避免在部署到虚拟文件夹时出现问题。 您也可以自己编写一个帮助程序来封装它:

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

你在MvcContrib中有很好的助手,比如

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

你的css会出现同样的问题:

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

我在我的最新项目中使用它并且我在那里看不到编程错误,所以我认为在脚本路径中你有效地存在问题。

此外,使用Firebug非常容易并检查你得到的js错误,如果脚本全部加载等等......

最后,最好将所有js代码放在html页面的末尾(就在标记之后。这不是必需的,但有助于加快页面加载,因为脚本将在页面被解析后下载)浏览器。

答案 1 :(得分:1)

除了这些脚本文件的路径之外,我看不到您的代码有什么问题。在ASP.NET MVC视图中,在使用url时使用html帮助是一个好习惯:

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

答案 2 :(得分: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>