javascript 在不重复包含指令的情况下向 ASP.NET Web 控件 (ascx) 添加样式和脚本

Adding styles and scripts to ASP.NET web controls (ascx) without repeating inclusion directives

提问by Andry

Consider to develop a web control (ASP.NET). What you would really like to do is styling and developing this control in a very good way, here's a very good way to do this (this is how I would like to do, further in this question I will explain why I cannot do this).

考虑开发一个 web 控件 (ASP.NET)。您真正想做的是以非常好的方式设计和开发此控件，这是一个非常好的方法（这就是我想要的方式，在这个问题中我将进一步解释为什么我不能这样做） .

A programmatic approach

程序化方法

1) I create my control in a separate folder called WebControlsand I name it (for example) MyWebControl. I will have these files: MyWebControl.ascxand MyWebControl.ascx.cs.

1) 我在一个名为WebControls(for example)的单独文件夹中创建我的控件并命名它MyWebControl。我将拥有这些文件：MyWebControl.ascx和MyWebControl.ascx.cs.

2) Given that my control is a complex control I associate a style and a dynamic client behavior referencing, in the control html, a css stylesheet called MyWebControl.ascx.cssand a javascript file called MyWebControl.ascx.js.

2) 鉴于我的控件是一个复杂的控件，我将一个样式和一个动态客户端行为关联起来，在控件 html 中，一个名为 .css 的 css 样式表MyWebControl.ascx.css和一个名为 .js的 javascript 文件MyWebControl.ascx.js。

3) In my control I do the following:

3）在我的控制下，我执行以下操作：

<%@ Control Language="C#" 
            AutoEventWireup="true" 
            CodeFile="MyWebControl.ascx.cs" 
            Inherits="MyApp.WebControls.MyWebControl" %>

<link href="MyWebControl.ascx.css" rel="stylesheet" type="text/css" />
<script src="MyWebControl.ascx.js" type="text/javascript"></script>

<div>
...
</div>

This is it!

就是这个！

The problem

问题

Well there is a problem in this thing: when my control is rendered, and in a page there is more than one of this control of mine, I get the links to the css and js file duplicated or even repeated more than once.

那么这件事有一个问题：当我的控件被呈现时，并且在一个页面中有多个我的控件时，我得到了重复甚至多次重复的 css 和 js 文件的链接。

How to link an external stylesheet/javascript file in my control without occurring in this bad stuff?

如何在我的控件中链接外部样式表/javascript 文件而不会发生这种坏事？

EDIT

编辑

OK, after looking a bit, with the help of others here in the community, I could understand that Page.ClientScriptis what comes to the rescue.

好吧，经过一番观察，在社区中其他人的帮助下，我明白这Page.ClientScript就是拯救的方法。

However, there are a lot of functionality for a script to be registered... can you tell the difference among these?

但是，要注册的脚本有很多功能……您能说出它们之间的区别吗？

1) Page.ClientScript.IsClientScriptBlockRegistered

1) Page.ClientScript.IsClientScriptBlockRegistered

2) Page.ClientScript.IsClientScriptIncludeRegistered

2) Page.ClientScript.IsClientScriptIncludeRegistered

3) Page.ClientScript.IsOnSubmitStatementRegistered

3) Page.ClientScript.IsOnSubmitStatementRegistered

4) Page.ClientScript.IsStartupScriptRegistered

4) Page.ClientScript.IsStartupScriptRegistered

And the corresponding set methods?

以及相应的设置方法？

1) Page.ClientScript.RegisterClientScriptBlock

1) Page.ClientScript.RegisterClientScriptBlock

2) Page.ClientScript.RegisterClientScriptInclude

2) Page.ClientScript.RegisterClientScriptInclude

3) Page.ClientScript.RegisterOnSubmitStatement

3) Page.ClientScript.RegisterOnSubmitStatement

4) Page.ClientScript.RegisterStartupScript

4) Page.ClientScript.RegisterStartupScript

Furthermore: can this be applied to javascript and css too?

此外：这也可以应用于 javascript 和 css 吗？

Thankyou

谢谢

采纳答案by Tim Schmelter

One thought: wouldn't it be possible to use ClientScriptManager.RegisterClientScriptBlockto inject the css-file import?

一个想法：难道不能使用ClientScriptManager.RegisterClientScriptBlock来注入 css 文件导入吗？

Something like(not tested):

类似的东西（未测试）：

if(! Page.ClientScript.IsClientScriptBlockRegistered("MyWebControl.ascx.css"))
{
    Page.ClientScript.RegisterClientScriptBlock(this.getType(),"MyWebControl.ascx.css",@"<style type=""text/css"" src=""MyWebControl.ascx.css""></style>");
}

Edited to change RegisterStartupScriptto RegisterClientScriptBlock

修改RegisterStartupScript为RegisterClientScriptBlock

According to your edits:

根据您的编辑：

• RegisterStartupScript(type, key, script)
• RegisterClientScriptBlock(type, key, script)

• 注册启动脚本（类型，键，脚本）
• RegisterClientScriptBlock（类型，键，脚本）

The difference between these two methods is where each one emits the script block. RegisterClientScriptBlock()emits the script block at the beginning of the Web Form (right after the tag), while RegisterStartupScript()emits the script block at the end of the Web Form (right before the tag).

这两种方法之间的区别在于每个方法都发出脚本块。RegisterClientScriptBlock()在 Web 表单的开头（标签之后）RegisterStartupScript()发出脚本块，而在 Web 表单的末尾（标签之前）发出脚本块。

To better understand why there are two different methods for emitting client-side script, realize that client-side script can be partitioned into two classes: code that is designed to run immediately when the page is loaded, and code that is designed to run when some client-side event occurs. A common example of code that is designed to run when the page is loaded is client-side code designed to set the focus to a textbox. For example, when you visit Google, a small bit of client-side code is executed when the page is loaded to automatically set the focus to the search textbox.

为了更好地理解为什么有两种不同的方法来发出客户端脚本，请认识到客户端脚本可以分为两类：设计为在页面加载时立即运行的代码，以及设计为在页面加载时运行的代码一些客户端事件发生。设计为在加载页面时运行的代码的一个常见示例是用于将焦点设置到文本框的客户端代码。例如，当您访问 Google 时，会在页面加载时执行一小段客户端代码以自动将焦点设置到搜索文本框。

http://msdn.microsoft.com/en-us/library/aa478975.aspx#aspnet-injectclientsidesc_topic2

http://msdn.microsoft.com/en-us/library/aa478975.aspx#aspnet-injectclientsidesc_topic2

Edit: from your comments i'm assuming that it unfortuately does not work this way. Have a look at following links:

编辑：根据您的评论，我假设它不幸无法以这种方式工作。看看以下链接：

• http://forums.asp.net/t/557140.aspx/1?CSS+stylesheet+in+ascx+file/?post=2692177
• http://nathanaeljones.com/146/referencing-stylesheets-scripts-from-content-pages/

• http://forums.asp.net/t/557140.aspx/1?CSS+stylesheet+in+ascx+file/?post=2692177
• http://nathanaeljones.com/146/referencing-stylesheets-scripts-from-content-pages/

There might be some working approaches

可能有一些工作方法

As a hint, you could create the HtmlLink programmatically in Page_Init-Handler of your UserControl:

作为提示，您可以在 UserControl 的 Page_Init-Handler 中以编程方式创建 HtmlLink：

Dim objLink As New HtmlLink();
objLink.ID = "MyWebControlascxcss";
objLink.Attributes("rel") = "stylesheet";
objLink.Attributes("type") = "text/css";
objLink.Href ="~/filname.css";
Page.Header.Controls.Add(objLink);

You should remember to check first with a recursive function if the link was already added to Page.Header.Controls-Collection.

如果链接已添加到Page.Header.Controls-Collection，您应该记住首先使用递归函数进行检查。