利用CSS Friendly Control Adapters将ASP.NET控件转为符合WEB标准标签控件

  利用 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”按钮,下载ASPNETCssFriendlyAdapter

  该文件是一个Visual Studio Content Installer 安装包,需要Visual Web Developer or Visual Studio 2005方能运行解包。安装后将在你的Visual Studio中添加几个新的Web Site 模版。

The Visual Studio Content Installer

== 使用 ==
  进入 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的功能。

Create the new site using the CSS Adapter Template

  创建新站点后,你可以看看里面的readme.txt 文件,了解下注意事项。

Be sure to read the readme.txt file

== 运行 ==

Main navigation menu for the kit

  所有的adapted controls的例子放在页顶部的Exmaples菜单下面的,第一个就是被转换的<asp:menu>菜单控件例子:用嵌套的<ul>标签代替了不规范的<table>标签。

Navigating to the Menu sample

点击进入菜单控件例子页面,你能更清晰的看到转换前后有什么不同:

Layout of the kit's sample pages

每一个例子都可以通过设置在是否使用转化接头(Adapters)之间切换:

Enable/disable adapters

另外可以通过Theme Chooser在两个不同样式Theme(Basic, Enhanced)之间切换,样式文件在App_Themes中:

The Theme Chooser

要联机查看每个例子的源程序,可以通过点击“view source code”按钮:

Layout of the source code viewer page

== 文件的组织 ==

* 页面文件放在站点的根目录下面。
* 专用代码放在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 文件。

Folders and files in the App_Themes folders

本 教程站点在 App_Browsers 目录下的配置的.browse文件为 CSSFriendlyAdapters.browser,它配置为默认使用 CSS Friendly Control Adapters,当然你页可以将refID 改为 IE6to9, Gecko, Opera8to9 等等。

The kit's .browser file

运行了例子,了解了文件的组织和意义,现在该是创建自己的网站的时候。如何修改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。保存,然后刷新菜单控件例子页面:

The menu sample with the original and new background hover color

还需要改变的是 .skin 文件,当浏览器不使用转换件的时候,控件默认会用该文件,打开 App_Themes\Basic\Basic.skin 文件,修改菜单的 DynamicHoverStyle 中的颜色值:

The Basic.skin file

=== 使用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;
}



翻译自:http://www.asp.net/cssadapters/WalkThru/WalkThrough.aspx

4 Comments

发表评论

  • 韩国时尚购物起义
    2016-04-30

    从来没有人像我们一样的服务。
    韩国时尚购物起义 http://cn.joamom.com

  • 请求支援
    2009-12-22

    博主你好。我用visual studio 2008 是否需要安装这个呢。

  • 毛毛虫
    2009-06-11

    一直没有安装成功