使用ASP.NET开发遵循HTML/XHTML+CSS规范的的Web应用

系统从外到内可以分为：

• Web应用层

作用：从.NET Framework得到客户端的Http请求，并向.NET Framework输出页面的HTML代码
内容：ASP.NET窗体、ASP.NET用户控件（UserControl）以及其他页面所需要的资源

• 控件层

作用：为应用层提供通用的界面控件，管理其内部控件并对外输出其自身的HTML代码
内容：ASP.NET Web自定义控件

• 业务层

作用：向界面层（Web应用及控件）提供业务接口，直接或间接与数据库交互传递数据
内容：数据访问类或OR Mapping实现

本文探讨Web应用层的实现，主要目标包括：

1. 提供模板页布局支持
2. 对页面输出的HTML代码进行优化，做到数据和外观分离——也就是遵循基于HTML/XHTML+CSS的网页规范

因此， 本文不涉及业务层的实现方法。

对于第1点，目前成熟的MasterPage模板页控件能够满足这方面的需求。同时，我们还可以对其做进一步扩展： 在一个Web应用中建立多套模板页布局，通过配置文件实现选择性使用。
实现方法——

1. 派生MasterPage控件
2. 重写其TemplateFile属性的get方法，根据配置文件中指定的目录名称动态生成控件访问模板页文件的路径

对于第2点，首先要指出：ASP.NET控件模型以及已有的第三方控件在HTML/XHTML+CSS规范方面做得很差。
凡是功能比较完善的控件（比如Infragistics），为了使界面样式美观，在输出的HTML代码中混合了大量的外观样式。这直接导致了生成的页面体积庞大，数据不宜抽取（对搜索引擎不友好）。
在通常情况下，由于控件的外观是由使用控件的开发人员在设计时指定，Web设计人员无法控制其最终的输出效果，并且很难保证不同开发人员使用的控件保持一致的外观界面。
基于这些原因，使我在目前的项目中放弃使用这些功能强大的第三方控件，而由开发人员自行开发所需的界面控件——这些控件在界面实现的底层做到 数据和 外观分离。
比如：当界面需要输出一个搜索结果列表，现有的做法是使用DataList或DataGrid控件，根据需要定义记录行/列的模板内容及其样式。这样在客户端便得到了类似这样的HTML代码（假设数据由3条含有3个字段的记录组成，并省略服务器端控件生成的id属性）：

< table  width ="..."  cellpadding ="..."  cellspacing ="..."  border ="..." >
   < tr >
     < td  style ="background-color:#XXXXXX;" >< a  href ="..." > 产品名称1 </ a ></ td >< td  style ="background-color:#XXXXXX;" > 价格1 </ td >
   </ tr >
   < tr >
     < td  colspan ="2"  style ="background-color:#XXXXXX;" > 简介1 </ td >
   </ tr >
</ table >
< table  width ="..."  cellpadding ="..."  cellspacing ="..."  border ="..." >
   < tr >
     < td  style ="background-color:#XXXXXX;" >< a  href ="..." > 产品名称2 </ a ></ td >< td  style ="background-color:#XXXXXX;" > 价格2 </ td >
   </ tr >
   < tr >
     < td  colspan ="2"  style ="background-color:#XXXXXX;" > 简介2 </ td >
   </ tr >
</ table >
< table  width ="..."  cellpadding ="..."  cellspacing ="..."  border ="..." >
   < tr >
     < td  style ="background-color:#XXXXXX;" >< a  href ="..." > 产品名称3 </ a ></ td >< td  style ="background-color:#XXXXXX;" > 价格3 </ td >
   </ tr >
   < tr >
     < td  colspan ="2"  style ="background-color:#XXXXXX;" > 简介3 </ td >
   </ tr >
</ table >

当我们遵循HTML/XHTML+CSS规范自行开发开发界面控件，同样的数据，所得到的结果就会变成：

< dl >
   < dt >< a  class ="name"  href ="..." > 产品名称1 </ a >< span  class ="price" > 价格1 </ span ></ dt >
   < dd >< p > 简介1 </ p ></ dd >
   < dt >< a  class ="name"  href ="..." > 产品名称2 </ a >< span  class ="price" > 价格2 </ span ></ dt >
   < dd >< p > 简介2 </ p ></ dd >
   < dt >< a  class ="name"  href ="..." > 产品名称3 </ a >< span  class ="price" > 价格3 </ span ></ dt >
   < dd >< p > 简介3 </ p ></ dd >
</ dl >

而这些数据所呈现的外观，已经由web设计人员使用css样式表做了定义，上面的代码中所指定的元素tag以及class属性，都是已经定义好的。 控件开发人员必须按照这些约定输出HTML代码。