ASP.NET 2.0 中配合 Master Page 使用的优化 CSS 模型

ASP.NET 2.0 中配合 Master Page 使用的优化 CSS 模型

ASP.NET 2.0 中增加了内建的 MasterPage 的支持，这对我们来说是一个很大的便利。然而经过一段时间的使用，我发现 MasterPage 并不是那么完美：嵌套的 MasterPage 不能支持设计时界面，以及下面要提到的Content Page 中增加 CSS 的问题。

通常，在没有 2.0 之前，我们在页面里要增加一个 CSS 引用的语法如下：

<link rel="stylesheet" href="css/test.css" />

原本是很平常的做法。但是在一个 MasterPage 的子页面中，出现了一个很尴尬的局面，就是：我们该把上述代码放到什么位置？
因为 MasterPage 的具体内容页面中，只能定义一个个的 <asp:Content /> 标签的内容。我们按照通常的做法在 aspx 里面无法对页面的 <header/> 内容进行控制。而这个 <link/> 标签又必须放在 <header/> 内。我试验过在 <asp:Content /> 内部加入这行代码，但是会提示出错的。
同时，我们也无法在 MasterPage 的 <header/> 内部放好一个 ContentPlaceHolder 用于将来放入 CSS 的引用代码。
因此我的做法是定义了一个 helper 类如下：

static public class ControlHelper
{
    static public void AddStyleSheet(Page page, string cssPath)
    {
        HtmlLink link = new HtmlLink();
        link.Href = cssPath;
        link.Attributes["rel"] = "stylesheet";
        link.Attributes["type"] = "text/css";
        page.Header.Controls.Add(link);
    }
}

这样，在具体页面，我们就可以通过如下代码添加 CSS 引用：

protected void Page_Load(object sender, EventArgs e)
{
    ControlHelper.AddStyleSheet(this.Page, "css/projectPage.css");    
}

并且，这个代码支持在具体内容页面，或者一个嵌套的 Master Page 中使用。

说到这里也许有人会问，为什么要把 CSS 分开成这样来加载呢？有必要吗？我把所有页面的 CSS 定义到几个公共 CSS 文件里岂不是很好？

其实，熟悉 web 标准的 HTML 制作的朋友一定知道，在比较完美的状态下，页面的 html 和用于表现的 CSS 应该彻底分离。而我们基于 web 标准的设计，通常是先做出一个 Master Page 中各个框架 div 的定位代码，以及 header，footer 部分的修饰代码。这些是每个内容页面都要用到的，会放在一个统一的 CSS 里面。其他的具体内容页面，每个页面又会有各自不同的内容的布局，修饰样式，因此我把每个具体页面特定的部分放在它自己的 CSS里。这样就形成了一个按照 Master Page 的实现层次（可嵌套），逐层合并的 CSS 模型。其好处是实现了每个 CSS 文件的职责分离，更容易理解和维护。

由于 ASP.NET 2.0 接触不久，以上仅为个人摸索出的一点小经验，如果有更方便的解决办法，请各位朋友多多指教。

posted on 2006-05-23 01:12 木野狐 阅读(433) 评论(14)  编辑 收藏 收藏至365Key 所属分类: ASP,JS,CSS 、.NET

评论

# re: ASP.NET 2.0 中配合 Master Page 使用的优化 CSS 模型 2006-05-23 09:12 Bear.sTaR{R}

把.CSS文件放啊App_Thmes文件夹下就可以引用了，不用写代码！！！

http://www.cnblogs.com/bearstar/archive/2006/04/10/Theme.html  回复   

# re: ASP.NET 2.0 中配合 Master Page 使用的优化 CSS 模型 2006-05-23 09:24 苍冥

asp.net2.0有主题,你可以新建外观文件,会生成一个文件夹,文件夹里面可以放SKIN文件,也可以放CSS文件,当你详细页面用的时候只需要Theme="SkinFile" SkinFile为你放CSS及skin的文件夹名
而所有的这件主题文件夹是放在App_Themes文件夹下的
可以用多个主题来控制整站站点的页面风格变化.
每个控件上都可以设置是否应用此主题,默认为应用.也可以通过cssClass来设置应用此主题中的那一个CSS文件,或通过skinid来设置应用此主题中的那一个SKIN文件.  回复   

# re: ASP.NET 2.0 中配合 Master Page 使用的优化 CSS 模型 2006-05-23 09:29 leeeeeeeee

@Bear.sTaR{R}
嗯 是这样
  回复   

# re: ASP.NET 2.0 中配合 Master Page 使用的优化 CSS 模型 2006-05-23 09:48 FeelDesign

asp.net2.0的app_theme设计的不尽人意，当你为你的网站选择一个主题时，它会自动把这个skin文件夹下的所有css文件全部加载，所以，skin文件夹里面的css文件只能放公用css。像木野狐兄的这种应用需求，只能是把每个页面的css文件单独放入一个文件夹，动态加载。我的做法是：每个页面都有一个和页面名对应的css文件，比如login.aspx.css，然后在masterpage中动态加载和页面名对应的css文件。  回复   

# re: ASP.NET 2.0 中配合 Master Page 使用的优化 CSS 模型 2006-05-23 09:50 aspnetx

@Bear.sTaR{R}
没错，是这样
楼主说的方法除非是做什么特别大的项目
要不然看上去似乎没什么意义  回复   

# re: ASP.NET 2.0 中配合 Master Page 使用的优化 CSS 模型 2006-05-23 10:38 木野狐

@Bear.sTaR{R}

不是这样的。Theme 设计的目的是为了对整个站点或者一批页面设计一个统一的风格，并不是给单独的页面用的。如果每个页面对应的 css 都要定义一个不同的 Theme，这显然是对 Theme 的一种误用。而且这样做是有局限性的。因为每个页面只能有一个 Theme. 如果我需要对所有页面应用一个 Theme，这时候你具体页面的 CSS 写在哪里呢？

这里的 CSS 并非单纯指给服务器端控件应用的外观样式，还包括各种网页元素比如 ul, div, img 的定位样式。  回复   

# re: ASP.NET 2.0 中配合 Master Page 使用的优化 CSS 模型 2006-05-23 10:41 木野狐

@FeelDesign

你的做法是一个很好的思路 :)  回复   

# re: ASP.NET 2.0 中配合 Master Page 使用的优化 CSS 模型 2006-05-23 10:49 Bear.sTaR{R}

@木野狐
每个页面对应的1个css文件。我不知道其他人做项目怎么样。
不过就我来看，基本没这种情况。
每个页面1个CSS，那就单单写CSS都不知道要花费多少时间。
－－－－－－－－－－－－
不过如果真有这种情况,确实theme不是很方便，只能建多个theme文件夹。
但是楼主的代码也不见的方便啊，你的CSS文件名是写死在代码中的(虽然你可以改为从配置中读)，但一样是要每个页面写代码。

觉的不是实现方式的问题，而是每个页面对应的1个css文件就不会有方便的时候。  回复   

# re: ASP.NET 2.0 中配合 Master Page 使用的优化 CSS 模型 2006-05-23 11:23 木野狐

@Bear.sTaR{R}

“每个页面对应的1个css文件就不会有方便的时候”
的确是这样的。

从方便的角度来讲，我觉得这个做法还能接受。不过将 css 的加载放到了后台代码里，似乎有违 asp.net 后台代码分离的初衷，感觉是一种坏味道。

之所以选择这个做法，是想在实现页面独立的 css 加载的同时，保留控件应用统一的 Theme 的权力，所以在我的项目里其实是两者都在用的，并没有因此而抛弃 Theme.  回复   

# re: ASP.NET 2.0 中配合 Master Page 使用的优化 CSS 模型 2006-05-23 11:34 Bear.sTaR{R}

“是想在实现页面独立的 css 加载的同时，保留控件应用统一的 Theme 的权力。”

这样如果你在theme和你加载的css都对同1控件使用了相同style，
theme中的是style会覆盖你加载的css的style，这样你的css就起不了作用了。
  回复   

# re: ASP.NET 2.0 中配合 Master Page 使用的优化 CSS 模型 2006-05-23 11:49 木野狐

@Bear.sTaR{R}

呵呵，在应用多个样式的时候，肯定会考虑这个问题的，所以不会让这两种 CSS 的职责有交集。
  回复   

# re: ASP.NET 2.0 中配合 Master Page 使用的优化 CSS 模型 2006-05-23 12:00 Luna

@木野狐：
这种方法有很大的可取之处，前面完成的一个项目，就对Theme的这种不管3721，但凡Theme目录中的CSS文件统统加载的方式大为不满！

一个MasterPage可以应用于多个页面、子系统，同样一个Theme也可以应用于不同的页面和子系统，但是我期望MasterPage定义架构，Theme定义对应于某MasterPage中公共结构的样式，而具体页面则由各自的CSS定义样式。

这样一来，如果应用于同一个MasterPage的具体页面需要表现不同的风格，要么在同一个Theme里定义不同的CSS类（这样具体页面必然加载当前页面不需要的其他CSS类），要么根据具体页面定义多个Theme（这样每个Theme中又会产生垃圾文件，必然同样的图像文件等等）。

采用楼主的方式，从某种程度可以优化这些现象。
  回复   

# re: ASP.NET 2.0 中配合 Master Page 使用的优化 CSS 模型 2006-05-23 14:03 维生素C.NET

ASP.NET在style的处理上是真的不怎么样.app_theme目录无非就是在render时自动去组合出stylesheet的路径而已.最头疼的是在web.config里写<page theme="abc"/>的时候更是糟糕.使用了theme后会遍历下面的所有的css文件,而css恰好还有个顺序问题(相同命名的元素有相同属性的会被覆盖),asp.net都没有很好的以清晰的方式来解决这个问题.

Skin文件不太推荐使用.就像我宁愿用Repeater都不去用Datalist,render出一个<table>通常搞的我很头疼.  回复   

# re: ASP.NET 2.0 中配合 Master Page 使用的优化 CSS 模型 2006-05-23 14:25 爆牙齿

很久没仔细的使用过2.0了。不过这个问题确实有，beta1的时候就难过我。当时我的解决办法如下，和你有点不一样。
主masterpage：
<style type="text/css" media="screen">
<asp:contentplaceholder id="Style" runat="server" />
</style>

第一层嵌套masterpage：
<asp:Content ID="Content1" ContentPlaceHolderID="Style" Runat="server">
@import url(/Commons/Styles/<%=theme %>/GlobalLayout.css);
@import url(/Commons/Styles/<%=theme %>/<%=skin%>.css);
@import url(/Commons/Styles/<%=theme %>/SiteLayout.css);
</asp:Content>

第二层嵌套就不需要了。样式的加载在第一层嵌套的时候就可以程序控制了。

不过我现在觉得，其实一直都这么认为，样式不宜过度分离。  回复