2010-02-16 22 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