如何在ASP.NET 2.0 中的Master Page具体页面中 使用CSS?
2010-12-16 17:32
441 查看
参考:http://www.cnblogs.com/SoulEdge/archive/2009/10/12/1581877.html
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 文件的职责分离,更容易理解和维护。
你好,这是一个很好的想法。按照这个想法我做了一个简单的 CustomControl,代码如下:
using System;
using System.Collections.Generic;
using System.Text;
using System.Web.UI.WebControls;
using System.ComponentModel;
using System.Web;
using System.Web.UI;
using System.Web.UI.HtmlControls;
namespace WWFox.Web.UI.WebControls
{
[DefaultProperty("CssText")]
[ToolboxData("<{0}:CssLinker1 runat=server></{0}:CssLinker1>")]
public class CssLinker: WebControl
{
protected override void Render(HtmlTextWriter writer)
{
}
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
HtmlLink link = new HtmlLink();
link.Href = CssPath;
link.Attributes["rel"] = "stylesheet";
link.Attributes["type"] = "text/css";
this.Page.Header.Controls.Add(link);
}
[Bindable(true)]
[Category("Appearance")]
[DefaultValue("")]
[Localizable(true)]
public string CssPath
{
get
{
String s = (String)ViewState["CssPath"];
return ((s == null) ? String.Empty : s);
}
set
{
ViewState["CssPath"] = value;
}
}
}
}
在多层嵌套的 MasterPage 中测试通过没有问题!
简单的引用代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"
MasterPageFile="~/masterPage2.master" %>
<%@ Register TagPrefix="wwf" Assembly="WWFox" Namespace="WWFox.Web.UI.WebControls" %>
<asp:Content ID="content2" runat="server"
ContentPlaceHolderID="cph1">
<wwf:CssLinker id="CssLinker1" runat="server"
CssPath="default.css" />
</asp:Content>
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 文件的职责分离,更容易理解和维护。
你好,这是一个很好的想法。按照这个想法我做了一个简单的 CustomControl,代码如下:
using System;
using System.Collections.Generic;
using System.Text;
using System.Web.UI.WebControls;
using System.ComponentModel;
using System.Web;
using System.Web.UI;
using System.Web.UI.HtmlControls;
namespace WWFox.Web.UI.WebControls
{
[DefaultProperty("CssText")]
[ToolboxData("<{0}:CssLinker1 runat=server></{0}:CssLinker1>")]
public class CssLinker: WebControl
{
protected override void Render(HtmlTextWriter writer)
{
}
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
HtmlLink link = new HtmlLink();
link.Href = CssPath;
link.Attributes["rel"] = "stylesheet";
link.Attributes["type"] = "text/css";
this.Page.Header.Controls.Add(link);
}
[Bindable(true)]
[Category("Appearance")]
[DefaultValue("")]
[Localizable(true)]
public string CssPath
{
get
{
String s = (String)ViewState["CssPath"];
return ((s == null) ? String.Empty : s);
}
set
{
ViewState["CssPath"] = value;
}
}
}
}
在多层嵌套的 MasterPage 中测试通过没有问题!
简单的引用代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"
MasterPageFile="~/masterPage2.master" %>
<%@ Register TagPrefix="wwf" Assembly="WWFox" Namespace="WWFox.Web.UI.WebControls" %>
<asp:Content ID="content2" runat="server"
ContentPlaceHolderID="cph1">
<wwf:CssLinker id="CssLinker1" runat="server"
CssPath="default.css" />
</asp:Content>
相关文章推荐
- 如何在asp.net页面使用css和js
- 如何在asp.net页面使用css和js
- asp.net从masterPage继承的页面,如何在客户端用javascript取control(比如textbox)的值
- ASP.net 使用母版页的页面如何使用css
- 关于ASP.NET中使用MasterPage和PageBase页面基类的一些体会
- 关于ASP.NET中使用MasterPage和PageBase页面基类的一些体会
- 设置页面的默认焦点控件和默认接受事件控件How Do I Set the DefaultFocus or DefaultButton in a Page Based on a Master Page in ASP.NET 2.0
- 如何在asp.net页面使用css和js
- ASP.NET中使用MasterPage和PageBase页面基类(多用户session)(转)
- Asp.net 2.0的一些小心得 (三) Master Page的使用
- 在ASP.NET AJAX中,由于一个ASPX页面上只能有一个ScriptManager控件,所以在有母版页的情况下,如果需要在Master-Page和Content-Page中需要引入不同的脚本时,这就需要在Content-page中使用ScriptMa
- ASP.NET 2.0中动态混合使用MasterPage和主题
- How to programmatically assign a SkinID to a control while using a master page in ASP.net 2.0
- asp.net设置标题 兼MasterPage得使用
- 使用ASP.NET 2.0 CSS 控件适配器生成CSS友好的HTML输出
- 如何使用 MasterPage(注意母板页和子页面的执行顺序) 转载
- 如何使用 MasterPage(注意母板页和子页面的执行顺序)
- [记录]ASP.NET MVC 2.0 如何使用Html.RadioButtonFor?
- 在ASP.NET 2.0中使用页面导航控件
- Captaris Workflow 6.0不支持ASP.NET 2.0的 MasterPage?