ASP.NET的云控制

分享于 

7分钟阅读

Web开发

  繁體

介绍

Web的网站,比如 del.icio.usTechnorati和Flickr插件,可以描述标签的流行,使用标签云来描述标签的流行。 流行的项目有较大的字体大小。 这里概念可以应用于任何项的列表,其中每个项都有关联的权重。 例如,一个产品列表可以显示在一个由产品成本负责的云中。 使用本文中显示的ASP.NET 服务器控件,可以将你自己的域特定项显示为云。 显示了针对 Ajaxian 文章的示例云。

sample image

使用控件

这里控件仅适用于 ASP.NET 2.0. 首先,需要向网站添加对控制程序集或者控制项目的引用。 在需要使用控件的页中,添加以下声明:

<%@RegisterNamespace="VRK.Controls"TagPrefix="vrk"Assembly="VRK.Controls"%>

这样可以使用下面的声明在页中使用控件:

<vrk:CloudID="c1"runat="server"/>

现在,你需要向控件中添加项。 每个项目将作为超链接显示在页面上。 你可以为要添加的项提供以下属性:

  • Text - 超链接的文本。
  • Href - 当用户单击超链接时将被导航到的URL。 如果这里属性为空,则控件会导致 postback 并引发 ItemClick 事件。
  • Title - HTML锚点的工具提示文本。
  • Weight - 权重确定项的显示方式。

你可以声明方式添加项,如下所示:

<vrk:CloudID="c1"runat="server"><Items><vrk:CloudItemText="Item1"Href="Default.aspx?tag=Item1"Title="Some title"Weight="4"/><vrk:CloudItemText="Item2"Href="Default.aspx?tag=Item2"Title="Some title"Weight="4"/></Items></vrk:Cloud>

还可以编程方式添加项:

c1.Items.Add(new CloudItem("Item1", 4, 
 "Default.aspx?tag=Item1", 
 "Some title" ));

你还可以使用数据绑定来添加项。 首先,你需要在页面中添加一个数据源。 代码示例 below 显示一个 ObjectDataSource,但是你可以使用任何 ASP.NET DataSourceControl,如 SqlDataSource 或者 AccessDataSource

<asp:ObjectDataSourceID="ItemsSource"runat="server"SelectMethod="GetItems"TypeName="CloudTest.ItemsSource"/>

需要向云控件指示它需要通过指定 DataSourceID 数据源控件来使用 ItemsSource 数据源控件。

<vrk:CloudID="c1"runat="server"DataSourceID="ItemsSource"..../>

一旦指定了数据源,你就需要指明如何从数据源中填充项。 可以使用以下控件属性提供信息:

  • DataTextField - 绑定到项的Text 属性的数据字段的名称。
  • DataTextFormatString - Text 属性的格式字符串。 字符串中的{0} 替换为数据源中字段的值。
  • DataHrefField - 绑定到项的Href 属性的数据字段。
  • DataHrefFormatString - 格式化 Href 属性值的格式字符串。
  • DataTitleField - 绑定到项的Title 属性的数据字段。
  • DataTitleFormatString - 项的标题( 工具提示)的格式字符串。
  • DataWeightField - 数据源中的字段,从中获取项的权重。

控件然后规范化所有项的权重,使它的适合范围 1到 7. 你可以使用可选的ItemCssClassPrefix 属性控制规范化项的显示。 如果使用 ItemCssClassPrefix 属性,你需要在HTML页面中添加七个不同的CSS类。 例如如果将属性值指定为"项目",则需要指定CSS类 Item1Item2Item7。如果未指定 ItemCssClassPrefix,则根据重量设置字体大小CSS属性,如下所示:

标准化的weightfont大小
1xx小
2x-小
3
4介质
5
6x-大
7xx大

现在,让我们来看看控件是如何工作的。

控件的工作方式?

主要的逻辑是将权重的分布转换为 1和 7之间的整数范围。 在与统计数据争用一段时间之后,我发现了以下算法来规范权重:

  • 计算权重的平均值和标准偏差( σ )。 这是使用 Statistics 类中类似于 Math 类的函数完成的。
private IEnumerable<double> ItemWeights
{
 get {
 foreach (CloudItem item inthis.Items)
 {
 yieldreturn item.Weight;
 }
 }
}
...double mean; double stdDev = Statistics.StdDev(ItemWeights, out mean);

StdDev 函数接受 IEnumerable <双>ItemWeights 方法提供的参数。

  • 根据以下公式计算权重因子:
factor = (weight - mean)/(stddev)
  • 根据下表获取规范化权重:
标准化 WeightCondition
1<= -2 *stddev
2-2*stddev <因子 <= -1 *stddev
3-1*stddev <因子 <= -0.5 *stddev
4-0.5*stddev <因子 <0.5 *stddev
50.5*stddev <= 因子 <1 *stddev
61*stddev <= 因子 <2 *stddev
7> = 2 * stddev

一旦获得了规范化的权重,就可以很容易地设置字体大小和类。

foreach (CloudItem item in Items)
{
 HtmlAnchor a = new HtmlAnchor();
 a.HRef = String.IsNullOrEmpty(item.Href)?
 this.Page.ClientScript.GetPostBackClientHyperlink(this, index.ToString()) :
 item.Href;
 a.InnerText = item.Text;
 a.Title = item.Title;
 int normalWeight = NormalizeWeight(item.Weight, mean, stdDev);
 if (hasCssClassPrefix)
 {
 a.Attributes["class"] = 
 this.ItemCssClassPrefix + normalWeight.ToString();
 }
 else {
 a.Style.Add(HtmlTextWriterStyle.FontSize, _fontSizes[normalWeight - 1]);
 }
 this.Controls.Add(a);
 this.Controls.Add(new LiteralControl(""));
 index++;
}

这种方法在大多数情况下似乎工作得相当好。 欢迎进一步改进它的建议。

历史记录

  • ,4,2006 - 第一个版本。

控制  asp  asp-net    
相关文章