JQuery не выполняется на страницах с пользовательскими маршрутами

Question

У меня есть несколько страниц, включающих одно и то же частичное представление, которое содержит набор вкладок jquery. Цель частичного представления состоит в том, чтобы разбить на части общий набор вкладок. Вкладки - это ссылки на другие страницы. URL-адреса для вкладок в частичном представлении предоставляются моделью представления, переданной в частичное представление.

URL-адреса имеют вид:

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

Эти URL соответствуют настраиваемым маршрутам, определенным в конфигурации маршрутизации.

Моя проблема в том, что вкладки правильно отображаются только для первой отображаемой страницы , выбор вкладки переводит меня на правильную страницу, но $ (document) .ready (function () не выполняется и 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 для вкладок из документации jquery http://docs.jquery.com/UI/Tabs в разделе * ... следуйте URL-адресу вкладки вместо загрузки ее содержимого через ajax

Извиняюсь за длинный пост, я хотел дать как можно больше контекста.

Обновление: при запуске firebug я получаю сообщение об ошибке "$ is notfined", а также вижу, что js-файлы не найдены, поскольку браузер пытается загрузить их из

http://localhost:1999/Transactions/ вместо http://localhost:1999/

Answer 1

Если вы ссылаетесь на свои скрипты из корня сайта, путь всегда будет правильным. Кроме того, intellisense будет знать о сценарии.

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

Answer 2

Немного красной сельди, но я выложу ответ, если кто-то еще столкнется с тем же сценарием. Проблема заключалась в том, что страницы не были расположены в корневом URL-адресе сайта.

У меня есть пользовательские URL, такие как:

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

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

При доступе к этим страницам браузер пытается извлечь Javascript, включенный в Site.Master, из реального корня страницы

т.е. http://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>

Полное объяснение см. Ссылка на JavaScript в главных страницах ASP.NET MVC