ASP.Net 母版页和子页都需要引用 jQuery 库答案

【问题标题】：ASP.Net Master Page and Child Page both require reference to jQuery libraryASP.Net 母版页和子页都需要引用 jQuery 库
【发布时间】：2013-02-07 10:43:20
【问题描述】：

也许有人可以帮助我理解 jQuery 与 ASP.Net 交互的方式？

在我的站点母版页中，我包含了对 jQuery 库的引用以及以下其他引用：

    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>    <script src="/js/ui/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>    <script  src="/js/jquery.autocomplete.js" type="text/javascript"></script>    <script src="/js/liquidmetal.js" type="text/javascript"></script>    <script src="/js/jquery.flexselect.js" type="text/javascript"></script>

我假设通过这样做，jQuery 库现在对于所有其他使用站点母版作为母版页的 ASP.Net 页面来说是“全局的”。

在一个特定的子页面中，我使用了其他 jQuery 插件，例如：

为我的数据库应用程序实现搜索功能。

在我的搜索页面中，我包含了一个 $document.ready 函数来实现各种 UI 元素的单击和更改处理程序。但是，它们的行为与预期不符，因此使用 Firebug 尝试了解子页面中出了什么问题，结果发现引发了以下异常：

ReferenceError: jQuery 未定义 [打破这个错误]

$(文档).ready(函数(){

当我在所有其他对插件等的引用之前包含对 jQuery 库的引用时，我的页面开始按预期运行，Firebug 报告没有问题。

有人可以向我解释一下为什么您需要在我的站点母版和使用它的页面中都引用 jQuery 库吗？

我是 jQuery 和 ASP.Net 的新手。

母版页代码：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<title>Untitled Page</title>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
<link rel="stylesheet" href="/css/ui-lightness/jquery-ui-1.7.2.custom.css" type="text/css" />    
<link rel="stylesheet" href="/css/main.css" type="text/css" media="screen, projection" />  
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print" />
<link rel="stylesheet" href="/css/jquery.tooltip.css" type="text/css" />
<link rel="stylesheet" href="/css/menubar.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="/css/tipsy.css" type="text/css" media="screen, projection" />

【问题讨论】：

标签： jquery asp.net master-pages

【解决方案1】：

应该发生的是，未加载 jquery 的内容页面是与其他内容页面不同的文件夹中的页面，也就是说，您的问题是对包含 jquery 文件的文件夹的引用。为避免此类问题，可以将 jquery 引用放在 Web 上的存储库，而不是本地文件系统（服务器）中。你应该这样写参考：

<head id="Head1" runat="server">
    <title>Some page</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" language="javascript" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" language="javascript" type="text/javascript"></script>
    <link href="~/Scripts/css/smoothness/jquery-ui-1.10.0.custom.min.css" rel="stylesheet"
        type="text/css" runat="server" />

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

注意引用 jQueryUI 样式表的 runat = "server" 标记。此属性允许 asp.net 处理标记并将相对路径放置到您的样式表，无论您的内容页面是什么级别的嵌套。

【讨论】：

碰巧文森特是对的，这是 jQuery 库脚本的位置相对于内容页面 <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> 的位置的问题。参考相对于母版页的位置，因此吸取了教训。公平地说，Ceryl 在之前的评论中确实提到了这一点。感谢所有回复的人，因为您给了我一些宝贵的见解。谢谢大家。

【解决方案2】：

这不应该发生在 imo...

Javascript 全部在客户端执行，您的母版页和子页在服务器端组装（不执行 Javascript 或其他任何操作），只有当您查看页面时，服务器才会将所有主/子部分放在一起并将完成的 HTML 发送到浏览器，只有这样浏览器才会开始执行 Javascript。所以它绝对不应该放在子页面和母版页中......

从没有任何额外信息的错误来看，我唯一能想到的是您可能将 Jquery 不是放在头部而是放在母版页的底部（因此，当从上到下读取 HTML 时，浏览器首先遇到在没有加载脚本的情况下调用 jQuery（在子页面代码中），因为这在最后是 waaaay。）

当将代码也放在您的子页面中时，它在您的 HTML 中足够高，以便在调用 JQuery 时可用...

【讨论】：

好的，所以我已将 jQuery 包含移动到标记之前，并从子页面中删除了对它的引用。回到eferenceError的问题：jQuery is not defined [Break On This Error] $(document).ready(function (){
母版页现在是：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <head runat="server">
BTW writeToBhuwan、Richard A. 和 Cerly Wiltink 请多多包涵，因为我仍在研究如何成为 Stack Overflow 上的“好”用户！
您在 HEAD 标记中没有脚本，但在和之间的外部...您的 HTML 看起来格式不正确...应该是这样的： ....
src 属性是正确的，并且 jQuery 库为使用相同主页面的“其他”子页面正确加载，但不是我遇到问题的那个！

【解决方案3】：

确保您在母版页中的内容占位符之前引用了 jquery 库。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>

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

</asp:ContentPlaceHolder>

【讨论】：

我的母版页（我作为新手继承的示例）是标准 HTML 页面的混合体，其中包含用于头部和主要内容的占位符：
我把引用移到了标签，还是没有解决问题！

【解决方案4】：

Vicente 是正确的，使用波浪号前缀表示路径是相对于路由的

但如果仍然出现错误，请使用 google cdn 方法并将本地副本作为备份，例如：

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined')
{
    document.write(unescape("%3Cscript src='~/js/jquery-1.3.2.min.js' type='text/javascript'%3E%3C/script%3E"));
   }
  </script>

【讨论】：