Question

我正在努力做一些我认为应该是标准练习的东西。我有许多使用一些JQuery插件的用户控件。我真的不想从我的主母版页链接到额外的CSS和JS文件，因为这会在他们第一次访问网站时给用户带来额外的负担，（不可否认它只会是一次），所以我只是把它们链接到用户控件的顶部。然后我看了我的源HTML，不好看！对于在页面上重复多次的控件来说更糟糕。

所以我认为有一种方法可以在用户控件需要时将它们注入页面的头部。对于那个问题，是否有一种方法可以为JS填充页脚？

Answer 1

要在ASP.NET中动态注册脚本（并确保合并重复项），您可以调用：

Page.ClientScript.RegisterClientScriptInclude(
    "mykey", "~/scripts/jquery-1.3.2.js");

并在MSDN上阅读有关此方法的完整详情。

要动态添加CSS，您可以执行以下操作：

HtmlLink cssLink = new HtmlLink();
cssLink.Href = "path to CSS";
cssLink.Attributes["some attr1"] = "some value1";
cssLink.Attributes["some attr2"] = "some value2";
Page.Header.Controls.Add(cssLink);

这个注入CSS的示例不会合并重复的条目。为避免重复，您必须自己跟踪重复项。您可以存储已经注册的脚本列表的地方是HttpContext.Items。在那里粘贴一个HashSet，它保存所有已注册脚本的列表，这样就不会两次注册相同的CSS文件（这通常是无害的，但无论如何都要避免）。

Answer 2

我遵循了类似的方法，但我直接在用户控件中使用CSS，因此我不必导入CSS文件。以下是完全来自示例用户控件的代码：

<style id="style1" type="text/css" visible="false" runat="server">
    td { font-family: Tahoma; font-size: 8pt; }
</style>

在代码隐藏中：

protected override void OnLoad(EventArgs e)
{
    base.OnLoad(e);

    HtmlGenericControl style = new HtmlGenericControl("style");
    style.Attributes.Add("type", "text/css");
    style.InnerHtml = style1.InnerHtml;
    Page.Header.Controls.Add(style);
}

你会注意到CSS是在head标签中呈现的，而不是在body标签内。

Answer 3

您可以将ClientScript.RegisterClientScriptInclude()用于JavaScript。

对于CSS，一个技巧是将它们包含在您的主页面中，但是使用Visible="false"，以便默认情况下不会将它们渲染到标记中。

然后，在您的用户控件中，从早期事件（例如OnLoad()）中设置Items集合中的标志。例如，this.Context.Items["mycss"] = true;

最后，在您的母版页中，从稍后的事件（例如OnPreRender()）中，检查是否设置了这些标记。如果是，则将Visible属性设置为true以获取相应的CSS。

这也允许您将控件与不使用CSS的母版页一起使用，因为可以简单地忽略Items条目。如果您有许多需要相同行为的母版页，您可以将此代码放在基类中或使用嵌套的母版页。

Answer 4

我假设您使用的是Asp.NET。

尝试将内容占位符放在MasterPage中...

<head>
<asp:ContentPlaceHolder ID="AdditionalPageHeader" />
</head>

如果你在aspx文件或ascx中工作，你只需要定义一个内容控件......

<asp:Content ContentPlaceHolderID="AdditionalPageHeader" />

如果您正在使用仅代码隐藏类型的服务器控件，则可以获取指向该内容占位符的指针：

this.Page.Master.FindControl("AdditionalPageHeader")

...并以编程方式操作它的内容。

Answer 5

要添加样式表或javascript（内联或非内联）动态，我写了这三个函数：

  Public Function addScript(ByVal path2js As String) As System.Web.UI.Control
    Dim si As New HtmlGenericControl
    si.TagName = "script"
    si.Attributes.Add("type", "text/javascript")
    si.Attributes.Add("src", path2js)
    Return si
  End Function
  Public Function addScript_inline(ByVal js As String) As System.Web.UI.Control
    Dim si As New HtmlGenericControl
    si.TagName = "script"
    si.Attributes.Add("type", "text/javascript")
    si.InnerHtml = js
    Return si
  End Function
  Public Function addStyle(ByVal path2css As String) As System.Web.UI.Control
    Dim css As New HtmlLink
    css.Href = path2css
    css.Attributes.Add("rel", "stylesheet")
    css.Attributes.Add("type", "text/css")
    css.Attributes.Add("media", "all")
    Return css
  End Function

我在我的母版页上的page_load中调用它们，如下所示：

Me.Page.Header.Controls.Add(modGlobal.addScript("script/json/json2.js"))

或

Me.Page.Header.Controls.Add(modGlobal.addStyle("style/flexigrid/flexigrid.css"))

此致

从用户控件将代码注入到母版页/ html头中

5 个答案: