在 asp.net 的母版页和用户控件中包含 Javascript 和 css

Question

我试图将 js 和 css 包含在我的母版页和 Page_Load 事件中的用户控件后面的代码中。

但显然，由于用户控件的 Page_Load 在母版页的 Page_Load 之前加载，js 会中断。我将整个站点使用的 jquery 库包含在我的母版页中，但用户控件中使用的脚本仅包含在用户控件中。问题是用户控制 js 脚本使用了 jquery 功能（它应该如此），但是当它尝试运行时，它会中断，因为 jquery 库尚未加载。 Anwyays，有办法解决这个令人沮丧的混乱吗？

我用它来将 js 包含在我的代码中。 relativeResolvedPath 基本上是 ResolveUrl(url)

    HtmlGenericControl js = new HtmlGenericControl("script");
    js.Attributes.Add("type", "text/javascript");
    js.Attributes.Add("src", relativeResolvedPath);
    Page.Header.Controls.Add(js);

Answer 1

首先，Page.Controls.Add 将在 html 文档中的随机位置添加脚本块。您实际上应该只在页眉或页面底部添加脚本文件（在线搜索会告诉您，页面底部是更好的 UI 性能的首选）。

为了确保 javascript 文件的正确顺序，我将查看 ASP.Net AJAX 脚本加载器 和 脚本管理器。

脚本管理器 将起作用。使用 可以更好地解决您的问题AJAX 脚本加载器

Answer 2

使用脚本管理器。这非常简单：

<asp:ScriptManager ID="SM1" runat="server">
  <Scripts>
    <asp:ScriptReference Name="Script.js" />
  </Scripts>
</asp:ScriptManager>

为了使其更容易，您只需在母版页中添加一个空的脚本管理器控件：

<asp:ScriptManager ID="MasterPageScriptManager" runat="server" />

并在所有页面/控件上添加一个脚本管理器代理，该代理将加载自定义脚本：

<asp:ScriptManagerProxy  ID="SM1" runat="server">
  <Scripts>
    <asp:ScriptReference Name="Script.js" />
  </Scripts>
</asp:ScriptManagerProxy>

编辑：如果这不是您想要的正在寻找，抱歉。听起来您只是想找出脚本的正确位置。如果是这种情况，您可以做的另一件事是在您的母版页和任何未来的脚本中包含 jQuery，如下所示：

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

我建议不要从代码隐藏加载 javascript，除非您正在动态构建 javascript 代码，或者正在构建应用程序并将其发布给某人来调整 UI，并且您不希望该功能被篡改。

如果您正在加载警报或类似的内容，请使用以下内容：

string myScript = "$(document).ready(function() { alert('message');});";
Page.ClientScript.RegisterClientScriptBlock(this.Page.GetType(), "alerting", myScript, true); 

Answer 3

在 MasterPage 中使用 Page_Init 使代码在子页面和 UserControl Page_Load 事件之前运行。

不要忘记偶尔进行“查看源代码”作为健全性检查。您必须确保这些内容按照您期望的顺序进入响应。

在将响应发送到用户代理之前，UserControls 中使用的客户端脚本不会执行，因此只要 jQuery 库包含在响应的前面，就应该没问题。这实际上并不是生命周期问题，除非您将服务器代码与您发送的客户端代码混合在一起。

我在 MasterPage 的头部有这个

    <link rel="shortcut icon" href="<%#ResolveUrl("~/favicon.ico" ) %>" />
    <script type="text/javascript">
        var applicationRoot = "<%# webController.AppUrl %>";
    </script>
    <asp:Literal ID="litJqueryMinified" runat="server" /><asp:PlaceHolder id="phjQuery" runat="server"><script src="Script/jquery-1.3.2.js" type="text/javascript"></script></asp:PlaceHolder>
    <asp:Literal ID="litJqueryUIMinified" runat="server" /><asp:PlaceHolder id="phjQueryUI" runat="server"><script src="Script/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script></asp:PlaceHolder>
    <script src="<%#ResolveUrl("~/Script/jquery.fancybox-1.2.1.pack.js" ) %>" type="text/javascript"></script>
    <script src="<%#ResolveUrl("~/Script/jquery.maskedinput-1.2.2.min.js" ) %>" type="text/javascript"></script>
    <script src="<%#ResolveUrl("~/Script/jquery.cycle.all.min.js" ) %>" type="text/javascript"></script>

，在代码隐藏中有这个：

        // Swap the jQuery inlcude for the minified version
        phjQuery.Visible = false;
        phjQueryUI.Visible = false;
        string jQueryAddress = currentSettings != null && currentSettings["jQueryLocation"] == "local" ? ResolveUrl("Script/jquery-1.3.2.min.js") : "https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js";
        string jQueryUIAddress = currentSettings != null && currentSettings["jQueryLocation"] == "local" ? ResolveUrl("Script/jquery-ui-1.7.2.custom.min.js") : "https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js";
        litJqueryMinified.Text = "<script src=\"" + jQueryAddress + "\" type=\"text/javascript\"></script>";
        litJqueryUIMinified.Text = "<script src=\"" + jQueryUIAddress + "\" type=\"text/javascript\"></script>";

这允许我在生产中将其缩小或由 google 托管，但在开发中使用带有智能感知的完整版本。

不要忘记在您的 Page_Load 中使 ResolveUrl 正常工作：

            Page.Header.DataBind();

希望这会有所帮助。 :)