在ASCX自定义控件中放置CSS规则的位置？

时间：2012-07-12 04:40:35

标签： asp.net css jquery-ui

我刚接触ASP.NET工作，但我正在开发一个自定义控件，里面有一个多视图控件，显示了一堆不同的东西。其中一些使用JQuery UI元素（如制表符和手风琴）显示，这些元素将进行相当多的自定义。

由于我将会有很多CSS规则仅适用于自定义控件中的元素（而不是我们网站的其他部分），我想知道在哪里放置CSS样式规则。

我通常只是在网站根目录中放置一个样式表并从那里引用它。但是当我使用ASP.NET时，我觉得我应该将所有代码（包括CSS，JS等）放在自定义控件本身中。这感觉更“程序化”，将所有东西保持在一起。

有人愿意如何做到这一点吗？ ASP.NET中Web开发的最佳实践是什么？

2 个答案:

答案 0 :(得分：7)

如果您正在创建的控件位于单独的程序集中，则可以将CSS文件嵌入到程序集中以使其可重用，并从控件中创建直接指向这些文件的链接< / em>，然后在您的控件中，您将注册它们以在页面中呈现为link标记

注意：请记住，您需要将程序集中的CSS文件标记为嵌入式资源

只需选择您的文件|然后proeprties并更改其 Build Action 属性并将其设置为： embedded resource

enter image description here

在以下代码中：

  • AjaxEnabled.Web.UI表示程序集的命名空间

  • DefaultStyle.css表示嵌入的CSS文件名

以下代码示例显示了所需的步骤:(在您的自定义服务器控件中）

[assembly: WebResource("AjaxEnabled.Web.UI.DefaultStyle.css", "text/css")]

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

        if (this.Page.Header != null)
        {
            if (!this.Page.ClientScript.IsClientScriptBlockRegistered("defaultCss"))
            {
                var link = new HtmlLink();

                link.Href = this.Page.ClientScript.GetWebResourceUrl(
                    typeof(YourControlType),
                    "AjaxEnabled.Web.UI.DefaultStyle.css"
                );
                link.Attributes.Add("rel", "stylesheet");
                link.Attributes.Add("type", "text/css");

                this.Page.Header.Controls.Add(link);
                this.Page.ClientScript.RegisterClientScriptBlock(
                    typeof(Page),
                    "defaultCss",
                    string.Empty
                );
            }
        }
    }

您需要在包含自定义控件的页面中添加ScriptManager控件的实例

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

在ASPX页面中，您需要将header部分标记为服务器控件

<head runat="server">

以下代码：

link.Href = this.Page.ClientScript.GetWebResourceUrl(
                typeof(YourControlType),
                "AjaxEnabled.Web.UI.DefaultStyle.css");

将链接直接呈现到程序集中嵌入的CSS文件

这个条件：

if (!this.Page.ClientScript.IsClientScriptBlockRegistered("defaultCss"))
...
this.Page.ClientScript.RegisterClientScriptBlock(
                        typeof(Page),
                        "defaultCss",
                        string.Empty
                    );

确保CSS在页面中只呈现一次，即使您删除了多个控件实例

答案 1 :(得分：0)

您应该放入正在使用的页面。

为什么？

  1. 如果页面上有多个控件，如果将style / js应用于usercontrol而不引用外部样式表或脚本，则会看到每个单独控件都会重复大量CSS / js代码。
  2. 更好地管理代码。
  3. CSS的控制是与页面而不是控件本身，因此相同的控件可以用于多个页面，这可能需要不同的样式。
相关问题
最新问题