ASP.NET 中带有母版页的 JQuery答案

【问题标题】：JQuery with MasterPage in ASP.NETASP.NET 中带有母版页的 JQuery
【发布时间】：2010-12-01 23:57:38
【问题描述】：

我正在尝试将 JQuery 与一些使用母版页的 asp.net 页面一起使用，但在加载 JQuery javascript 文件时遇到问题。

当我在母版页的标记中包含该文件时，它在与母版页位于同一目录中的页面上运行良好：

<script src="jquery/jquery-1.4.2.min.js" type="text/javascript"></script>

但是对于与母版页不在同一目录中的页面会中断。母版页继承了包含它们的页面的路径，因此对于不同的页面，jquery .js 文件的相对路径是不同的。而且，当然，我的主文件中不能有不同的相对路径，因为只有其中一个。

我可以使用绝对路径：

<script src="/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>

但如果网站安装为虚拟目录，则会中断。

我的下一个尝试是使用“~”来表示网站的根目录：

<script src="~/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>

但是脚本标签不理解~"。

所以我尝试在代码隐藏中执行此操作。从 OnInit()，我尝试了：

string url = "~/jquery/jquery-1.4.2.min.js";
url = this.ResolveUrl(url);
Page.ClientScript.RegisterClientScriptInclude("jquery_js", url);

当 JQuery javascript 运行时，这给了我错误。我在页面的标记中有一些 javascript：

$(document).ready(function()
{
    ...
}

我得到“$”是未定义的。我在开头的 jquery-1.4.2.min.js 中添加了一个警报，它加载正常，但是在 .aspx 文件中的这段 javascript 执行之后。

我尝试了 ScriptManager.RegisterClientScriptInclude()，但结果相同。

【问题讨论】：

上一个示例实际生成的 HTML 是什么？它是否包含在包含您的 $(document).ready 处理程序的脚本标记之后？
不。这就是问题所在。（或者最后一个问题。如果不是母版页，我可以将链接放在脚本之前。从代码隐藏中添加链接并不能让我控制它们的放置位置。

标签： asp.net jquery master-pages

【解决方案1】：

你可以使用：

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

或者可能构建一个基本上为您重新映射的控件：

<my:Script src="~/jquery/jquery-1.4.2.min.js" />

甚至可以在ClientScriptManager中注册，但最好放在页面中。

【讨论】：

【解决方案2】：

使用 google 为您的 jquery 提供服务：

<script type="text/javascript"  src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

请注意 src 属性中缺少 http，这将解决 http 与 https 可能出现的任何问题。

原因如下：http://encosia.com/2008/12/10/3-reasons-why-you-should-let-google-host-jquery-for-you/

Ode To Code 有一篇关于母版页的精彩文章，您也应该看看：

http://odetocode.com/Articles/450.aspx

【讨论】：

【解决方案3】：

使用Page.ResolveUrl()，使其与Page相关，而不是MasterPage（及其所在的控制目录），如下所示：

string url = Page.ResolveUrl("~/jquery/jquery-1.4.2.min.js");

【讨论】：

【解决方案4】：

ResolveUrl 是要走的路。

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

【讨论】：

【解决方案5】：

您可以在母版页标题中尝试src="<%= Page.ResolveClientUrl("~/jquery.js") %>。

$<script type="text/javascript" src="<% = Page.ResolveClientUrl("~/scripts/jquery-1.4.1.min.js") %>"></script>

【讨论】：

【解决方案6】：

尝试如下操作

StringBuilder sb = new StringBuilder();
            sb.Append("<script type=\"text/javascript\" src=\"");
            sb.Append("http://yourwebsitename" + "/" + "directory");
            sb.Append("/");
            sb.Append("jquery.js");
            sb.Append("\"></script>");
        Header.Controls.Add(new LiteralControl(sb.toString()));

【讨论】：

【解决方案7】：

当然，使用 google 是一个不错的选择，但是，您也可以在遇到问题的每个页面中添加链接（找不到 jquery 路径的那些）例如，如果您在另一个目录中有一个名为“MyPage.aspx”的页面，只需在页面“MyPage.aspx”的html上添加脚本即可这样，页面找不到您的 jquery 地址将与新地址正常工作希望对你有用

【讨论】：

将指向 jquery.js 的链接放在母版页中的全部意义在于，我不必将它单独放在每个页面中。 DRY 是一项基本设计原则，如果违反，后果自负。

【解决方案8】：

不要重复你自己

为您的页面制作扩展功能

public static class yourclass
{
    public static string ConvertRelativePathToRootPath(this Page p, string pathfromroot)
    {


        string newUrl = "";
        Uri originalUri = HttpContext.Current.Request.Url;
        newUrl = (originalUri.Scheme) + "://" + originalUri.Authority + pathfromroot;
        return newUrl;


    }
}

然后只需将以下代码添加到您的页面加载事件中

string ss = Page.ConvertRelativePathToRootPath("~/script/jquery-1.4.1.min.js");
ScriptManager.RegisterClientScriptInclude(this, this.GetType(), "Jquery", ss);

您还可以将上述扩展功能用于所有其他需要绝对路径的情况，例如您的文件上的图像或锚标记，其路径不是您的应用程序母版页根目录 :)

【讨论】：

我使用 RegisterClientScriptInclude() 来处理相对路径，这导致了另一个问题，文件被包含在文件中，而不是依赖于它的 javascript。

【解决方案9】：

问题的核心在于，被注入到带有RegisterClientScriptInclude 的页面中的 JavaScript 文件的链接被放置在依赖于它的标记中 JavaScript 代码下方的页面上。

$(document).ready() 中的内容可能要等到页面加载后才会执行，但$() 会立即执行，因为它会被浏览器读取。

解决方案是将 JavaScript 移到文件的后面。当您处理母版页和众多用户控件时，这并不总是像看起来那么简单。

对我来说，处理它的最简单方法是使用 RegisterStartupScript 从代码隐藏中注入 JavaScript。用这个注入的脚本块被添加到表单的末尾。其中的可执行语句只有在所有各种 JavaScript 文件都插入后才会执行。

【讨论】：