利用 CSS Friendly Control Adapters 将 ASP.NET 控件转为符合WEB标准标签控制
Posted on 2007-01-18 19:29 Riceball LEE 阅读(4790) 评论(5) 编辑 收藏 举报
翻译自：http://www.asp.net/cssadapters/WalkThru/WalkThrough.aspx
利用 CSS Friendly Control Adapters 将 ASP.NET 控件转为符合WEB标准的、有语意的HTML页面 CSS 样式表控制。
例如，Menu、TreeView等控件均将输出< table>标签，而基于Web标准中的“有语意的”这一条，显然应该选择<ul>标签。
而使用CSS Friendly Control Adapters 会将其转为使用嵌套的<ul>标签渲染，这被称为纯CSS menu(http://www.meyerweb.com/eric/css/edge/menus/demo.html).
而对于以前不支持CSS的旧式浏览器，可以通过在配置文件中设定不同版本的浏览器使用不同的 Control Adapters
来解决！这样对于PocketPC也能通过提供不同的Control Adapters来获得支持！
== 下载和安装 ==
访问站点：http://www.asp.net/cssadapters/，单击“download source”按钮，下载ASPNETCssFriendlyAdapters.vsi。
或者直接下载： http://download.microsoft.com/download/b/a/3/ba3aee5e-2e28-4056-9e71-036b2e7f58af/ASPNETCssFriendlyAdapters.vsi
该文件是一个 Visual Studio Content Installer 安装包，需要 Visual Web Developer or Visual Studio 2005 方能运行解包。安装后将在你的Visual Studio中添加几个新的Web Site 模版。
== 使用 ==
进入 Visual Studio，选择 File -> New Web Site 菜单项，选择新加入的“ASP.NET CSS Friendly Web Site”模版，开始你自己的CSS样式表站点设计，或者
选择“Tutorial on ASP.NET CSS Friendly Control Adapters”模版建立教程站点，学习CSS Friendly sample adapters的功能。
创建新站点后，你可以看看里面的readme.txt 文件，了解下注意事项。
== 运行 ==
所有的adapted controls的例子放在页顶部的Exmaples菜单下面的，第一个就是被转换的<asp:menu>菜单控件例子：用嵌套的<ul>标签代替了不规范的<table>标签。
点击进入菜单控件例子页面，你能更清晰的看到转换前后有什么不同：
每一个例子都可以通过设置在是否使用转化接头(Adapters)之间切换：
另外可以通过Theme Chooser在两个不同样式Theme(Basic, Enhanced)之间切换，样式文件在App_Themes中：
要联机查看每个例子的源程序，可以通过点击“view source code”按钮：
== 文件的组织 ==
* 页面文件放在站点的根目录下面。
* 专用代码放在App_Code\SiteSpecific 文件夹下，只对这个教程站点有用的，没有实用意义的。
* CSS Friendly Control Adapters的源代码放在App_Code\Adapters下。
* App_Themes: 存放了两个不同的Theme样式
* bin目录下放的是一个显示高亮度语法的工具：Wilco Bauer's handy utility(http://www.wilcob.com/Wilco/Toolbox/SyntaxHighlighter.aspx)
* App_data 存放的是某些例子使用的xml数据
* CSS 目录，存放的是与Theme无关的，被Control Adapters使用的样式，这些样式包含的是插接的控件的behavior规范而不是界面表现。例如，对于pure css 菜单，有颜色，字体的界面规范；更重要的是还要有菜单如何工作的规范，比如如何显示菜单子项（当鼠标移上菜单的时候），如何隐藏菜单子项（当鼠标离开菜单的时候），这些CSS的通用规范被放于这个文件夹。旗下的子文件夹browser-specific包含了针对特定浏览器的CSS规范。
* App_Browsers 目录，设置使用CSS Friendly Control Adapters 的浏览器，你可以设置成不管浏览器的类型版本如何，始终使用这些Adapters；也可以设置成只针对特定的浏览器以及特定的版本才使用。
* Javascript目录，部分Control Adapters使用了一些JS代码实现，这些JS代码被存放于此。如果要改变该路径的名称，你需要在web.config文件中的appSettings节 添加/改变 CSSFriendly-JavaScript-Path 的值：<add key="CSSFriendly-JavaScript-Path" value="~/JavaScript" />
* Membership 目录，演示了如何插接ASP.NET 2.0 的membership 控件。
每一个转换的CSS控件都有自己的样式表，例如：<asp:GridView> 控件 has a style sheet named GridViewSample.css。该教程站点包含了两个Theme样式：
Basic and Enhanced, 因此在 Basic 文件夹和 Enhanced 文件夹中均有 GridViewSample.css 文件。
本教程站点在 App_Browsers 目录下的配置的.browse文件为 CSSFriendlyAdapters.browser，它配置为默认使用 CSS Friendly Control Adapters，当然你页可以将refID 改为 IE6to9, Gecko, Opera8to9 等等。
运行了例子，了解了文件的组织和意义，现在该是创建自己的网站的时候。如何修改CSS改变控件的外观?
让我们从menu讲起，首先我们修改下当鼠标移动到菜单上的颜色，在VS中，打开 App_Themes\Basic\MenuExample.css.文件：
CSS
.PrettyMenu ul.AspNet-Menu li:hover,
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover
{
background:#4682B3;
}
将该颜色改成其它的值如 #27408B。保存，然后刷新菜单控件例子页面：
还需要改变的是 .skin 文件，当浏览器不使用转换件的时候，控件默认会用该文件，打开 App_Themes\Basic\Basic.skin 文件，修改菜单的 DynamicHoverStyle 中的颜色值：
=== 使用CSS转换件的空页面 ===
<%@ Page Language="C# or VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link runat="server" rel="stylesheet" href="~/CSS/Import.css" type="text/css" id="AdaptersInvariantImportCSS" />
<!--[if lt IE 7]>
<link runat="server" rel="stylesheet" href="~/CSS/BrowserSpecific/IEMenu6.css" type="text/css" id="IEMenu6CSS" />
<![endif]-->
</head>
<body>
<form id="form1" runat="server">
<!-- adapted control(s) here-->
</form>
</body>
</html>
Import.css 是 Theme无关的CSS，表示的是CSS转换件的 behavioral 规则。
IEMenu6.css 是一个有条件的连接选项，当使用以前版本的IE浏览器需要。
=== 打造Pure CSS 菜单页面 ===
ASP.NET
<script runat="server">
Public Sub OnClick(ByVal sender As Object, ByVal e As MenuEventArgs)
MessageLabel.Text = "You selected " & e.Item.Text & "."
e.Item.Selected = True
End Sub
</script>
<asp:Menu ID="EntertainmentMenu" runat="server" Orientation="Horizontal" onmenuitemclick="OnClick" CssSelectorClass="SimpleEntertainmentMenu">
<Items>
<asp:MenuItem Text="Music">
<asp:MenuItem Text="Classical" />
<asp:MenuItem Text="Rock">
<asp:MenuItem Text="Electric" />
<asp:MenuItem Text="Acoustical" />
</asp:MenuItem>
<asp:MenuItem Text="Jazz" />
</asp:MenuItem>
<asp:MenuItem Text="Movies" Selectable="false">
<asp:MenuItem Text="Action" />
<asp:MenuItem Text="Drama" />
<asp:MenuItem Text="Musical" />
</asp:MenuItem>
</Items>
</asp:Menu>
CSS
.SimpleEntertainmentMenu .AspNet-Menu-Selected
{
border: solid 1px #00ff00 !important;
}
.SimpleEntertainmentMenu .AspNet-Menu-ChildSelected
{
border: solid 1px #ff0000 !important;
}
.SimpleEntertainmentMenu .AspNet-Menu-ParentSelected
{
border: solid 1px #0000ff !important;
}
利用 CSS Friendly Control Adapters 将 ASP.NET 控件转为符合WEB标准的、有语意的HTML页面 CSS 样式表控制。
例如，Menu、TreeView等控件均将输出< table>标签，而基于Web标准中的“有语意的”这一条，显然应该选择<ul>标签。
而使用CSS Friendly Control Adapters 会将其转为使用嵌套的<ul>标签渲染，这被称为纯CSS menu(http://www.meyerweb.com/eric/css/edge/menus/demo.html).
而对于以前不支持CSS的旧式浏览器，可以通过在配置文件中设定不同版本的浏览器使用不同的 Control Adapters
来解决！这样对于PocketPC也能通过提供不同的Control Adapters来获得支持！
== 下载和安装 ==
访问站点：http://www.asp.net/cssadapters/，单击“download source”按钮，下载ASPNETCssFriendlyAdapters.vsi。
或者直接下载： http://download.microsoft.com/download/b/a/3/ba3aee5e-2e28-4056-9e71-036b2e7f58af/ASPNETCssFriendlyAdapters.vsi
该文件是一个 Visual Studio Content Installer 安装包，需要 Visual Web Developer or Visual Studio 2005 方能运行解包。安装后将在你的Visual Studio中添加几个新的Web Site 模版。
== 使用 ==
进入 Visual Studio，选择 File -> New Web Site 菜单项，选择新加入的“ASP.NET CSS Friendly Web Site”模版，开始你自己的CSS样式表站点设计，或者
选择“Tutorial on ASP.NET CSS Friendly Control Adapters”模版建立教程站点，学习CSS Friendly sample adapters的功能。
创建新站点后，你可以看看里面的readme.txt 文件，了解下注意事项。
== 运行 ==
所有的adapted controls的例子放在页顶部的Exmaples菜单下面的，第一个就是被转换的<asp:menu>菜单控件例子：用嵌套的<ul>标签代替了不规范的<table>标签。
点击进入菜单控件例子页面，你能更清晰的看到转换前后有什么不同：
每一个例子都可以通过设置在是否使用转化接头(Adapters)之间切换：
另外可以通过Theme Chooser在两个不同样式Theme(Basic, Enhanced)之间切换，样式文件在App_Themes中：
要联机查看每个例子的源程序，可以通过点击“view source code”按钮：
== 文件的组织 ==
* 页面文件放在站点的根目录下面。
* 专用代码放在App_Code\SiteSpecific 文件夹下，只对这个教程站点有用的，没有实用意义的。
* CSS Friendly Control Adapters的源代码放在App_Code\Adapters下。
* App_Themes: 存放了两个不同的Theme样式
* bin目录下放的是一个显示高亮度语法的工具：Wilco Bauer's handy utility(http://www.wilcob.com/Wilco/Toolbox/SyntaxHighlighter.aspx)
* App_data 存放的是某些例子使用的xml数据
* CSS 目录，存放的是与Theme无关的，被Control Adapters使用的样式，这些样式包含的是插接的控件的behavior规范而不是界面表现。例如，对于pure css 菜单，有颜色，字体的界面规范；更重要的是还要有菜单如何工作的规范，比如如何显示菜单子项（当鼠标移上菜单的时候），如何隐藏菜单子项（当鼠标离开菜单的时候），这些CSS的通用规范被放于这个文件夹。旗下的子文件夹browser-specific包含了针对特定浏览器的CSS规范。
* App_Browsers 目录，设置使用CSS Friendly Control Adapters 的浏览器，你可以设置成不管浏览器的类型版本如何，始终使用这些Adapters；也可以设置成只针对特定的浏览器以及特定的版本才使用。
* Javascript目录，部分Control Adapters使用了一些JS代码实现，这些JS代码被存放于此。如果要改变该路径的名称，你需要在web.config文件中的appSettings节 添加/改变 CSSFriendly-JavaScript-Path 的值：<add key="CSSFriendly-JavaScript-Path" value="~/JavaScript" />
* Membership 目录，演示了如何插接ASP.NET 2.0 的membership 控件。
每一个转换的CSS控件都有自己的样式表，例如：<asp:GridView> 控件 has a style sheet named GridViewSample.css。该教程站点包含了两个Theme样式：
Basic and Enhanced, 因此在 Basic 文件夹和 Enhanced 文件夹中均有 GridViewSample.css 文件。
本教程站点在 App_Browsers 目录下的配置的.browse文件为 CSSFriendlyAdapters.browser，它配置为默认使用 CSS Friendly Control Adapters，当然你页可以将refID 改为 IE6to9, Gecko, Opera8to9 等等。
运行了例子，了解了文件的组织和意义，现在该是创建自己的网站的时候。如何修改CSS改变控件的外观?
让我们从menu讲起，首先我们修改下当鼠标移动到菜单上的颜色，在VS中，打开 App_Themes\Basic\MenuExample.css.文件：
CSS
.PrettyMenu ul.AspNet-Menu li:hover,
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover
{
background:#4682B3;
}
将该颜色改成其它的值如 #27408B。保存，然后刷新菜单控件例子页面：
还需要改变的是 .skin 文件，当浏览器不使用转换件的时候，控件默认会用该文件，打开 App_Themes\Basic\Basic.skin 文件，修改菜单的 DynamicHoverStyle 中的颜色值：
=== 使用CSS转换件的空页面 ===
<%@ Page Language="C# or VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link runat="server" rel="stylesheet" href="~/CSS/Import.css" type="text/css" id="AdaptersInvariantImportCSS" />
<!--[if lt IE 7]>
<link runat="server" rel="stylesheet" href="~/CSS/BrowserSpecific/IEMenu6.css" type="text/css" id="IEMenu6CSS" />
<![endif]-->
</head>
<body>
<form id="form1" runat="server">
<!-- adapted control(s) here-->
</form>
</body>
</html>
Import.css 是 Theme无关的CSS，表示的是CSS转换件的 behavioral 规则。
IEMenu6.css 是一个有条件的连接选项，当使用以前版本的IE浏览器需要。
=== 打造Pure CSS 菜单页面 ===
ASP.NET
<script runat="server">
Public Sub OnClick(ByVal sender As Object, ByVal e As MenuEventArgs)
MessageLabel.Text = "You selected " & e.Item.Text & "."
e.Item.Selected = True
End Sub
</script>
<asp:Menu ID="EntertainmentMenu" runat="server" Orientation="Horizontal" onmenuitemclick="OnClick" CssSelectorClass="SimpleEntertainmentMenu">
<Items>
<asp:MenuItem Text="Music">
<asp:MenuItem Text="Classical" />
<asp:MenuItem Text="Rock">
<asp:MenuItem Text="Electric" />
<asp:MenuItem Text="Acoustical" />
</asp:MenuItem>
<asp:MenuItem Text="Jazz" />
</asp:MenuItem>
<asp:MenuItem Text="Movies" Selectable="false">
<asp:MenuItem Text="Action" />
<asp:MenuItem Text="Drama" />
<asp:MenuItem Text="Musical" />
</asp:MenuItem>
</Items>
</asp:Menu>
CSS
.SimpleEntertainmentMenu .AspNet-Menu-Selected
{
border: solid 1px #00ff00 !important;
}
.SimpleEntertainmentMenu .AspNet-Menu-ChildSelected
{
border: solid 1px #ff0000 !important;
}
.SimpleEntertainmentMenu .AspNet-Menu-ParentSelected
{
border: solid 1px #0000ff !important;
}
