Question

我正在尝试将js和css包含在我的主页中的代码中以及Page_Load事件中的用户控件中。

但显然，自用户控件的Page_Load加载到母版页的Page_Load之后，js就会中断。我在我的母版页中包含我在网站上使用的jquery库，但用户控件中使用的脚本仅包含在用户控件中。问题是用户控制js scrips使用jquery功能（应该如此），但是当它试图运行时，它会因为jquery libs尚未加载而中断。 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 Script Loader和Script Manager。

如果以正确的顺序添加脚本，Script Manager将起作用。使用AJAX Script Loader

可以更好地解决您的问题

Answer 2

使用ScriptManager。这很容易：

<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>";

这允许我在生产中将其缩小或由谷歌托管，但使用intellisense中的完整版本。

不要忘记在Page_Load中使用ResolveUrl：

            Page.Header.DataBind();

希望这会有所帮助。：）

在主页中包含Javascript和css，在asp.net中包含用户控件

3 个答案: