更新：在我的博客上发布了一篇博客文章，其中包含更新的链接和代码：https://egilhansen.com/2008/12/01/how-to-take-control-of-style-sheets-in-asp-net-themes-with-the-styleplaceholder-and-style-control/
问题很简单。使用ASP.NET主题时，您对样式表如何呈现到页面没有太多发言权。
渲染引擎使用＆lt; link href =“...”表示法按字母顺序添加主题文件夹中的所有样式表。
我们都知道样式表的顺序很重要，幸运的是，asp.nets的缺点可以通过在样式表前添加01,02，...，99来规避，从而强制你想要的订单（参见Rusty Swayne有关更多信息的技术blog post。）
如果您使用重置样式表，这一点尤为重要，我强烈推荐这样做;它可以更轻松地在浏览器中以一致的形式设置网站样式（请查看Reset Reloaded from Eric Meyer）。
您也错过了指定媒体类型（例如屏幕，打印，投影，盲文，语音）的可能性。如果你更喜欢使用@import方法包含样式表，那么你也会被冷落。
另一个缺少的选项是条件注释，如果您使用“ie-fix.css”样式表，这个选项特别有用。
在我解释StylePlaceholder和Style控件如何解决上述问题之前，在信用到期的情况下，我的解决方案受到关于该主题的Per Zimmerman’s blog post的启发。
StylePlaceHolder控件放在母版页或页面的标题部分。它可以托管一个或多个Style控件，默认情况下会删除渲染引擎添加的样式，并添加自己的样式（它只会删除从当前活动主题添加的样式）。
Style控件可以在它的开始和结束标记之间托管内联样式，并通过其CssUrl属性引用外部样式表文件。使用其他属性，您可以控制它呈现给页面的样式表。
让我举个例子。考虑一个简单的网站项目，其中包含一个母版页和一个包含三个样式表的主题 - 01reset.css，02style.css，99iefix.cs。注意：我使用前面描述的前缀技术命名它们，因为它可以提供更好的设计时间体验。此外，自定义控件的标记前缀是“ass：”。
在母版页的标题部分，添加：
<ass:StylePlaceHolder ID="StylePlaceHolder1" runat="server" SkinID="ThemeStyles" />
在主题目录中，添加外观文件（例如Styles.skin）并添加以下内容：
<ass:StylePlaceHolder1runat="server" SkinId="ThemeStyles">
<ass:Style CssUrl="~/App_Themes/Default/01reset.css" />
<ass:Style CssUrl="~/App_Themes/Default/02style.css" />
<ass:Style CssUrl="~/App_Themes/Default/99iefix.css" ConditionCommentExpression="[if IE]" />
</ass:StylePlaceHolder1>
基本上就是这样。 Style控件上有更多属性可用于控制渲染，但这是基本设置。有了这个，您可以轻松添加另一个主题并替换所有样式，因为您只需要包含不同的皮肤文件。
现在到了使这一切成为现实的代码。我必须承认，设计时间经验有些怪癖。这可能是因为我不太精通编写自定义控件（事实上，这两个是我的第一次尝试），所以我非常希望输入以下内容。在我正在开发的当前基于WCAB / WCSF的项目中，我在Visual Studios设计视图中看到这样的错误，我不知道为什么。网站编译，一切都在网上工作。
以下是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\"></{0}:StylePlaceHolder>")]
[ParseChildren(true, "Styles")]
[Themeable(true)]
[PersistChildren(false)]
public class StylePlaceHolder : Control
{
private List<Style> _styles;
[Browsable(true)]
[Category("Behavior")]
[DefaultValue("ThemeStyles")]
public override string SkinID { get; set; }
[Browsable(false)]
public List<Style> Styles
{
get
{
if (_styles == null)
_styles = new List<Style>();
return _styles;
}
}
protected override void CreateChildControls()
{
if (_styles == null)
return;
// add child controls
Styles.ForEach(Controls.Add);
}
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
// get notified when page has finished its load stage
Page.LoadComplete += Page_LoadComplete;
}
void Page_LoadComplete(object sender, EventArgs e)
{
// only remove if the page is actually using themes
if (!string.IsNullOrEmpty(Page.StyleSheetTheme) || !string.IsNullOrEmpty(Page.Theme))
{
// Make sure only to remove style sheets from the added by
// the runtime form the current theme.
var themePath = string.Format("~/App_Themes/{0}",
!string.IsNullOrEmpty(Page.StyleSheetTheme)
? Page.StyleSheetTheme
: Page.Theme);
// find all existing stylesheets in header
var removeCandidate = Page.Header.Controls.OfType<HtmlLink>()
.Where(link => link.Href.StartsWith(themePath)).ToList();
// remove the automatically added style sheets
removeCandidate.ForEach(Page.Header.Controls.Remove);
}
}
protected override void AddParsedSubObject(object obj)
{
// only add Style controls
if (obj is Style)
base.AddParsedSubObject(obj);
}
}
}
Style控件的代码：
using System.ComponentModel;
using System.Security.Permissions;
using System.Web;
using System.Web.UI;
[assembly: TagPrefix("Assimilated.Extensions.Web.Controls", "ass")]
namespace Assimilated.WebControls.Stylesheet
{
[AspNetHostingPermission(SecurityAction.Demand, Level = AspNetHostingPermissionLevel.Minimal)]
[AspNetHostingPermission(SecurityAction.InheritanceDemand, Level = AspNetHostingPermissionLevel.Minimal)]
[DefaultProperty("CssUrl")]
[ParseChildren(true, "InlineStyle")]
[PersistChildren(false)]
[ToolboxData("<{0}:Style runat=\"server\"></{0}:Style>")]
[Themeable(true)]
public class Style : Control
{
public Style()
{
// set default value... for some reason the DefaultValue attribute do
// not set this as I would have expected.
TargetMedia = "All";
}
#region Properties
[Browsable(true)]
[Category("Style sheet")]
[DefaultValue("")]
[Description("The url to the style sheet.")]
[UrlProperty("*.css")]
public string CssUrl
{
get; set;
}
[Browsable(true)]
[Category("Style sheet")]
[DefaultValue("All")]
[Description("The target media(s) of the style sheet. See http://www.w3.org/TR/REC-CSS2/media.html for more information.")]
public string TargetMedia
{
get; set;
}
[Browsable(true)]
[Category("Style sheet")]
[DefaultValue(EmbedType.Link)]
[Description("Specify how to embed the style sheet on the page.")]
public EmbedType Type
{
get; set;
}
[Browsable(false)]
[PersistenceMode(PersistenceMode.InnerDefaultProperty)]
public string InlineStyle
{
get; set;
}
[Browsable(true)]
[Category("Conditional comment")]
[DefaultValue("")]
[Description("Specifies a conditional comment expression to wrap the style sheet in. See http://msdn.microsoft.com/en-us/library/ms537512.aspx")]
public string ConditionalCommentExpression
{
get; set;
}
[Browsable(true)]
[Category("Conditional comment")]
[DefaultValue(CommentType.DownlevelHidden)]
[Description("Whether to reveal the conditional comment expression to downlevel browsers. Default is to hide. See http://msdn.microsoft.com/en-us/library/ms537512.aspx")]
public CommentType ConditionalCommentType
{
get; set;
}
[Browsable(true)]
[Category("Behavior")]
public override string SkinID { get; set; }
#endregion
protected override void Render(HtmlTextWriter writer)
{
// add empty line to make output pretty
writer.WriteLine();
// prints out begin condition comment tag
if (!string.IsNullOrEmpty(ConditionalCommentExpression))
writer.WriteLine(ConditionalCommentType == CommentType.DownlevelRevealed ? "<!{0}>" : "<!--{0}>",
ConditionalCommentExpression);
if (!string.IsNullOrEmpty(CssUrl))
{
// add shared attribute
writer.AddAttribute(HtmlTextWriterAttribute.Type, "text/css");
// render either import or link tag
if (Type == EmbedType.Link)
{
// <link href=\"{0}\" type=\"text/css\" rel=\"stylesheet\" media=\"{1}\" />
writer.AddAttribute(HtmlTextWriterAttribute.Href, ResolveUrl(CssUrl));
writer.AddAttribute(HtmlTextWriterAttribute.Rel, "stylesheet");
writer.AddAttribute("media", TargetMedia);
writer.RenderBeginTag(HtmlTextWriterTag.Link);
writer.RenderEndTag();
}
else
{
// <style type="text/css">@import "modern.css" screen;</style>
writer.RenderBeginTag(HtmlTextWriterTag.Style);
writer.Write("@import \"{0}\" {1};", ResolveUrl(CssUrl), TargetMedia);
writer.RenderEndTag();
}
}
if(!string.IsNullOrEmpty(InlineStyle))
{
// <style type="text/css">... inline style ... </style>
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 ? "<![endif]>" : "<![endif]-->");
}
}
}
public enum EmbedType
{
Link = 0,
Import = 1,
}
public enum CommentType
{
DownlevelHidden = 0,
DownlevelRevealed = 1
}
}
那你们觉得怎么样？这是asp.net主题问题的一个很好的解决方案吗？那代码怎么样？我真的很喜欢它的一些输入，特别是在设计时间方面。
我上传了包含该项目的zipped version of the Visual Studio solution，以防有人感兴趣。
最好的问候，埃吉尔。
答案 0 :(得分：2)
找到了我自己的问题的答案。
我在设计模式下出现渲染错误的原因是Visual Studio SP1中的明显错误which Microsoft has yet to fix。
因此，只要您在预编译的程序集中包含自定义控件，而不是通过同一解决方案中的其他项目，上述代码也可以按预期工作，也可以在设计模式下工作。
请参阅上面的链接，了解有关如何以及原因的更详细说明。
答案 1 :(得分：0)
工作非常顺利。
对于像我这样永远不会记住＆lt;％标签的语法的人，你需要添加到母版页定义的顶部和皮肤文件以注册命名空间。
<%@ Register TagPrefix="ass" Namespace="Assimilated.WebControls.Stylesheet" %>
我不确定我的代码中是否需要那么多“屁股”，但我不喜欢它。
哦，如果这真的是你的第一个定制控制很棒的工作。我知道它受到其他人的代码的启发，但它至少出现才能拥有所有正确的属性和接口。
答案 2 :(得分：0)
Re：使用特定的媒体CSS文件，你可以使用@media CSS语句，工作正常。