2013-12-17 4 views
8

Я создаю приложение ASP.NET Webform с C# в VS 2012, .NET framework 4.5Как включить JavaScript в MasterPage?

У меня есть MasterPage в корне приложения, файлы JavaScript находятся в папке с именем js.

Вот проблема: Если страница находится в корневой папке тогда все работает нормально (CSS + JS), если я ставлю любые страниц в подкаталоге то КСС работает, но эти JavaScripts являются не работают, очевидно, что путь ссылки неверен.

Итак, ссылка ссылки Css в порядке, но для скрипта, независимо от того, что я использовал, все они не работают (js/script.js или ~/js/script.js или /js/script.js или ../ResolveUrl, ResolClientveUrl ... или все метода в этом http://yobriefca.se/blog/2010/10/19/%3C-head-%3Eache-including-javascript-in-asp-dot-net-master-pages/) все они относятся к корневой/подпапка/JS/script.js вместо корневой/JS/script.js

в корне: один файл MasterPage, Default.aspx, test.aspx, js, папка css и папка Pages. По умолчанию и тестовые страницы работают файл, но все страницы в папке страницы не отображаются .js SO самозабвенно путь является неправильным, когда страницы не в корне

В моей главной странице:

<head runat="server"> 
<title></title> 

<link rel="stylesheet" href="~/css/style.css" /> 

<%-- tried these and lot more but NOT workkkkkkkkkkk --%> 

<%--<script src="~/js/jquery-1.7.1.min.js" ></script> 
<script src="~/js/script.js" ></script>--%> 

<%--<script src='<%=ResolveUrl("~/js/jquery-1.7.1.min.js") %>' ></script> 
<script src='<%=ResolveUrl("~/js/script.js") %>' type="text/javascript"></script>--%> 

<%--<script src='<%=ResolveClientUrl("~/js/jquery-1.7.1.min.js") %>' type="text/javascript"></script> 
<script src='<%=ResolveClientUrl("~/js/script.js") %>' type="text/javascript"></script>--%> 

<asp:ContentPlaceHolder ID="Head" runat="server"> 
</asp:ContentPlaceHolder> 

в script.js является Somthing как:

.... 
    $.include('js/superfish.js') 
$.include('js/FF-cash.js') 
$.include('js/tms-0.4.x.js') 
$.include('js/uCarausel.js') 
$.include('js/jquery.easing.1.3.js') 
$.include('js/jquery.tools.min.js') 
$.include('js/jquery.jqtransform.js') 
$.include('js/jquery.quicksand.js') 
$.include('js/jquery.snippet.min.js') 
$.include('js/jquery-ui-1.8.17.custom.min.js') 
$.include('js/jquery.cycle.all.min.js') 
$.include('js/jquery.cookie.js') 
$(function(){ 
    if($('.tweet').length)$.include('js/jquery.tweet.js'); 
    if($('.lightbox-image').length)$.include('js/jquery.prettyPhoto.js'); 
    if($('#contact-form').length||$('#contact-form2').length)$.include('js/forms.js'); 
    if($('.kwicks').length)$.include('js/kwicks-1.5.1.pack.js'); 
    if($('#counter').length)$.include('js/jquery.countdown.js'); 
    if($('.fixedtip').length||$('.clicktip').length||$('.normaltip').length)$.include('js/jquery.atooltip.pack.js') 
// Slider 
    $('.main-slider')._TMS({ 
..... 

ошибка в средстве разработки (консоли) веб-браузера:

Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/tms-0.4.x.js 
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/uCarausel.js 
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.jqtransform.js 
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.quicksand.js 
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.snippet.min.js 
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/FF-cash.js 
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/superfish.js 
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.tools.min.js 
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery-ui-1.8.17.custom.min.js 
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.cycle.all.min.js 
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.easing.1.3.js 
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.cookie.js 
Uncaught TypeError: Object [object Object] has no method '_TMS' script.js:22 
event.returnValue is deprecated. Please use the standard event.preventDefault() instead. 
+0

Вы должны удалить '~ /'. поскольку скрипт не является элементом управления ASP.NET, он добавляется в конечный html как есть, и браузер не может распознать '~ /'. – Givi

+0

@Givi не работает, я пробовал все методы/js, ../js, ~/js или js, тогда же в ResolveUrl и ResolClientveUrl –

+0

Удалить тег комментария стороны сервера. '<%-- --%>' – Givi

ответ

16

HTML

Вы, как правило, не нужны никакие скрипты в <head /> кроме сценариев, таких как Modernizr, которые имеют функцию обнаружения. Это больше передовой практики, чтобы переместить все скрипты в нижней части страницы, как так:

<html> 
<head runat="server"> 
    <title></title> 
    <link rel="stylesheet" href='<%= ResolveUrl("~/css/style.css") %>' /> 
    <asp:ContentPlaceHolder ID="Head" runat="server" /> 
</head> 
<body> 

    <!-- Scripts at bottom of page for faster loading. --> 

    <script src='<%= ResolveUrl("~/js/jquery-1.7.1.min.js") %>'></script> 
    <script src='<%= ResolveUrl("~/js/script.js") %>'></script> 

</body> 
</html> 



script.js

Ссылки на другие файлы сценариев в сценария.JS потребует / быть appened к «JS /` так:

$.include('/js/superfish.js'); 
$.include('/js/FF-cash.js'); 
$.include('/js/tms-0.4.x.js'); 
$.include('/js/uCarausel.js'); 
$.include('/js/jquery.easing.1.3.js'); 
$.include('/js/jquery.tools.min.js'); 
$.include('/js/jquery.jqtransform.js'); 
$.include('/js/jquery.quicksand.js'); 
$.include('/js/jquery.snippet.min.js'); 
$.include('/js/jquery-ui-1.8.17.custom.min.js'); 
$.include('/js/jquery.cycle.all.min.js'); 
$.include('/js/jquery.cookie.js'); 

if($('.tweet').length) 
    $.include('/js/jquery.tweet.js'); 

if($('.lightbox-image').length) 
    $.include('/js/jquery.prettyPhoto.js'); 

if($('#contact-form').length || $('#contact-form2').length) 
    $.include('/js/forms.js'); 

if($('.kwicks').length) 
    $.include('/js/kwicks-1.5.1.pack.js'); 

if($('#counter').length) 
    $.include('/js/jquery.countdown.js'); 

if($('.fixedtip').length || $('.clicktip').length || $('.normaltip').length) 
    $.include('/js/jquery.atooltip.pack.js'); 

// Slider 
$('.main-slider')._TMS({ 



MISC

Не забудьте очистить кэш или работать в частном порядке просматривая при этом все это!

+0

ОК, поэтому я редактирую файл script.js по вашему запросу (в основном удаленный/js), я все равно получаю Не удалось загрузить ресурс: сервер ответил со статусом 404 (не найден) http: // localhost: 52403/Pages/js /jquery-1.7.1.min.js Таким образом, очевидно, что всегда следует указывать SUBFOLDER, а затем js/script.js, а не прямо на js/script.js. Не удалось загрузить ресурс: сервер ответил статусом 404 (Not Найдено) http: // localhost: 52403/Pages/js/script.js –

+1

Вы модифицировали html MasterPage, как я показал? –

+0

Основная страница, как вы показали,

0

Попробуйте заменить ~/ с ../. Один из моих проектов делал то же самое и фиксировал это.

Также убедитесь, что даже на сервере (а не только в проекте) папка JS находится непосредственно под корнем.

+0

не работал для меня, да, они находятся в корне приложения. –

0

Вы должны использовать префикс ~, перед расположением файла. (Как это: ~/projects/files/web/admin)

2

Вы можете включить файл .js либо между тегами заголовка, тэгами contentplaceholder или внутри тегов тела. Это во всех случаях будет отражено на ваших других страницах, которые включают эту главную страницу. Все, на что вам нужно сосредоточиться, - это путь создания пути.

Код ниже добавляет файл jquery к главной странице в главном разделе главной страницы.

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> 

<title></title> 

<script src="jquery-2.1.1.min.js"></script> 

<asp:ContentPlaceHolder id="head" runat="server"> 
</asp:ContentPlaceHolder> 

<form id="form1" runat="server"> 
<div> 
    <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> 


    </asp:ContentPlaceHolder> 
</div> 
</form> 
<script> 

</script> 

Относительный vs Абсолютный URL-адрес

Используя ../ и ~/перед URL-адресом, вы создаете относительный URL-адрес. Пути относительных URL-адресов затрагиваются при изменении уровня папки либо файла, к которому вы обращаетесь, либо файла, который содержит ссылку.

../ символ сделать один шаг из папки, содержащей ссылку. убедитесь, что у вас достаточно «../», чтобы обратиться к правильному файлу.

~/символ создает путь, начинающийся с корня вашего проекта.

Чтобы создать абсолютный URL-адрес, просто перетащите файл, который вы собираетесь включить на странице, из приложения-разработчика в Visual Studio на страницу.

Более подробной информации о разнице между проверкой абсолютного и относительного URL в Difference between Relative path and absolute path in javascript

Смежные вопросы