web-dev-qa-db-ja.com

JavaScriptをマスターページにどのように組み込みますか？

VS 2012、.NET Framework 4.5でC＃を使用してASP.NET Webformアプリケーションを構築しています

アプリケーションのルートにMasterPageがあり、JavaScriptファイルはjsという名前のフォルダーにあります。

ここに問題があります：ページがルートフォルダーにある場合その後、すべてがworking fine（css + js）で、pagesをsubfolder次にcssは機能しますが、それらのJavaScriptはnot workingですが、明らかに参照パスが間違っています。

したがって、Css参照パスは問題ありませんが、スクリプトでは、何を使用したかに関係なく、すべて機能しません（js/script.jsまたは〜/ js/script.jsまたは/js/script.jsまたは../ ResolveUrl、ResolClientveUrl ...またはこれのすべてのメソッド http://yobriefca.se/blog/2010/10/19/%3C-head-%3Eache-include-javascript-in-asp-dot-net-master -pages / ）root /js/script.jsの代わりに、すべてroot/SUB-FOLDER /js/script.jsを参照します

ルート：単一のMasterPage、Default.aspx、test.aspx、jsフォルダー、cssフォルダー、およびPagesフォルダー。デフォルトページとテストページは作業ファイルですが、ページフォルダー内のすべてのページが表示されません.js SO OBLIVIOUSLYページがルートにない場合は常にパスが間違っています

私のマスターページ：

<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は次のようになります。

....
    $.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({
.....

Webブラウザーの開発者ツール（コンソール）のエラー：

    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.
c#javascriptjqueryasp.netcss
9
Ronaldinho Learn Coding

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

script.jsで他のスクリプトファイルを参照するには、次のように_/_を '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

これをすべてテストしながら、キャッシュをクリアするか、プライベートブラウジングで作業することを忘れないでください！

16
Code Maverick

.jsファイルは、headタグ、contentplaceholderタグの間、またはbodyタグ内に含めることができます。これは、すべての場合において、このマスターページを含む他のページに反映されます。焦点を当てる必要があるのは、パスの作成方法だけです。

以下のコードは、マスターページのヘッドセクションのマスターページに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>

相対URLと絶対URL

../と〜/をURLパスの前に使用すると、相対URLを作成できます。参照しているファイルまたはリンクを含むファイルのフォルダーレベルを変更すると、相対URLのパスが影響を受けます。

../記号は、リンクを含むフォルダーから1ステップ進みます。正しいファイルを参照するのに十分な '../'があることを確認してください。

〜/記号は、プロジェクトのルートから始まるパスを作成します。

絶対URLを作成するには、ページに含めるファイルをVisual Studioのソリューションエクスプローラーからページにドラッグするだけです。

絶対URLと相対URLのチェックの違いについての詳細 JavaScriptの相対パスと絶対パスの違い

2
Bee Dev

相対パスを含むすべてのページでjsをロードする場合は、modernizrエントリのすぐ下に追加します。

<asp:PlaceHolder runat="server">
    <%: Scripts.Render("~/bundles/modernizr") %>
    <%: Scripts.Render("~/Scripts/jquery.min.js") %>
    <%: Scripts.Render("~/Scripts/my.js") %>
</asp:PlaceHolder>
0
smoore4

ファイルの場所の前に、~プレフィックスを使用する必要があります。 （このように：~/projects/files/web/admin）

0
Osman Villi

〜/を../に置き換えてみてください。私のプロジェクトの1つは同じことをしていて、それを修正しました。

また、（プロジェクト内だけでなく）サーバー上でも、JSフォルダーがルートのすぐ下にあることを完全に確認してください。

0
Johnny Bones