Ниже я раскажу как написать простенький компонент для отображения облака тэгов в ASP.NET. Пост содержит много кода. Для начала нам потребуется jQuery, который нужно где-нить подключиться на странице. Если Вы не знаете, что такое jQuery - то в поиск. Далее на странице, где у нас будет облако тэгов, а их может быть несколько, подключаем CSS и JS:

Copy Source | Copy HTML

1. <%@ Register TagPrefix="lsv" TagName="TagCloud" Src="~\Components\_\TagCloud.ascx" %>
2. <link rel="stylesheet" type="text/css" href="App_Themes/Basic/tagcloud/tagcloud.css" />
3. <script type="text/javascript" src="App_Themes/Basic/tagcloud/tagcloud.js" charset="windows-1251"></script>

Где JS файл содержит следующий код:

Copy Source | Copy HTML

1. function fontSize(freq, font_min, font_max,total_min,total_max) {
2.     var size = (freq - total_min)*(font_max - font_min);
3.     if(total_max-total_min>0){
4.         size /= (total_max - total_min);
5.     }
6.     size += font_min;
7.     if (size > font_max) size = font_max;
8.     else {
9.         if (size < font_min) size = font_min;
10.     }
11.     return size + "em";
12. }
13.  
14. var iTagCloud = {
15.     init: function(divName, data) {
16.         $(document.createElement('ul')).attr("id", "list" + divName).attr("class", "tagList").appendTo("#" + divName);
17.         //create tags
18.         $.each(data.tags, function(i, val) {
19.             //create item
20.         var li = $(document.createElement('li'));
21.             //create link
22.             $(document.createElement('a')).css("font-size",
23.                  fontSize(val.freq, 0.5, 2, data.min,data.max)
24.             ).text(val.tag).attr({ title: val.freq + " упоминаний",
25.                 target: "_blank",
26.                 href: "http://blogs.yandex.ru/search.xml?text=" + val.tag
27.             }).appendTo(li);
28.             //add to list
29.             li.appendTo("#list" + divName);
30.         });
31.     }
32. };

Файл стилей на ваше успотрение раставляет цвета, например:

Copy Source | Copy HTML

1. div.TagCloud { width:90%; background-color:#ffffff;
2.                            text-align:center; padding:0px; overflow:auto; font-size:100%; font-family:arial; }
3. ul.tagList { margin:0; padding:0; }
4. ul.tagList li { list-style-type:none; float:left; margin:0 3px; height:35px; }
5. ul.tagList li a { text-decoration:none; color:#0000FF; }
6. ul.tagList li a:hover { text-decoration:underline; color:Red }

Теперь можно перейти к содержимому самого компонента TagCloud.aspx, основная задача которого просто заполнить текст в метку Content:

Copy Source | Copy HTML

1. using System;
2. using System.Collections.Generic;
3. using System.Data;
4. using System.Web;
5. using System.Web.UI;
6. using System.Web.UI.WebControls;
7.  
8. public partial class Components__TagCloud : System.Web.UI.UserControl
9. {
10.     #region Переменные
11.  
12.     DataSet _wordsdata = null;
13.     String _title = String.Empty;
14.  
15.     #endregion
16.  
17.     #region Свойства
18.  
19.     public DataSet WordsData
20.     {
21.         set
22.         {
23.             _wordsdata = value;
24.         }
25.         get
26.         {
27.             return _wordsdata;
28.         }
29.     }
30.  
31.     public String Title
32.     {
33.         set
34.         {
35.             _title = value;
36.         }
37.         get
38.         {
39.             return _title;
40.         }
41.     }
42.  
43.     #endregion
44.  
45.     /// <summary>
46.     /// Пошла загрузка
47.     /// </summary>
48.     /// <param name="sender"></param>
49.     /// <param name="e"></param>
50.     protected void Page_Load(object sender, EventArgs e)
51.     {
52.         Content.Text = "<div id=\"tagCloud"+this.ID+"\" class=\"TagCloud\">";
53.         if(!String.IsNullOrEmpty(this.Title)){
54.             Content.Text += "<h3>"+this.Title+"</h3>";
55.         }
56.         Content.Text += "</div><br/>";
57.         if (WordsData != null && WordsData.Tables.Count > 0
58.             && WordsData.Tables[0].Rows.Count > 0)
59.         {
60.             Content.Text += "<script type=\"text/javascript\">";
61.             Content.Text += "$(function() {   " +
62.            "iTagCloud.init('tagCloud"+this.ID+"', {tags:[";
63.             int Min = int.MaxValue;
64.             int Max = int.MinValue;
65.  
66.             //пройдемся по всем данным.
67.             foreach(DataRow dr in WordsData.Tables[0].Rows){
68.                 // $json .= "{tag:'" . $row["tag"] . "',freq:'" . $row["frequency"] . "'}";   
69.                 Content.Text += "{tag:'" + dr[0].ToString()+"',freq:'"+ dr[1].ToString()+"'},";
70.                 int freq;
71.                 if(int.TryParse(dr[1].ToString(),out freq)){
72.                     if (freq < Min)
73.                     {
74.                         Min = freq;
75.                     }
76.                     else if(freq > Max)
77.                     {
78.                         Max = freq;
79.                     }
80.                 }
81.             }
82.             Content.Text = Content.Text.TrimEnd(',')
83.                 + "],min:'"+Min.ToString()+"',max:'"+Max.ToString()+"'})});"; //закрытие объекта
84.             Content.Text += "</script>";
85.         }else{
86.             Content.Text += "-- недостаточно данных для построения облака слов --";
87.         }
88.  
89.     }
90. }
91.  
92.  
93.  

Вот и все, теперь задав DataSet у объекта TagCloud мы получим полноченное облако тэгов. При желании можете написать виджет для замены унылого облака тэгов которое есть в BlogEngine =).