分离Form、Function和Style

运用VS.NET对XML技术的支持来使你的Web应用程序更通用、更容易修改。
by Don Kiely
技术工具箱：VB.NET、C#、ASP.NET、XML

Web开发人员现在已经可以用工具将网页的内容、结构和格式分离开了，因此你可以更有效地运用分离开的每个部分，很容易地插入新的功能和变化。XML可以保存内容，并提供方法用Extensible Stylesheet Language Transformations（XSLT）将内容转换成各种形式的HTML。Cascading Style Sheets（CSS）可以使页面更加漂亮。

图1. 将XML转换成格式化的XHTML

Visual Studio .NET IDE对用这些技术创建和修改内容提供了内置的支持，而且它可以使这些技术协同工作。我将讲述VS.NET的这种支持性并说明如何将样式整合到你的应用程序中。我想你对每种技术已经有了基本的了解了（这些技术学习起来并不难），而且也知道如何应用它们了（见工具条“用XML减轻我们的担忧”）。我将重点讲述在用XSLT进行转换后，用CSS来显示XML时所用的工具。

我将通过从两个源文件对XML内容进行简单的转换来说明如何将CSS运用到一个ASP.NET应用程序中。第一个文件是一个有关匹萨饼客户信息的磁盘文件（见列表1）。第二个文件是每个客户对匹萨饼订单的历史记录（见列表2）。XSLT给灵活的Web应用程序提供的一个重要的技术就是可以将多个XML数据源结合到一个单独的输出流中。XSLT用XSLT document()函数来结合这两个文件（见列表3）。

Document()函数将第二个XML数据集的内容作为一个节点集来返回——本质上，作为XML数据结构的一个分枝。<xsl:variable>元素的select属性加载XML数据并用一个XPath查询来过滤节点集：

<xsl:variable name="CustomerLookup"
   select="document('Pizza 
      Customers.xml')
      /Customers/Customer[@CustomerID=
      current()/@CustomerID]"/>

IE显示转换的结果（见图1）。

可下载的样例程序的XMLCSSXSLT.aspx页面在head部分用了一个<link>元素来告诉用户代理（浏览器）它应该用Styles.css文件来安排显示格式。在所有的服务器端处理都完成后，样式是被用户代理应用的——而不是在服务器端。

你必须了解这种网页的形成过程，以便可以更有效地运用内容、结构和格式的分离。首先，用户对一个页面进行HTTP请求。然后，ASP.NET加载并处理ASPX文件，将服务器控件转换成Extensible HTML(XHTML)并运行服务器端代码。接下来，浏览器接收XHTML。如果页面运用了一个<link>元素，浏览器就从服务器请求样式表文件。

接下来的步骤取决于页面运用的样式类型。如果它用了一个外部样式表（external stylesheet)，浏览器就查看每个元素，看它是否符合外部样式表的规定。如果它用的是页面样式（page style），浏览器就查看每个元素是否符合样式表规则。XHTML中的内联规则可以覆盖一个外部样式表中的任何相冲突的规则。如果页面运用内联样式（inline style），浏览器就用样式属性中的信息来呈现元素。

ASP.NET XML Web服务器控件提供了一个容易的方法来转换XML并显示结果。你可以用这个控件的简单的接口来加载并解析XML源文件和XSLT模板，然后显示结果。你可以在运行时通过程序来实现所有功能，或在设计时设置属性。样例程序中，我们将XML源文件（Pizza Orders.xml)分配给DocumentSource属性，并将XSLT文件分配给TransformSource属性。XSLT转换不会比这种方法更容易了。

输出到浏览器
在XML服务器控件将XML源文件转换成HTML后，IIS就将输出流发送到浏览器。然而，浏览器不处理页面的内容，因为页面包含一个连接CSS样式表的<link>元素。下面是来自ASPX页面的CSS样式表声明：

<link id="linkStyles" 
   href="Styles/Styles.css"
   type="text/css" rel="stylesheet" 
   runat="server" />

ASP.NET的一个很好的功能之一就是你可以很快地修改页面的行为。前面代码中的<link>元素包含runat=“server”属性。这就使服务器端代码可以改变用来呈现XHTML的样式表，很快地改变<link>元素的href属性。下面的代码包含在一个Select Case语句中，可以让用户对单选按钮进行选择：

linkStyles.Attributes.Item("href") = _
   "Styles/Customized.css"

在动态地改变一个页面的显示结果方面，这是一个很好的技术——在本例中，它就会对用户的选择作出响应。（在样例程序中它会导致一个postback，但如果你想让处理继续停留在客户端，也有方法来解决这个问题。）

VS.NET包括多种创建CSS样式并将其与XHTML代码结合起来的工具（见表1）。你可以在整个IDE中通过右击鼠标在许多弹出菜单和各种菜单项中找到它们。如果你编写HTML源文件，你当然可以直接在VS.NET HTML编辑器中添加CSS功能。

图2. 编辑外部样式表

大多数情况下，我们用外部样式表来创建Web应用程序，因为这样的话，你就可以在一个集中的地方定义样式，将它们运用到任何地方，使网站的所有的页面保持一致。VS.NET提供了一个很好的起点，它将一个Styles.css文件添加到每个新的、规则的VB.NET企业Web应用程序中了。（同等的C#应用程序没有包含Styles.css，但你可以修改模板来包含它。）

虽然VB.NET项目包含Styles.css，你仍需要用<link>元素在每页明确地添加声明。如果你发现在每个新的项目都需要这么做，你可以在c:\Program Files\Microsoft Visual Studio .NET的子目录下修改ASPX和Styles.css模板。你对这些模板所做的任何修改都会应用到你创建的每个新项目中。

VS.NET包含一个很好的外部CSS样式表编辑器，每当你加载一个CSS文件到IDE中时，它就会打开（见图2）。编辑器可以使我们很容易地选择和编辑每个单独的样式。右击左边方框或右边方框中的样式定义可以让你加载Style Builder工具（见图3）。

图3. 用可视化方法创建样式

用Add Style Rule对话框可以很容易地创建一个新的样式。它可以让你选择一个HTML元素并将它全局性地用于页面的所有元素的实例，或者选择一个类名并将它用于多个元素类型，或者选择一个元素ID用于样式。该工具的一个常被忽视的功能就是，它可以选择多个项——例如，将一个样式用于Emphasis类的所有<p>元素，或只用于<li>元素（它们是<ul>的子元素，<ul>是<p>元素的子元素）。

你可能需要将你创建的样式明确地用于各种元素——这种需求主要针对行内元素（inline elements)。VS.NET提供了几个对象属性来应用样式（见表2）。运用这些属性的一个不利方面就是，VS.NET Properties窗口没有显示一个可以让你选择样式或类的列表，而且它也不包含一个激活Style Builder的链接，所以你必须手动地输入样式或类。

将CSS样式表用于XML和XSLT转换是使你的Web应用程序灵活、动态和实用的关键。通过运用VS.NET已有的工具，我们就可以将CSS结合到应用程序中。如果你花时间进行适当的设计来实现所有的功能，那么所有这些技术就可以让你在很多设备上运用Web应用程序了。

关于作者:
Don Kiely是Information Insights的高级信息架构师，是阿拉斯加州Fairbanks的商业和技术顾问。在他不进行ASP.NET和XML方面的研究时，他喜欢带着他的狗Mardy去阿拉斯加荒地探险、徒步旅行、坐着皮筏在激流中漂流、滑雪和进行寻宝活动。他的联系方式是donkiely@computer.org。