jquery не выполняется на страницах с настраиваемыми маршрутами

Question

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

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

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

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

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

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

Обновление: От запуска поджигатель я получаю ошибку «$ не определен», и я также могу видеть, что 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 от 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

Solution является для кодирования включает в себя примерно так:

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

Для полного объяснения см Referencing JavaScript in ASP.NET MVC Master Pages