生成 ContentRotator ASP.NET 服务器控件

本页内容

	简介
	考虑内容滚动
	指定内容项
	确定要显示的内容项
	提供动态内容
	自定义所选的内容项
	小结
	特别鸣谢。 . .
	关于作者

简介

早在九十年代末期，似乎没有什么事情是不可能发生的。World Wide Web 及其对商业的影响急剧增加 — 孩子们退学建立 Web 站点而一夜暴富，企业也斥资数百万美元在黄金电视时段播放广告，吸引人们上网为宠物购买食物。没错，这就是新经济时代，相比于在令人乏味的建筑物中销售单调的旧产品而言，将数百万的 Web 网民吸引到 Web 站点来的确更有经济价值。

在这个浮华的时代，Microsoft 引入了 传统 ASP 的 AdRotator COM 组件，它使崭露头角的 Web 企业家能够将标语广告轻松添加到他们的站点中。显示标语广告的第一步是具有一个列出可以显示的标语的 advertisements 文件。该文本文件包含有关每个标语的四类信息：

使用该文本文件时，ASP 开发人员必需调用 AdRotator 的 GetAdvertisement(advertisementFile) 方法，从而传入到 advertisements 文件的路径，而 AdRotator 将返回 HTML 标记，用于显示从指定文件随机选择的标语广告。我想，这时候已经财源滚滚了。

2002 年交付 ASP.NET 时，新经济时代已经成为过去。NASDAQ 指数在 2000 年曾经攀升至 5,000 点左右，而现在已跌到 2,000 点以下。尽管 .com 彻底垮台，但 Microsoft 依旧对在线广告持乐观态度，缘由是他们已修整了 传统 ASP 的 AdRotator 控件并进行了发布 — 作为一个标准 Web 控件与 ASP.NET 一起提供。AdRotator 的 ASP.NET 版本较之传统的 ASP 版本有以下几个优势：

虽然 AdRotator 能更容易地随机显示来自预定义列表的标语，但是它存在很多缺点，在我看来，其中有两个主要的缺点：

第二个缺点特别让我感到烦恼，因为只需再进行少量工作就可以使 AdRotator 成为一个非常通用的内容滚动器，而不仅仅设计为只显示广告。在本文中，我们将通过创建一个全功能的 ContentRotator 服务器控件来克服该缺点以及其他缺点。

返回页首

考虑内容滚动

在深入研究任何编码项目之前，重要的是用充足的时间回答以下三个问题。

在经过谨慎考虑之后，我最终准备开始编写代码 — 这是一个有趣的环节。在下文中，我将介绍 ContentRotator 控件的一些更有趣的代码，这些代码不仅可以揭示该特定控件的内部工作，还提供一个示例，用于在创建的服务器控件中实现相似的功能。

返回页首

指定内容项

ContentRotator 控件提供三种用于指定内容项的方式：

第一个选项使用一个外部文件提供对内容项更好的重用，因为单个内容文件可以通过单个 Web 站点中不同页上的许多内容滚动器使用。但是，有时您可能想快速创建简单的 ContentRotator 控件，而不必烦恼于创建单独的内容文件。在这些情况下，您可以使用第二个选项，并提供内容项来迭代通过该控件的声明性语法。最后一个选项允许您以编程方式指定内容项。如果需要动态选择可能的内容项，或者这些内容项存在于一个数据库或其他某个非静态存储中，则该选项是有用的。

通过内容文件指定内容

当在 XML 格式化内容文件中指定内容项时，必须针对具体的 XML 架构提供内容项。特别是，内容文件必须以 元素开头，该元素包含每个内容项的 元素。每个 项有三个可选属性：

元素也可以包含提供要显示的静态标记的文本。如果未提供 contentPath 属性，则显示该静态标记。

以下示例显示一个带有四个内容项的、正确进行格式化的内容文件。第一个内容项缺少任何可选属性，只由要显示的文本内容组成。第二个内容项提供 impressions 和 keyword 属性，而第三个内容项只设置 keyword 属性。请注意，如果您想在内容项的文本部分显示 HTML 标记，则需要像在第二个示例中一样转义 XML 标记，方法是使用 < 和 > 而不是 < 和 >，或者需要将整个内容包装在一个 部分中。第四个（最后一个）内容项引用一个 User Control (RichContent.ascx)，该控件通过 contentPath 属性指定。此外，impressions 属性设置为 5。

<?xml version="1.0" encoding="utf-8" ?> 
<contents>
   <content>
      Things are just average... neither positive nor negative...
   </content>
   <content impressions="3" keyword="positiveComments">
      <b>You will soon see a workplace promotion.</b>
   </content>
   <content keyword="positiveComments">
      <![CDATA[
      Happiness is <i>just around the corner!</i>
      ]]>
   </content>
   <content contentPath="~/RichContent.ascx" impressions="5" />
</contents>

该内容文件需要保存在 Web 服务器的文件系统中。要显示特定文件的内容，只需将 ContentRotator 添加到 ASP.NET 页，并将它的 ContentFile 属性设置为内容文件的虚拟路径。

注要记住，XML 是区分大小写的，因此 XML 元素的大小写是重要的。如果您没有使用正确的大小写（例如，使用 而非 ），则不会从内容文件检索这些内容项，从而得到一个不发出任何内容项的 ContentRotator 控件。

声明性地指定内容项

许多 ASP.NET Web 内置控件允许其大多数属性用 Web 控件的声明性语法来指定。例如，您可以指定通过 声明性语法创建 DataGrid 的特定 DataGridColumn。ContentRotator 提供类似的声明性语法来指定它的内容项。对于 ContentRotator 要随机显示的每个项，请在 标记中添加一个 元素。每个 元素可以包含以下属性：

这些属性分别映射到 元素的文本部分，以及 XML 内容文件架构的 impressions、keyword 和 contentPath 属性。（您可以选择将 Content 属性指定为该内部标记的文本内容，如下面的前两个 实例所示。）下面显示用于 ContentRotator 的声明性语法，其中带有前面使用的四个内容项。

<skm:ContentRotator id="ContentRotator1" runat="server">
   <skm:ContentItem>Things are just average... neither positive nor 
negative...</skm:ContentItem>
   <skm:ContentItem Impressions="3" Keyword="positiveComments"><b>You will soon see a workplace promotion 
</b></skm:ContentItem>
   <skm:ContentItem Content="Happiness is <i>just around the 
corner!</i>" Keyword="positiveComments"></skm:ContentItem>
   <skm:ContentItem ContentPath="~/RichContent.ascx" Impressions="5"></skm:ContentItem>
</skm:ContentRotator> 

请注意，使用该声明性语法时，您无需使用 Content 属性来转义 HTML 字符。

以编程方式指定内容

为了协助内容和内容项的概念，ContentRotator 包含两个类：

ContentRotator 控件包含类型 ContentItemCollection 的一个 Items 属性。您可以通过将 ContentItem 实例添加到 Items Items 属性，以编程方式指定，当随机选择项时 ContentRotator 应该考虑的内容项。和其他 ASP.NET 服务器控件一样，添加到 Items 属性的内容存储在该控件的视图状态中，因此，您只需在第一次页访问时添加这些项，而不是在随后的回调中进行添加。下面的代码片段显示了如何以编程方式添加前面两个示例中使用的内容项集合：

private void Page_Load(object sender, System.EventArgs e)
{
   if (!Page.IsPostBack)
   {
      // only need to load content items on first page visit – 
they are persisted across
      // postbacks in the ViewState...

      ContentRotator1.Items.Add(new ContentItem("Things are just 
average... neither positive nor negative..."));

      ContentRotator1.Items.Add(new ContentItem(" You will 
soon see a workplace promotion ", string.Empty, "positiveComments", 3));

      ContentItem thirdCI = new ContentItem();
      thirdCI.Content = "Happiness is just around the 
corner!";
      thirdCI.Keyword = "positiveComments";
      ContentRotator1.Items.Add(thirdCI);
      
      // Add dynamic content
      ContentRotator1.Items.Add(new ContentItem(string.Empty, 
"~/RichContent1.ascx", string.Empty, 5));
   }
}

如您所见，ContentItem 类有大量构造函数重载，它们可以将创建新 ContentItem 实例并设置其属性的代码减至一行。

如果您不想阅读代码详细信息，而直接开始在 ASP.NET 应用程序中使用 ContentRotator，则您可以跳过下文并从本文顶部的链接下载控件。该下载包括 ContentRotator 控件（以 C# 编写）的完整源代码，以及一个示例 ASP.NET Web 应用程序（也以 C# 编写），该程序显示针对上面所讨论用例的解决方案。此外，该下载还包括一个外观漂亮、经编译的帮助文件，用来帮助决定使用 ContentRotator 控件的页面开发人员。

返回页首

确定要显示的内容项

每次访问带有 ContentRotator 控件的页时，ContentRotator 必须决定要随机显示什么内容。每个内容项有一个相关的 impressions 值，该值影响到该内容项相对于其他内容项被选中的可能性。该 impressions 参数是一个正整数值，在不指定的情况下，默认值为 1。此外，每个内容项可以有一个可选的关键字 参数。如果指定 ContentRotator 控件的 KeywordFilter 属性，则将用于显示的内容项集合限制为那些具有匹配关键字 值的内容项。

用于随机选择内容项的算法的工作方式为：将每个可应用的内容项以端对端方式进行布局，从而形成一行。每个内容项的长度是它的 impressions 值，这意味着该行的整体长度是可应用的内容项 impressions 的总和。接下来，选择一个小于总长度的随机数，而要显示的内容项是位于随机数位置的内容项。图 1 以图形方式阐释该算法。

图 1.

为了应用此算法，ContentRotator 控件首先需要检索要考虑的内容项列表。想必您还记得，该列表可能作为 XML 文件驻留在磁盘上，它可以用 ContentRotator 的声明性语法指定，或者以编程方式提供。让我们看看如何使用这三种技术访问该内容项列表。

从内容文件读取内容数据

ContentRotator 有一个 ContentItemCollection 类型的 Items 属性，它包含由 ContentRotator 控件考虑的可应用内容项集。（相信您还记得，该可应用内容项集依赖于是否设置了该控件的 KeywordFilter 属性，如果设置了该属性，还取决于内容项的关键字参数。）Items 属性通过调用 GetFileData(virtualFilePath) 方法，在 Load 事件中进行填充。该方法返回一个 ContentItemCollection 实例，它包含由 virtualFilePath 参数指定的内容文件中的所有 内容项。

在每次访问页面时打开、读取并解析整个内容文件将是无效和不必要的，特别是在考虑到该文件可能很少进行更改的情况下。要提高性能，需要使用一个文件依赖项缓存该内容文件中的项。这意味着该内容文件中的项将驻留在用于提高性能的缓存中，但是当基础内容文件修改时，该缓存项将自动失效。以下 GetFileData(filePath) 方法的代码阐释该缓存行为：

// See if the item exists in the cache
string cacheKey = string.Concat("ContentRotateCacheKey:", 
physicalFilePath);

ContentItemCollection cachedContent = (ContentItemCollection) 
HttpContext.Current.Cache[cacheKey];
if (cachedContent == null)
{
   // it's *not* in the cache, must manually get the file data and cache it
   cachedContent = LoadFile(physicalFilePath);
   if (cachedContent == null)
      return null;
   else
      // Add the content to the cache
      HttpContext.Current.Cache.Insert(cacheKey, cachedContent, 
new CacheDependency(physicalFilePath));
}

// return the cached content
return cachedContent;

变量 physicalFilePath 包含到该内容文件的物理路径，并用于形成缓存键。这确保了每个不同的内容文件都将有其自己的缓存项。接下来，访问 Cache 对象，从而检索名为 cacheKey 的缓存项的值。如果该项是 null（由于该缓存中没有插入此类项，或者缓存项已失效），则来自内容文件的内容和基于内容文件的缓存依赖项一起加载并插入到该缓存中。

LoadFile(physicalFilePath) 方法使用 XPathNodeIterator 迭代通过内容文件，从而清除多种属性和文本内容，并为该内容文件中的每一项生成一个 ContentItem 实例。每个 ContentItem 实例添加到 ContentItemCollection，它在该方法的结果中返回。以下代码显示了迭代通过内容文件中每一项的过程；fStream 是该内容文件的一个打开的文件流。

// Use an XPathNavigator to iterate through the XML elements in the ContentFile
reader = new XmlTextReader(fStream);
XPathDocument xpDoc = new XPathDocument(reader);
XPathNavigator xpNav = xpDoc.CreateNavigator();

XPathNodeIterator xmlItems = xpNav.Select("/contents/content");

XPathExpression contentExpr = xpNav.Compile("string(text())");
XPathExpression contentPathExpr = xpNav.Compile("string(@contentPath)");
XPathExpression keywordExpr = xpNav.Compile("string(@keyword)");
XPathExpression impressionsExpr = xpNav.Compile("string(@impressions)");

if (xmlItems == null)
   throw new FormatException("ContentFile in invalid format.");
else
{
   while (xmlItems.MoveNext())
   {
      string content = (string) xmlItems.Current.Evaluate(contentExpr);
      string contentPath = (string) xmlItems.Current.Evaluate(contentPathExpr);
      string keyword = (string) xmlItems.Current.Evaluate(keywordExpr);
      string impressionsStr = (string) xmlItems.Current.Evaluate(impressionsExpr);

      int impressions = 1;      // default impressions value is 1
      if (impressionsStr != null && impressionsStr.Length > 0)
         impressions = Convert.ToInt32(impressionsStr, 
CultureInfo.InvariantCulture);

      contentItems.Add(new ContentItem(content.Trim(), 
contentPath, keyword, impressions));
   }
}

XPathNodeIterator 逐行通过每个 元素，从而应用一个 XPathExpression 来挑选每个属性和文本内容。当迭代每个 项之后，创建 ContentItem 实例，并为它的属性分配来自 XPathExpression 的值。每个 ContentItem 实例添加到 ContentItemCollection 实例，该实例稍后从 LoadFile(physicalFilePath) 方法返回。

以编程方式读取内容数据

为了以编程方式将项添加到任何类型的 Web 控件，您需要执行以下三个步骤：

要实际查看这些步骤，请考虑内置的 ASP.NET DropDownList Web 控件，该控件包含组成 DropDownList 的可用选择的项集合。每一项都由 ListItem 类的实例表示（步骤 1）。ListItemCollection 类提供强类型的 ListItem 实例集合（步骤 2），而且 DropDownList 类具有类型 ListItemCollection 的一个 Items 属性（步骤 3）。利用 ASP.NET 页的源代码片段，DropDownList 可以通过以下语法使 ListItem 实例以编程方式添加到其中：

DropDownList1.Items.Add(new ListItem(text, value));

为了使用 ContentRotator 实现类似的功能，我创建了 ContentItem 类来表示一个特定的内容项。如前所述，该类具有特定于内容项的属性，例如，Content 和 Impressions，等等。接下来，我创建了一个 ContentItemCollection 类，它提供 ContentItem 实例的强类型集合。最后，我在 ContentRotator 类中创建了一个 ContentitemCollection 类型的 Items 属性。

当创建了这些类和属性之后，页面开发人员能够以编程方式将内容添加到 ContentRotator 中，其语法与 DropDownList 的语法不同：

ContentRotator1.Items.Add(new ContentItem(content));
ContentRotator1.Items.Add(new ContentItem(content, contentPath, 
keyword, impressions));
...

从该控件的声明性语法读取内容

除了能够以编程方式指定项之外，很多 Web 控件也可以使页面开发人员能够通过该控件的声明性语法指定项集。例如，通过 DropDownList，能够以声明方式说明 ListItem，如下所示：

<asp:DropDownList runat="server" ...>
  <asp:ListItem Value="value1">text1</asp:ListItem>
  <asp:ListItem Value="value2" Text="text2"></asp:ListItem>
  ...
  <asp:ListItem Value="valueN">textN</asp:ListItem>
</asp:DropDownList>

将该功能添加到 ContentRotator 非常简单，这是因为我们已经定义了 ContentItem 类，而且还具有用于 ContentRotator 控件的 Items 属性。我们只需使用两个属性，以便指示用声明性语法指定的项映射到该 ContentRotator 的 Items 属性。

首先，在类级别添加 ParseChildren() 属性，从而指示应该解析该子标记，而且它映射到 Items 属性：

[ParseChildren(true, "Items")]
public class ContentRotator : Control
{
   ...
}

最后，将 PersistenceMode() 属性添加到 Items 属性声明，从而指示该 Items 属性将作为内部默认属性保留。

[PersistenceMode(PersistenceMode.InnerDefaultProperty]
public ContentItemCollection Items
{
   get { ... }
}

这就是所有的步骤。通过这两个属性，页面开发人员能够用该控件的声明性语法指定内容项，如下所示：

<skm:ContentRotator runat="server" ...>
  <skm:ContentItem Content="content" ContentPath="contentPath" 
Keyword="keyword" Impressions="impressions"></skm:ContentItem>
  ...
</skm:ContentRotator>

需要注意的是，对于我们当前的代码，ContentItem 实例的所有属性必须作为 元素的属性指定。理想情况下，页面开发人员将能够指定静态内容，方法是利用 Content 属性或 和 标记之间的文本内容。为此，我们需要将一小段代码添加到 ContentItem 类，从而指示该类应该解析内部文本内容。

特别是，ContentItem 类需要实现 IParserAccessor 接口，该接口定义一个简单的方法 AddParsedSubObject(object)。AddParsedSubObject(object) 方法以声明性语法传入 元素的内容。如果内部内容是纯文本，则传入 LiteralControl 实例。在本例中，我们想将 LiteralControl 的 Text 属性分配给 ContentItem 实例的 Content 属性。这是通过以下代码实现的：

public class ContentItem : IParserAccessor
{
   ...

   public void AddParsedSubObject(object obj)
   {
      if (obj is LiteralControl)
         Content = ((LiteralControl) obj).Text;
      else
         throw new HttpException(...);
   }
   #endregion
}

选择一个随机内容项

当在 Load 事件中检索 ContentRotator 的 Items 属性之后，调用 SelectContentFromItems() 方法。该方法返回从 Items 集合随机选择的 ContentItem 实例。如果设置了 ContentRotator 的 KeywordFilter 属性，它将从集合中移除不可用的项。然后，它为剩余的项确定 impressions 参数的总数，并在 0 和 impressions 总数减去 1 所得的数之间随机选择一个数。基于该随机数选择并返回适当的内容项。

以下代码显示如何移除不可用项以及如何计算 impressions 的总数（在设置了 KeywordFilter 属性的情况下）。接下来，选择一个随机 impressions，并返回适当的 ContentItem 实例。

// Determine the sum of the Impressions
int totalWeight = 0, i = 0;
string controlsKeywordFilter = this.KeywordFilter;
ContentItemCollection filteredArray = new ContentItemCollection();

for (i = 0; i < Items.Count; i++)
   // only add the content item to the list of filtered content 
// items if the KeywordFilter property hasn't been set or,
   // if it has, if the KeywordFilter matches the content item's
// keyword attribute.
   if (controlsKeywordFilter.Length == 0 || 
      CultureInfo.InvariantCulture.CompareInfo.Compare(Items[i].Keyword, controlsKeywordFilter, 
CompareOptions.IgnoreCase) == 0)
   {
      totalWeight += Items[i].Impressions;   // increment the totalWeight
      filteredArray.Add(Items[i]);
   }
      

// Randomly choose a number between 0 and totalWeight - 1
int randomWeight = random.Next(totalWeight);

totalWeight = 0;

// Now grab the appropriate ContentItem based on randomWeight
i = 0; 
while (i < filteredArray.Count && (totalWeight + 
filteredArray[i].Impressions) <= randomWeight)
   totalWeight += filteredArray[i++].Impressions;

return filteredArray[i];

返回页首

提供动态内容

确定了显示哪个内容项就成功了一半。我们也需要能够实际显示所选的内容项。这是在 SelectContentFromItems() 方法指定显示什么内容项之后，在 Load 事件中实现的。如果该项包含静态内容（即，如果它没有设置它的 ContentPath 属性），则会创建一个新 LiteralControl 实例，并将它添加到 ContentRotator 的控件层次结构，将其 Text 属性设置为要显示的静态内容的值。

但是，如果要显示的内容是动态的（即，设置了它的 ContentPath 属性，从而指定将提供动态内容的 User Control），则调用 Page 的 LoadControl(path) 方法加载特定 User Control 的控件层次结构。该控件层次结构的根通过 LoadControl() 方法返回，而且该控件添加到 ContentRotator 的控件层次结构。图 2 以图形方式阐释该过程。

图 2.

默认情况下，ContentRotator 将随机选择要在每次 访问页时显示的内容项，包括针对相同页的回调。如果您需要跨回调来显示相同的随机检索内容项，则只需简单地将 ContentRotator 的 NewContentOnPostbacks 设置为 false。如果您要使用需要回调的动态内容（例如，一个提示用户进行某些输入，并利用回调显示关于该输入的详细信息用户控件），然后您需要将 NewContentOnPostbacks 设置为 false。如果您使 NewContentOnPostbacks 保留其默认值 true，则当该用户从随机选择的 User Control 回调时，ContentRotator 可能选择一个不同的内容项，而这样会丢失回调数据。

实际上，无论加载的内容是静态的还是动态的，如果 NewContentOnPostbacks 属性设置为 true，ContentRotator 的控件层次结构都会禁用它的视图状态。这是因为回调时，ContentRotator 可能选择与上次访问页面时不同的内容项。如果本例中 ContentRotator 不禁用视图状态，则如果已经随机选择了一个不同的内容项，将在加载视图状态阶段引发一个异常。但是，如果 NewContentOnPostbacks 属性设置为 false，则维持 ContentRotator 控件层次结构的视图状态。

注有关使用 LoadControl() 方法以编程方式加载用户控件的更多信息，请一定要阅读我以前撰写的文章 An Extensive Examination of User Controls。关于视图状态和相关问题的信息位于 Understanding ASP.NET View State。

返回页首

自定义所选的内容项

ContentRotator 的功能要求之一是，允许页面开发人员在内容项中指定动态占位符。例如，页面开发人员应该能够创建带有内容文本“The current time is [[time]]”的内容项，并用当前系统时间动态取代 [[time]] 占位符。我得出两个方法来解决这个问题：

第一个选项是这两个中较容易实现的一个：我可以在 ContentRotator 控件的 Load 事件中进行检查，该事件可以使用相应的动态值系统地替换所选内容项中的所有预定义占位符。虽然该方法易于实现，但我想它不会提供页面开发人员所需的自定义级别。

因此，我将定义占位符并填充动态值的工作完全留给页面开发人员。页面开发人员可以制作他需要的任何占位符，从而在该内容文件中或通过声明性语法将它们添加到这些内容项的文本内容。我只需为页面开发人员提供映射到所选内容项的机制。为此，我使用 ContentRotator 公开一个 ContentCreated 事件。每次访问页面时，只要选择要显示的内容项，就会激发该事件。

页面开发人员可以创建一个用于该事件的事件处理程序。在该事件处理程序中，页面开发人员将接收所选的用于显示的 ContentItem 实例。此时，可以搜索该内容项的文本来获取要用其动态值替换的占位符。下面的示例阐明这一行为。ContentRotator 有三个通过声明性语法定义的内容项，其中两个带有动态占位符。

<skm:ContentRotator id="ContentRotator1" runat="server">
   <skm:ContentItem Content="The current time is 
[[time]]."></skm:ContentItem>
   <skm:ContentItem Content="Hello, World! Nothing dynamic 
here!"></skm:ContentItem>
   <skm:ContentItem Content="Welcome to page 
[[url]]."></skm:ContentItem>
</skm:ContentRotator> 

在 ASP.NET 页的代码隐藏类中，创建事件处理程序并将其绑定到 ContentRotator 的 ContentCreated 事件。该事件处理程序的第二个参数是类型 ContentCreatedEventArgs，该参数在其 ContentItem 属性中包含所选的 ContentItem 实例。如以下代码所示，该事件处理程序使用当前系统时间替换 [[time]] 的任何实例，并使用当前页的 URL 替换 [[url]] 的任何实例。

private void ContentRotator1_ContentCreated(object sender, 
skmContentRotator.ContentCreatedEventArgs e)
{
   // Replace [[time]] with DateTime.Now.TimeOfDay
   e.ContentItem.Content = e.ContentItem.Content.Replace("[[time]]", 
DateTime.Now.TimeOfDay.ToString());

   // Replace [[url]] with Request.RawUrl
   e.ContentItem.Content = e.ContentItem.Content.Replace("[[url]]", 
Request.RawUrl);
}

注占位符（在本例中是 [[time]] 和 [[url]]）由页面开发人员决定。即页面开发人员可以使用他选择作为占位符的任何名称和标记。例如，我们可以使用 *currentTime*（而不是 [[time]]）作为占位符，从而将 [[time]] 的所有实例替换为内容文件和事件处理程序中的 *currentTime*。

返回页首

小结

随着 .com 泡沫的衰退，诸如 Microsoft 的 Ad Rotator 一类的控件正逐渐过时。但是，Ad Rotator 的概念是很好的，而且在很多方案中，一般内容滚动控件证明是无价的。本文展示的 ContentRotator 控件应该适合这些情况中的大多数。ContentRotator 提供的语义和语法与 Ad Rotator 控件的相似，包括用于内容项的一个 impressions 值，关键字筛选，以及一个允许页面开发人员映射所选内容项的事件。此外，ContentRotator 允许以声明方式指定它的内容项，并允许静态和动态内容。

祝大家编程愉快！

返回页首

特别鸣谢。 . .

在我将文章提交给 MSDN 编辑之前，很多志愿者帮助校对了本文并针对本文的内容、语法和说明提供了反馈。在本文的校对过程中作出过主要贡献的人主要有 Julius Estrada、Hilton Giesenow、Milan Negovan、Carl Lambrecht 和 Jeffrey Palermo。校对人员这个团体正在不断扩增加，如果您想成为其中的一员，请通过 mitchell@4guysfromrolla.com 与我联系。

返回页首

关于作者

Scott Mitchell（出版过有关 Web 开发的六本书籍，并且是 4GuysFromRolla.com 的创立者）在过去七年中一直研究 Microsoft Web 技术。Scott 是一名独立的顾问、讲师和作家。您可以通过 mitchell@4guysfromrolla.com 或他的网络日记 http://ScottOnWriting.NET 与他联系。

转到原英文页面

返回页首

一些奇特的 JavaScript 功能

在北半球这里，夏天已经过去了。孩子们回到了学校。秋天临近的迹象使小组的成员感染到了这种新入学的情绪。我们什么时候会长大呢？！我们采访了 Jay，还有他的女儿，因此他们要伴随 Web Team Talking 走进秋天。您可以期待更多的精彩内容。

除了扔湿纸团、理新发型之外，本月我们研究了 MSN® Messenger、一些奇特的 JavaScript 功能、如何更新服务器上的 XML 数据，以及多得让您看不完的短篇集。

如果您愿意学习，请将有关 Web 的问题发送给我们，我们会立即对您的问题作答。

本页内容

	Instant Gratification
	将 XML 发送回服务器
	对日期进行排序
	Web Team 简介

Instant Gratification

亲爱的 Web Team：

我可以将 MSN Instant Messenger 嵌入在诸如 msn.com 这样的网站上吗？

谢谢，
Joshua Carroll

Web Team 的答复：

我们越来越需要一种比 Instant Gratification 更好的功能，在这一方面，MSN Messenger 最有说服力。http://www.msn.com 中的 IM 功能是使用提供 Messenger 功能的两个 Microsoft ActiveX ® 控件以及提供 DHTML 用户界面的一些脚本来实现的。为简短起见，假定我要在 Intranet 主页中添加一个小的提要栏，以便在用户登录后列出该用户的联系人（及其连接状态），并在用户未登录时提供登录按钮。下面提供了一个示例，但是为了表明我们不是得到了神（请注意小写字母“o”）的暗示才领悟到这一信息，我们先概述一下所涉及的技术。

由于没有关于这些控件的文档，因此我们需要做一些研究工作来实现我们的目标。首先，我们可以查看 msn.com 使用的代码以获得一些提示。这不是因为缺乏勇气，而是通过艰苦地研究这些代码，我们可以从大体上了解这两个控件的功能，以及我们可以怎样编写自己的代码。我们可以使用的第二个工具（并且是有用得多的工具）是 OLE View。OLE View 是 Microsoft Visual Studio_ 附带的一个实用工具，它的功能很强大，可以分析并显示 COM 对象的类型信息。

因此，我们启动 OLE View，找到前面提到的两个控件（其友好名称分别为 MSN Messenger Application 和 MSN Messenger Object），右键单击这两个控件，然后选择 View type information。该视图将显示对象使用的各个接口和枚举。标记为调度接口的任何接口都应该可用于基于脚本的调用方，因此我们开始着手编码了！

在确保控件正确实例化以后，代码需要做的第一件事情是确定用户是否联机。这是通过检查 Messenger Object 的 LocalState 属性来完成的。该属性从 MSTATE 枚举（其定义已部分包含在我们的代码中）返回一个值。如果用户未联机，我们将启用调用 Messenger Application 的 LaunchLogonUI 方法的登录按钮。如果用户已联机，则我们需要使用用户的所有联系人来填充 DIV。为此，我们循环访问默认列表 (List(0)) 中的每个联系人，并检索其 FriendlyName 以及描述其当前状态的 MSTATE 值，然后新建一个包含此信息的 DIV。

由于我们要允许用户通过单击列表中的任何联系人来向该联系人发送消息，因此需要以编程方式将 onclick 事件处理程序附加到新 DIV。该事件处理程序函数 (sendMessage) 基本上是 Messenger Application 的 LaunchIMUI 方法的包装。由于 LaunchIMUI 将目标联系人作为一个参数，因此我们需要能够确定 Messenger Object 的默认列表中的哪个联系人与被单击的 DIV 对应。这时最理想的是使用 expando 属性。我们将联系人在默认列表中的索引附加到新建的、表示该联系人的 DIV 元素。这样，onclick 处理程序就能够检索到此索引，然后从 Messenger Object 的列表中抽取正确的联系人并将其传递给 LaunchIMUI。

本示例包含的一项额外功能是在该页加载后处理注销和登录。这是通过处理由 Messenger Object 激发的 OnLocalStateChangeResult 事件来完成的。此事件在 LocalState 属性更改时激发（并不太意外）。因此，相应地，我们仅仅查看我们已脱机还是已联机。如果已脱机，需要清空联系人 UI 列表；如果已联机，需要在短暂的 setTimeout（确保一切都正确同步）之后调用 populateContacts。而且由于 ActiveX 控件依赖于独立 Messenger 的运行实例，因此我们的页面还将更新以响应它触发的事件。

至此，您可能已对我们的喋喋不休感到厌烦，那么，请看下面的代码。

<HTML>
<HEAD>
   <TITLE>Embedding MSN Messenger Test</TITLE>

   <OBJECT CLASSID="clsid:F3A614DC-ABE0-11d2-A441-00C04F795683" 
   CODEBASE="#Version=2,0,0,83"
      CODETYPE="application/x-oleobject" ID="oMsgrObj" WIDTH="0" 
      HEIGHT="0" OnUserStateChanged="alert();">
   </OBJECT>
   <OBJECT CLASSID="clsid:FB7199AB-79BF-11d2-8D94-0000F875C541" 
   CODETYPE="application/x-oleobject"
      ID="oMsgrApp" WIDTH="0" HEIGHT="0">
   </OBJECT>

   <STYLE>
   BODY
   {
      FONT-FAMILY: Verdana, Arial, Helvetica;
      FONT-SIZE: 8pt;
   }
   INPUT
   {
      FONT-FAMILY: Verdana, Arial, Helvetica;
      FONT-SIZE: 8pt;
   }
   .clsHeading
   {
      FONT-WEIGHT: bolder;
      FONT-SIZE: 10pt;
   }
   .clsContact
   {
      PADDING: 2px;
      CURSOR: hand;
   }
   </STYLE>
</HEAD>

<BODY onLoad="body_onLoad();">

<SCRIPT LANGUAGE="JScript">

// Here are the definitions for the Messenger enumerated values we use

var MSTATE_OFFLINE = 1;
var MSTATE_ONLINE = 2;
var MSTATE_BUSY = 10;
var MSTATE_BE_RIGHT_BACK = 14;
var MSTATE_IDLE = 18;
var MSTATE_AWAY = 34;

function body_onLoad()
{
   // First, we need to make sure that the Messenger controls got instantiated correctly

   if ("undefined" != typeof(oMsgrObj) && null != oMsgrObj.object && "undefined" 
   != typeof(oMsgrApp) && null != oMsgrApp.object)
   {
      // If so, let's check to see if we're online and (if so) populate our contacts UI

      if (oMsgrObj.LocalState == MSTATE_ONLINE)
      {
         populateContacts();
      }
      else if (oMsgrObj.LocalState == MSTATE_OFFLINE)
      {
         btnLogon.disabled = false;
      }
   }
   else
   {
      // Uh, oh - the controls didn't get instantiated correctly; 
      // the user probably needs to install Messenger

      alert("You need to install the latest version of MSN Messenger!
      \nGo to http://messenger.msn.com right now!");
   }
}

function populateContacts()
{
   var oList = oMsgrObj.List(0);
   var oContact;
   var i;

   // To populate our contact list, we're going to iterate throught the 
   // default list collection, check the state of each contact,
   // and add a DIV with the approppriate appearance to our UI

   for (i = 0; i < oList.Count; i++)
   {
      oContact = oList.Item(i);

      oNewElement = document.createElement("DIV");
      oNewElement.innerText = oContact.FriendlyName;

      switch (oContact.State)
      {
      case MSTATE_ONLINE:
         // Don't need to do anything
         break;
      case MSTATE_OFFLINE:
         oNewElement.innerText += " (Offline)";
         oNewElement.style.color = "graytext";
         break;
      case MSTATE_BUSY:
         oNewElement.innerText += " (Busy)";
         break;
      case MSTATE_BE_RIGHT_BACK:
         oNewElement.innerText += " (Be Right Back)";
         break;
      case MSTATE_IDLE:
         oNewElement.innerText += " (Idle)";
         break;
      case MSTATE_AWAY:
         oNewElement.innerText += " (Away)";
         break;
      default:
         oNewElement.innerText += "(Just plain not around!)";
         oNewElement.style.color = "graytext";
         break;
      }
      oNewElement.className = "clsContact";

      // To enable us to respond to the onclick event, 
      // we're programmatically setting the event
      // handler AND we're defining an expando property
      // on the contact DIV whose value is set to
      // the index of the contact in the default list (so we can find them later)

      oNewElement.onclick = sendMessage;
      oNewElement.setAttribute("CONTACTID", i.toString());

      divContacts.appendChild(oNewElement);
   }
}
function doLogon()
{
   // To logon, we just ask Messenger to display its logon UI

   if (oMsgrObj.LocalState == MSTATE_OFFLINE)
   {
      btnLogon.disabled = true;
      oMsgrApp.LaunchLogonUI();
   }
}

function sendMessage()
{
   // To send a message, we likewise just ask Messenger to do the heavy
   // lifting (we just have to
   // pass it a contact from the default list)

   var nContactID = parseInt(window.event.srcElement.getAttribute("CONTACTID"));
   if (!isNaN(nContactID))
   {
      var oContact = oMsgrObj.List(0).Item(nContactID);
      oMsgrApp.LaunchIMUI(oContact);
   }
}

</SCRIPT>

<SCRIPT LANGUAGE="JScript" EVENT="onLocalStateChangeResult(hr)" FOR="oMsgrObj">

if (hr == 0)
{
   if (oMsgrObj.LocalState == MSTATE_ONLINE)
   {
      // Now we're online

      window.setTimeout("populateContacts();", 3000);
   }
   else if (oMsgrObj.LocalState == MSTATE_OFFLINE)
   {
      // Now we're offline

      divContacts.innerHTML = "";
      btnLogon.disabled = false;
   }
}

</SCRIPT>

<DIV CLASS="clsHeading">Contacts (click on a contact to send a message!)</DIV>
<DIV ID="divContacts" STYLE="MARGIN-TOP: 8px; 
 MARGIN-BOTTOM: 8px; BORDER: 1px solid steelblue"></DIV>
<INPUT TYPE="BUTTON" ID="btnLogon" VALUE="Logon" onClick="doLogon();" DISABLED="yes">

</BODY>
</HTML>

返回页首

将 XML 发送回服务器

亲爱的 Web Team：

你们怎样修改客户端 Web 浏览器上的 XML 并将最后的 XML 发送到 Web 服务器呢？

Web Team 的答复：

我们假定您的 Web 服务器运行的是 Microsoft Internet Information Server (IIS) 4.0（或更高版本）或支持 Active Server Page (ASP) 技术的产品。

我们来简要地回顾一下 Web 浏览器是如何提供丰富的交互式 Internet 体验的。考虑最简单的形式：Web 浏览器从 Web 服务器请求一个页面，处理返回的信息（通常是超文本标记语言 (HTML) 格式），并显示结果。超文本传输协议 (HTTP) 定义了 Web 服务器和浏览器用来相互通讯的语言。Web 浏览器还执行大量的幕后工作，以便用户能够导航 Web 并显示各种媒体类型。

因此，您需要一个交互式 Web 站点。那么，用户怎样将信息发送到 Web 服务器呢？

Web 浏览器或 Web 应用程序有许多种用来将 XML 发送到 Web 服务器的方法，我们将介绍其中的两种。Web 浏览器通常使用 HTTP GET 方法来请求 Web 页，并使用 HTTP POST 方法来发送信息。要实现用户与 Web 服务器之间的通讯，最简单的方法是使用 HTML FORM 元素。

FORM 元素提供了一种使用 GET 或 POST 方法将数据发送到服务器的途径。将哪些控件置于窗体内由您决定，并且您还决定只有具有 NAME 属性的那些控件才能够提交其数据。例如，当用户单击 Submit 按钮时，每个控件的数据都发送到 Web 服务器。

在下面的示例中，存储在 XML 数据岛中的 XML 将作为窗体的一部分提交到服务器。可以通过多种方法获取此 XML：硬编码、通过设置 SRC 属性从外部文件中加载、从 ADO 记录集中检索、从 SQL Server 2000 中检索或者使用 XML DOM 脚本对象模型来创建/修改。可以通过将 XML 绑定到 HTML 元素来将 XML 呈现给用户（请参阅 Binding HTML Elements to Data）。将 XML 数据包含在表单中提交就像在 onsubmit 事件处理程序中将 XML 分配给隐藏的 INPUT 元素一样简单，如下所示：

<FORM ACTION="http://yourserver/form.asp" METHOD="post" NAME="myform" 
ONSUBMIT=" myform.mytext.value = myxml.XMLDocument.xml;">
 <INPUT TYPE="HIDDEN" NAME="Text" ID="mytext">
 <INPUT TYPE="Submit">
</FORM>

<XML ID="myxml">
 <root>
  <item id="1" name="Item 1"/>
  <item id="2" name="Item 2"/>
 </root>
</XML>

下面是 FORM.ASP 页的内容：

<%@ language=JScript %>
<% 
  var xmldom = Server.CreateObject( "Microsoft.XMLDOM" );
  var xml = Request.Form( "Text" );
  Response.Write( "<XMP>" + xml + "</XMP>" );
%>

注为方便起见，本例中服务器返回 XMP 元素内的 XML。尽管此 HTML 元素是否决的，但是它具有将 HTML 和 XML 元素作为文本显示的好处。

XMLHttpRequest 对象是 Microsoft Internet Explorer 5.0 或更高版本附带的 MSXML 组件的一部分。该对象是在 Web 页上创建的，用于将 XML 发送到 Web 服务器。该对象是通过将 Microsoft.XMLHTTP 指定为应用程序名称来创建的。您通常调用 Open 方法、设置头信息（可选）、调用 Send，然后选中 responseXML 或 responseText 属性。使用此对象的一个好处是无需刷新页面即可执行 POST，从而实现了服务器与浏览器之间的无缝数据传输。Internet Explorer Web 服务行为使用 XMLHttpRequest 对象来提供对 .NET XML Web 服务的调用（使用 SOAP 请求）。

下面的示例展示了如何将 XML 文档发送到 Web 服务器。请注意，该示例使用同步调用。要进行异步调用，应该为 Open 方法的第三个参数提供 true 值，并使用 onreadystatechange 事件处理程序，以便在 Send 方法完成时得到通知。

<HEAD>
<script language="JScript">
function PostXml(xmldoc)
{    
  var xmlhttp = new ActiveXObject( "Microsoft.XMLHTTP" );
  xmlhttp.Open( "POST", "http://yourserver/xmlhttp.asp", false );
  xmlhttp.Send( xmldoc );
  return xmlhttp.responseXML;
}
function ShowResults()
{
  var resp = PostXml( myxml.XMLDocument );
  mydiv.innerHTML = "<XMP>" + resp.xml + "</XMP>";
}
</script></HEAD>
<BODY>
<BUTTON ONCLICK="ShowResults()">Post XML</BUTTON>
<DIV ID="mydiv"></DIV>

<XML ID="myxml">
 <root>
  <item id="1" name="Item 1"/>
  <item id="2" name="Item 2"/>
 </root>
</XML>

下面是 XMLHTTP.ASP 文件的内容：

<%@ language=JScript %>
<% 
  // Load XML
  var doc = Server.CreateObject( "Microsoft.XMLDOM" );
  doc.load( Request );

  // Process the XML ...

  // Return result
  Response.ContentType = "text/xml";
  doc.save( Response );
%>

在许多情况下，将 XML 存储在客户端上能够为 Web 站点提供创新的功能，例如，缓存常用数据、用户个性化或内联数据编辑。我们已讨论了两种将 XML 数据发送到 Web 服务器的机制。使用 ASP 技术来处理服务器上的 XML 数据很简单，而使用 ASP.NET 中的新功能进行处理则更简单。服务器可以选择以多种方式处理 XML，例如，将信息保存到文件或数据库中，或者根据 XML 内容执行操作。

下面介绍了另外几种将数据发送到 Web 服务器的方法，这些方法超出了本文的讨论范畴。

返回页首

对日期进行排序

亲爱的 Web Team：

我尝试着显示特定文件夹的内容，但显示的文件是按照创建日期来排序的（而不是像我现在所希望的那样按字母顺序来排序）。是否存在一种方法，可以通过使用 ASP 和 FileSystemObject 来实现我的愿望呢？对于你们提供的任何帮助，我将不胜感激。

Matt Pierce

Web Team 的答复：

Matt，非常感谢您的提问！下面是一个示例 ASP 页（感谢 Eric 的工作！），该页使用 FileSystemObjectscripting 对象来获取文件名集合，然后按创建日期对其进行排序。有关 FileSystemObject scripting 对象的文档，可以在 Microsoft Windows Script Technologies 站点找到。

调用 GetFolder() 方法以检索文件夹对象的指定的路径。该文件夹对象包含可以使用 Enumerator 对象访问的 files 集合。每个文件项都是按照文件名的顺序检索的，因此将它们分配给一个数组以便在稍后对其进行排序。

    arr[i++] = {path : fc.item().Path, date : fc.item().DateCreated};

上面显示的是一种不很常见的分配语法，这种语法称为对象文字，它包含用逗号分隔的属性规范列表。每个属性规范都由属性名及其后面的属性值组成。此对象文字语法用于创建具有 path 和 date 这两个属性的对象。

使用 Array 对象的 sort() 方法可以指定我们自己的比较函数 sortByDate，以便确定排序顺序。在本例中，comparison 函数返回一个指示两个项在创建日期上的相对顺序的值，但可以轻松地针对其他文件属性对该函数进行改写。

<%@ language=JScript %>
<%
function sortByDate(f1, f2)
{
  if (f1.date < f2.date)
    return -1;
  else if (f1.date > f2.date)
    return 1;
  else 
    return 0;
}
function showfiles(path)
{
  var fso, f, f1, fc, arr, i, s;
  fso = new ActiveXObject( "Scripting.FileSystemObject" );
  f = fso.GetFolder( path );

  // Build the file list
  arr = new Array();
  i = 0;
  for ( fc = new Enumerator( f.files ); !fc.atEnd(); fc.moveNext() )
    arr[i++] = {path : fc.item().Path, date : fc.item().DateCreated};

  // Sort the file list
  arr.sort( sortByDate );

  // Display the file list
  s = "";
  for ( i=0 ; i<arr.length ; ++i )
    s += arr[i].path + "<br>";
  return s;
}
Response.Write( showfiles( Server.MapPath( "." ) ) );
%>

返回页首

Web Team 简介

Web 辅助功能

问：Rob 想知道怎样使 Web 站点易于访问。

答：请查看 Microsoft Enable 站点上的辅助功能 Web 指导原则。

针对色盲用户的开发注意事项

问：Becca 问：是否有关于色盲以及考虑到这一情况时的 Web 开发的任何信息。

答：请看 Robert Hess 在其定期专栏 More or Hess 中撰写的文章 Can Color-Blind Users See Your Site?。

行为

问：Pierre 问：DHTML 行为有什么用途。

答：MSDN 联机库中有一篇很好的概述文章介绍这些行为。DHTML Dude 专栏也在名为 Fun with Tables 的专栏中讨论了这一主题。

Intranet 身份验证

问：Paul 想知道公司用户怎样能够使用其域用户名和密码来自动通过 Web 站点的身份验证。

答：在 Internet Explorer 中，转至“工具”/“Internet 选项”，单击 Security 选项卡。然后单击 Custom Level，向下滚动至 User Authentication，并选择 Automatic logon only in Intranet zone。除非您公司的 IT 组配置了其他选项，否则此选项是默认选项。

Web Team

Mark Davis 是 Internet Explorer SDK 组的软件设计工程师。Mark 来自英格兰，他目前正在接受训练，为攀登西北部的主峰作准备。

Heidi Housten 是瑞典的一名 Microsoft 咨询服务顾问，在此之前，她在 Developer Support 组和 MSDN 组工作过一段时间。有人谣传说她搬至那里是为了躲避西雅图没完没了的小雨，实际上她去那里仅仅是为了参加八月的传统的小龙虾宴会。

Dan Mohr 是 Microsoft Developer Support 的 Internet Client 组的工程师，他业余时间喜欢在自己的地下室录制磁带、编写他的 Commodore 64 程序，以及吹捧 70 年代末期的朋克摇滚乐。

Jay Allen 是 Microsoft Developer Support 的 Internet Client 组的支持工程师，他渴望将记事本与 Emacs Lisp 集成。在工作之余，他将绝大部分时间都用来陪自己的四个孩子，剩下的一点时间则通常用来读数学书、学习日语以及用 Haskell 编程。

Web Team 大热门

Web Team 话题列表

转到原英文页面

返回页首