在ASP.NET中使用MasterPages時使用JQuery的正確方法？

在沒有masterpage的aspx頁面中使用JQuery時沒有問題，但是當我嘗試在具有masterpage的頁面中使用它時，它不起作用，所以我最終將jquery文件和其他腳本文件在頁面而不是主人。現在，如果我有10頁，我就這麼做了10個，我知道這是不正確的。在下面的示例masterpage中，我會在哪裏放置我的腳本文件。在ASP.NET中使用MasterPages時使用JQuery的正確方法？

<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腳本，而不僅僅是masterpage。在處理masterpages時，上面的示例使用了哪些內容？

來源

2009-04-08 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文件可能引用該頭的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後）控制。

來源

2009-04-08 19:44:22

好的，爲腳本使用不同的contentplaceholder。它應該看起來像這樣

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

</asp:ContentPlaceHolder>

將此標籤放置在您的母版頁的底部，靠近</body>標籤。這將允許您在主頁上以及在頁面上添加腳本。通過查看頁面源代碼並確保以正確的方式呈現HTML，確保腳本以正確的順序加載。祝你好運。

還有一件事，確保jQuery和FancyBox在任何其他js之前加載，否則它將無法工作。 JavaScript的調用順序加載，jQuery必須先加載！

來源

2009-04-08 19:19:10

JavaScript加載HTML標記之前？ – Xaisoft 2009-04-08 19:40:26

我使用這種方法。

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

只要將它放在標籤上方...

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

來源

2010-02-11 01:40:25 Kieran

+1，但是當包含語言屬性時表示包含無效屬性 – 2014-07-04 19:13:33

這是將母版頁裏面工作：

對於腳本文件：

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

對於CSS文件：

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

其他不ES：

使用縮小的版本，如能儘可能（FileName.min.js）和（FileName.min.css），以減少加載時間，提高搜索引擎優化。
將CSS放在</head>之前，並且在</body>到之前的腳本可以提高性能並改善SEO。
路徑中的瓦字符（〜）將自動解析爲您網站的根目錄。
不要忘記只使用樣式表runat="server"。該腳本不能有runat="server"，因爲它已經使用服務器運營商<%= %>。
你可以使用在線http://jscompress.com/壓縮你的javascript和https://csscompressor.net/壓縮你的CSS文件。

來源

2015-05-12 01:12:52

在ASP.NET中使用MasterPages時使用JQuery的正確方法？

回答

相關問題