web-dev-qa-db-ja.com

ASP.NETでMasterPagesを使用するときにJQueryを使用する適切な方法は？

マスターページのないaspxページでJQueryを使用しても問題はありませんが、マスターページのあるページでJQueryを使用しようとすると機能しません。そのため、jqueryファイルやその他のスクリプトファイルをマスターではなくページ。 10ページある場合、10ページすべてでこれを実行していますが、これは間違いであることがわかります。以下のサンプルマスターページでは、スクリプトファイルをどこに配置しますか。

<html>
<head runat="server">
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <asp:ContentPlaceHolder ID="ContentPanel" runat="server">
    </asp:ContentPlaceHolder>            
</body>
</html>

私は最近fancyboxプラグインを使用しましたが、jqueryスクリプトとfancyboxスクリプトをマスターページに配置する代わりに、それを動作させるのにイライラしていました。特にスクリプトを実行したいページに入れました一番下、asp：Contentを閉じる直前。もちろん、他のページでfancyboxプラグインを使用したい場合は、マスターページだけでなく5ページすべてにjqueryスクリプトとfancyboxスクリプトを配置するという問題があります。マスターページを扱うとき、上記の例を使用してすべてがどこに行くのですか？

asp.netjquerymaster-pagesfancybox
39
Xaisoft

通常のように、マスターページ内でメインのjQueryスクリプトを宣言します。

<head runat="server">
  <link href="/Content/Interlude.css" rel="Stylesheet" type="text/css" />
  <script type="text/javascript" src="/Scripts/jquery-1.3.2.min.js"></script>
  <asp:ContentPlaceHolder ID="head" runat="server">
  </asp:ContentPlaceHolder>
</head>

そして、ページ固有のJSファイルは、Head ContentPlaceholderを参照するコンテンツコントロール内にロードできます。

ただし、より良いオプションは、 ScriptManager および ScriptManagerProxy コントロールを調べることです。これらは、JSファイルがクライアントに提供される方法をより詳細に制御できます。 。

そのため、マスターページにScriptManagerコントロールを配置し、その中にjQueryコアコードへの参照を追加します。

<body>
  <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
      <Scripts>
        <asp:ScriptReference Path="/Scripts/jquery-1.3.2.min.js" />
      </Scripts>
    </asp:ScriptManager>

次に、いくつかのカスタムJSファイルまたはjQueryプラグインを必要とするページで、次のことができます。

<asp:Content ID="bodyContent" ContentPlaceholderID="body">
  <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
      <Scripts>
        <asp:ScriptReference Path="/Scripts/jquery.fancybox-1.2.1.pack.js" />
      </Scripts>
  </asp:ScriptManagerProxy>

ScriptManagerを使用すると、 LoadScriptsBeforeUI でページ上のスクリプトのレンダリング位置を制御するなどのことができます（または、Falseに設定することでさらに良い）。

54
Zhaph - Ben Duguid

この方法を使用します。

<script type="text/javascript" language="javascript" src='<%=ResolveUrl("~/scripts/jquery.js") %>' ></script>

タグの上に置いてください...

<asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
8
Kieran

スクリプトに別のコンテンツプレースホルダーを使用してください。このように見えるはずです

<script type="text/javascript" src="myscript.js" />
<asp:ContentPlaceHolder ID="ScriptContent" runat="server">

</asp:ContentPlaceHolder>

このタグをマスターページの一番下、</body> 鬼ごっこ。これにより、マスターページとページにもスクリプトを追加できます。ページのソースを表示し、HTMLが正しい方法でレンダリングされるようにして、スクリプトが正しい順序で読み込まれていることを確認してください。幸運を。

もう1つ、jQueryとFancyBoxが他のjsをロードする前にロードすることを確認してください。そうしないと動作しません。 Javascriptは呼び出された順序でロードされます。jQueryは最初にロードする必要があります！

2
Al Katawazi

これは、マスターページ内で機能するものです。

スクリプトファイルの場合：

<script type="text/javascript" src="<%= ResolveUrl("~/script/scriptFile.min.js") %>"></script>

CSSファイルの場合：

<link rel="stylesheet" href="~/styles/CssFile.min.css" runat="server" />

追記：

  1. 可能な限り縮小されたバージョン（FileName.min.js）および（FileName.min.css）を使用して、読み込み時間を短縮し、SEOを改善します。
  2. パフォーマンスを向上させ、SEOを改善するには、CSSを</head>の前に、スクリプトを</body>の前に置きます。
  3. パス内のタイル文字（〜）は、Webサイトのルートに自動的に解決されます。
  4. スタイルシートにのみrunat="server"を使用することを忘れないでください。このスクリプトには既にサーバー演算子runat="server"が使用されているため、<%= %>を含めることはできません。
  5. オンラインで http://jscompress.com/ を使用してjavascriptを圧縮し、 https://csscompressor.net/ を使用してCSSファイルを圧縮できます。
0
Shadi Namrouti