asp.net - 创建具有多个外观的 ASP.NET Web 应用程序？

Question

我目前正在开发一个具有多个外观的 ASP.NET WebForms 应用程序。我考虑的方法是将每个皮肤放在一个完全独立的文件夹中，该文件夹将包含所有图像和 CSS，CSS 将相应地引用图像。

文件夹结构是这样的:

• /Default.aspx
• /Skins/Master.css
• /Skins1/Skin1/Skin1.css
• /Skins1/Skin1/Images/...
• /Skins1/Skin1/Skin2.css
• /Skins1/Skin2/Images/...
• /Skins1/Skin1/Skin3.css
• /Skins1/Skin3/Images/...

因此，例如，我们可能有:

<div id="foo-logo"></div>
<a href="/bar/"><div id="bar-logo"></div></a>

然后在 CSS 中:

#top-logo { height: 100px; width:200px; background:url(images/foo-logo.jpg); }
#bar-logo { height: 50px;  width:100px; background:url(images/bar-logo.jpg); }

我的逻辑是避免在代码中引用皮肤文件夹，如下所示:

<img src="/skins/<%=Settings.CurrentSkin%>/images/foo-logo.jpg" />
<a href="/bar/"><img src="/skins/<%=Settings.CurrentSkin%>/images/bar-logo.jpg" /></a>

这样，HTML 将保持干净并完全独立，并且可以通过引用不同的 CSS 文件来完全改变皮肤，并且无需更新图像标签。

我能想到的主要缺点是:

• 包含元素的图像尺寸需要在 CSS 中具体指定，因为它们将作为 CSS 背景图像实现
• 如果仅使用 CSS 可见 Logo 等重要品牌元素，Web 应用程序可能不会降级

使用此方法时还有什么我应该注意的和/或是否有更好的方法来实现此目的？

Answer 1

WebForms 支持 Themes 和 Skinning，它可以做很多您想在这里做的事情，一些有用的文章是

Ode to Code , MSDN

皮肤基本上允许您做的是定义单独的样式表和控制皮肤。您拥有的文件夹结构如下所示

App_Themes/Skin1

App_Themes/Skin2

App_Themes/Skin3

...

然后您可以使用 asp:Image 控件为每个皮肤 ID 指向不同的图像 url(或者您可以通过 CSS 实现)。