如何使用StylePlaceHolder和Style控件在ASP.NET主题中控制样式表

更新:这变成了一个博客文章,用更新的链接和代码,在我的博客:https://egilhansen.com/2008/12/01/how-to-take-control-of-style-sheets-in- ASP净主题-用最styleplaceholder和风格的控制/

问题很简单.使用ASP.NET主题时,您对样式表如何呈现到页面没有太多发言权.

渲染引擎使用

我们都知道样式表的顺序很重要,幸运的是asp.nets缺点,可以通过在前面用01,02,...,99,从而迫使你想要的顺序(见生锈Swayne样式表规避博客帖子上更多信息的技术).

如果您使用重置样式表,这一点尤其重要,我强烈建议您使用; 它使得跨浏览器以一致的形式设置网站的样式变得更加容易(请参阅Eric Meyer的重置重新加载).

您也错过了指定媒体类型(例如屏幕,打印,投影,盲文,语音)的可能性.如果您更喜欢使用@import方法包含样式表,那么您也会被冷落.

另一个缺少的选项是条件注释,如果您使用"ie-fix.css"样式表,这将特别有用.

在我解释StylePlaceholder和Style控件如何解决上述问题之前,我们的解决方案受到Per Zimmerman关于该主题的博客文章的启发.

StylePlaceHolder控件放在主页面或页面的标题部分.它可以托管一个或多个Style控件,默认情况下会删除渲染引擎添加的样式,并添加自己的样式(它只会删除从当前活动主题添加的样式).

样式控件可以在其开始和结束标记之间托管内联样式,并通过其CssUrl属性引用外部样式表文件.使用其他属性,您可以控制它呈现给页面的样式表的方式.

让我举个例子.考虑一个简单的网站项目,其中包含一个母版页和一个包含三个样式表的主题 - 01reset.css,02style.css,99iefix.cs.注意:我使用前面描述的前缀技术命名它们,因为它可以提供更好的设计时间体验.此外,自定义控件的标记前缀是"ass:".

在母版页的标题部分中,添加:

在主题目录中,添加外观文件(例如Styles.skin)并添加以下内容:

基本上就是这样.Style控件上有更多属性可用于控制渲染,但这是基本设置.有了这个,你可以轻松添加另一个主题并替换所有样式,因为你只需要包含一个不同的皮肤文件.

现在到了使这一切成为现实的代码.我必须承认,设计时间经验有些怪癖.这可能是因为我不太精通编写自定义控件(事实上,这两个是我的第一次尝试),所以我非常希望输入以下内容.在我正在开发的当前基于WCAB/WCSF的项目中,我在Visual Studios设计视图中看到这样的错误,我不知道为什么.该网站编译,一切都在网上工作.

Visual Studio中的设计时错误示例http://www.egil.dk/wp-content/styleplaceholder-error.jpg

以下是StylePlaceHolder控件的代码:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Security.Permissions;
using System.Web;
using System.Web.UI;
using System.Web.UI.HtmlControls;

[assembly: TagPrefix("Assimilated.Extensions.Web.Controls", "ass")]
namespace Assimilated.WebControls.Stylesheet
{
    [AspNetHostingPermission(SecurityAction.Demand, Level = AspNetHostingPermissionLevel.Minimal)]
    [AspNetHostingPermission(SecurityAction.InheritanceDemand, Level = AspNetHostingPermissionLevel.Minimal)]
    [DefaultProperty("SkinID")]
    [ToolboxData("<{0}:StylePlaceHolder runat=\"server\" SkinID=\"ThemeStyles\">")]
    [ParseChildren(true, "Styles")]
    [Themeable(true)]
    [PersistChildren(false)]
    public class StylePlaceHolder : Control
    {
        private List
                    writer.RenderBeginTag(HtmlTextWriterTag.Style);
                    writer.Write("@import \"{0}\" {1};", ResolveUrl(CssUrl), TargetMedia);
                    writer.RenderEndTag();
                }
            }

            if(!string.IsNullOrEmpty(InlineStyle))
            {
                // 
                writer.AddAttribute(HtmlTextWriterAttribute.Type, "text/css");
                writer.RenderBeginTag(HtmlTextWriterTag.Style);
                writer.Write(InlineStyle);
                writer.RenderEndTag();
            }

            // prints out end condition comment tag
            if (!string.IsNullOrEmpty(ConditionalCommentExpression))
            {
                // add empty line to make output pretty
                writer.WriteLine();
                writer.WriteLine(ConditionalCommentType == CommentType.DownlevelRevealed ? "" : "");
            }
        }
    }

    public enum EmbedType
    {        
        Link = 0,
        Import = 1,
    }

    public enum CommentType
    {
        DownlevelHidden = 0,
        DownlevelRevealed = 1
    }
}

那你觉得怎么样？这是asp.net主题问题的一个很好的解决方案吗？那代码怎么样？我真的很喜欢它的一些输入,特别是在设计时间方面.

我上传了包含该项目的Visual Studio解决方案的压缩版本,以防任何人感兴趣.

最好的问候,埃吉尔.