2010-02-16 81 views
0

我有许多页面包含相同的部分视图,其中包含一组jQuery选项卡。部分视图的目的是组件化一组通用标签。这些标签实质上是指向其他页面的链接。部分视图上的选项卡的URL由传递给局部视图的视图模型提供。jquery不能在自定义路由的页面上执行

的URL的形式是:

http://localhost:1999/Transactions/1/Item/

这些网址匹配路由配置中定义的定制路由。

我的问题是,标签仅显示第一页显示正确,选择标签带我到正确的页面,但是$(文件)。就绪(函数()不执行和UL的。标签显示未修饰

典型的页面代码:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<Questern.ActiveOrderManagementSystem.Web.ViewModels.TransactionItemModel>" %> 
<asp:Content ID="headerStuff" ContentPlaceHolderID="headerContent" runat="server"> 
<script type='text/javascript'> 
$(document).ready(function() { 
    $("input[type=text]").tooltip(); 
}); 
</script> 
</asp:Content> 
<asp:Content ID="editTitle" ContentPlaceHolderID="TitleContent" runat="server"> 
Edit Transaction Item 
</asp:Content> 
<asp:Content ID="itemContent" ContentPlaceHolderID="MainContent" runat="server"> 
<h2>Edit Transaction Item</h2> 
<% using (Html.BeginForm()) {%> 
    <fieldset> 
     <% Html.RenderPartial("TransactionSummaryInfo", Model.summaryModel); %> 
     <% Html.RenderPartial("TransactionTabs", Model.tabModel); %> 
     <div class="container_16"> 
      <div class="grid_16 form_row_start"> 
       <div class="prefix_5 grid_2 "> 
        <a id="btnSave" href="javascript:document.forms[0].submit()" class="fg-button fg-button-icon-left ui-state-default ui-corner-all"><span class="ui-icon ui-icon-disk">Save</span>Save</a>       
       </div> 
       <div class="grid_1">&nbsp;</div> 
       <div class="grid_2 suffix_6"> 
        <a id="btnCancel" class="fg-button fg-button-icon-left ui-state-default ui-corner-all"><span class="ui-icon ui-icon-cancel">Cancel</span>Cancel</a> 
       </div> 
      </div> 
     </div>  
    </fieldset> 
<% } %> 
</asp:Content> 

局部视图代码:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Questern.ActiveOrderManagementSystem.Web.ViewModels.TransactionTabModel>" %> 
<% if (false) { %> 
    <link href="../../Content/forms.css" rel="stylesheet" type="text/css" media="screen" /> 
    <link href="../../Content/grid.css" rel="stylesheet" type="text/css" media="screen" /> 
    <script type="text/javascript" src="../../Scripts/roundCorners.js"></script>  
<% } %> 
<script type='text/javascript'> 
$(document).ready(function() { 
    $('#tabs').tabs({ 
     select: function(event, ui) { 
      var url = $.data(ui.tab, 'load.tabs'); 
      if (url) { 
       location.href = url; 
       return false; 
      } 
      return true; 
     } 
    }); 
}); 
</script> 
<% using (Html.BeginForm()) 
    {%> 
    <div id="tabs" > 
    <ul> 
      <% int i = 0; foreach (TransactionComponent component in Enum.GetValues(typeof(TransactionComponent))) 
       { 
        if (component == Model.selectedComponent) 
        {%> 
        <li class="ui-tabs-selected"><a href="#editbody"><%= Html.Encode(Model.tabNameList[i])%></a></li> 
       <%} else 
        {%> 
         <li><a href="<%= Html.Encode(Model.tabLinkList[i]) %>"><%= Html.Encode(Model.tabNameList[i])%></a> 
       <%}; 
        i++; 
       }%> 
      </ul> 
    </div> 
    <%} %> 

我从jquery文档http://docs.jquery.com/UI/Tabs的章节*中获得了jquery代码...按照标签的URL而不是通过ajax加载其内容

对于长文章的道歉,我想尽可能多地给出上下文。

更新:从运行萤火我得到的错误“$没有定义”,我也可以看到,js文件不被发现在浏览器正试图从

http://localhost:1999/Transactions/而不是http://localhost:1999/

加载它们

回答

1

如果您从站点的根目录引用脚本,则路径将始终正确。另外,intellisense会知道脚本。

<script src="/Scripts/jquery.maskedinput-1.2.2.min.js" type="text/javascript"></script> 
+0

作品一种享受!谢谢。 – Paul 2010-02-18 19:08:20

0

红鲱鱼的位,但我会发布答案,以防其他人遇到相同的情况。问题是由于网页未位于网站的根网址。

我有自定义的网址,如:

http://localhost:1999/Transactions/1/Detail/

http://localhost:1999/Transactions/1/Item/

当访问这些页面,这具有浏览器尝试检索的Javascript中的Site.Master包括从realtive根的后果的页面

iehttp://localhost:1999/Transactions/

例如:

<script type='text/javascript' src="../../Scripts/jquery.maskedinput-1.2.2.min.js"></script> 

将被映射到:

http://localhost:1999/Transactions/Scripts/jquery.maskedinput-1.2.2.min.js

解决办法是编码包括像这样:

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

有关完整的解释见Referencing JavaScript in ASP.NET MVC Master Pages