ASP.NET 2.0配合MasterPage的优化CSS

转载 2007年10月12日 16:26:00
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 web api 2.0 实现跨域资源共享

asp.net web api 2 对跨域资源共享的支持1. 同源策略:同源策略是浏览器为保证安全最基本的功能, 只有同源的脚本才能够被执行,那么什么是同源呢?同源是指协议,域名以及端口号都相同,任何...
  • zhanxueguang
  • zhanxueguang
  • 2015年07月09日 20:47
  • 1353

Asp.Net Core 2.0 生成操作数据库文件需要的文件

开发环境 VS2017 + Win7 x64 生成操作数据库文件需要配置或添加的文件 1、Startup.cs public IConfiguration Configuratio...
  • king_hh
  • king_hh
  • 2017年12月29日 16:50
  • 81

css和masterpage开发,部署

原文地址:http://blog.sina.com.cn/s/blog_65b145b40100y1q1.html 感谢原文作者分享,向原文作者致敬!!!!! 一、CSS的开发与部署相对比...
  • shang674544686
  • shang674544686
  • 2013年06月27日 11:00
  • 410

ASP.NET中使用CSS样式

1  使用link标签去调用样式,即调用css文件中的样式,可以直接将CSS文件拖拽到html页的head下面      此方法先加载css,后加载html 网页标题 2 使...
  • taoerit
  • taoerit
  • 2015年09月19日 15:33
  • 3968

.net core + vue开发单页应用(二)

上一篇中已将完成了基础结构的搭建,这一篇将开始正式开发。页面直接使用了一位小伙伴的源码,可以在https://github.com/taylorchen709/vue-admin下载 修改入口mai...
  • u011822144
  • u011822144
  • 2017年05月26日 10:31
  • 1644

【B/S】HTML、CSS、JS之间的配合工作

HTML是网页的基础,CSS是元素格式、页面布局的灵魂,而js是实现网页的动态性、交互性的点睛之笔...
  • u013036092
  • u013036092
  • 2016年02月23日 15:31
  • 1326

IIS6.0手动安装与配置asp.net2.0全过程

这个问题不是很新了,但是相信对一些新手来说还是有一定难度的,或是一些程序员本身就没有机会接触到这块,正好今天 我配置计算机,把这个过程记录下来,希望以后能用的上,也希望能给大家带来一点帮助(本次试用的...
  • szyone
  • szyone
  • 2013年07月04日 14:38
  • 657

asp.net core开发环境准备

本文主要讲解了 Asp.net Core 基于命令、VS2015、VS Code及Yeoman搭建基本开发环境的方法。...
  • xuanhun
  • xuanhun
  • 2016年06月30日 12:44
  • 2360

ASP.NET MasterPage 中图片路径的解决办法

ASP.NET MasterPage 中图片路径的解决办法   一般而言,链接路径的表达有三种方式:绝对路径、相对路径和基于根目录的路径。另外对于ASP.NET服务器控件来说,还可以使用“~”...
  • kingmax54212008
  • kingmax54212008
  • 2013年02月12日 07:44
  • 751

ASP.NET2.0轻松搞定统计图表

主页:http://blog.csdn.net/21aspnet/           时间:2007.3.27 本文讲述如何绘制条形图,折线图,柱形图,面积图等常见图形。 效果图: ...
  • jsjpanxiaoyu
  • jsjpanxiaoyu
  • 2015年03月22日 01:23
  • 1479
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ASP.NET 2.0配合MasterPage的优化CSS
举报原因:
原因补充:

(最多只允许输入30个字)