最近的小朋友似乎都很沉迷Web 2.0，只要某網站掛上Web2.0的logo並且加上大大的beta圖樣就會莫明奇妙的大紅大紫，也難怪大家都不捨得把那個beta拿掉，原因可能是：
「我們還有太多創意要加進系統裡，所以我們需要不斷的修改」。
嗯，是哦，真是個好理由，好吧，為了能跟的上潮流我決定用ASP.NET技術創造一個跟Web2.0能沾上一點邊的小玩意，那就是今天的主角TagCloud Controls(標籤雲)控制項。
Web2.0 強調與終端使用者的互動，絕大部份的網站內容都要求使用者提供，於是我們便不知不覺得變成網站的免費人工，其中TagCloud就是一種俱代表性的運用， 每個使用者發現有用的內容就為這個內容記上自己認為最適當的標籤，經過大量而客觀的標示之後，我們就可以看出某些議題似乎是被大多數人喜愛的， TagCloud就是用來顯示這方面資訊的最佳工具，
del.icio.us 就是使用TagCloud最經典的模範網站之一。
關於TagCloud Controls我並不打算在這裡深入紹介TagCloud Controls的撰寫方式，因為它簡單到可說是沒有技巧可言，我僅僅用了300行程式碼就完成TagCloud 控制項，如果你還是很好奇的話可以到文章的下方連結下載編譯後可直接使用的dll檔及程式原始碼，當然為了更接近我心目中的Web2.0，所以這個控制項 目前還是beta版，謝謝。
載入資料TagCloud Controls 提供幾個方式載入標籤，其中 LoadData(string[] Tags); 方法可以接收簡單的字串陣列，並將所讀取到的每個字串當成標籤，當重覆的標籤在字串陣列中，TagCloud Controls就會自動計算出每種標籤的熱門程度，然後配合CSS以不同的樣式、大小顯示在頁面上，其它的還有 LoadData(DataTable table, string column); 及LoadData(DbDataReader reader, string column); 等方法提供從DataReader及DataTable載入標籤的方法。
設定屬性接著我們需 要為TagCloud設定幾個必要的屬性，CssClass屬性用來定義整個控制項的CSS類別，TagLevelCssClass則是標籤連結的的 CSS類別，實際上TagCloud會將標籤分可七種不同的熱門程度，假設TagLevelCssClass= “TagLv” 則標籤連結會被Render成 TagLv_1, TagLv_2, TagLv_3, TagLv_4, TagLv_5, TagLv_6, TagLv_7等CSS類別，你可以觀查一下我包含在下方連結中TagCloudDemo網站的做法。
另一個很重要的屬性是 PathRule，這個屬性用來定義標籤連結的規則，
例如 PathRule=" ~/tags/{0}/Default.aspx" 時，控制項會把中間的{0}代入標籤名稱，於是在 "game"這個標籤的url則是 http://localhost/tags/game/Default.aspx，你可以依照網頁的架構去修改這個屬性，以便讓每個標籤能連結到正確的 網址，唯一要注意的是別忘了在這個屬性中要包含至少一個 "{0}" 才有意義。
樣式表這個控制項被設計成配合一個CSS檔來顯示，下面是一個簡單的範例，你還是可以去修改成你想要的樣子。
.TagCloud
{
border: solid 1px #cacaca;
font-family: Arial;
width:400px;
}
.TagCloud a
{
text-decoration: none;
margin:3px;
}
.TagCloud a:hover
{
color: #ff6600;
}
.TagLv_1{font-size:8pt;}
.TagLv_2{font-size:10pt;}
.TagLv_3{font-size:12pt;}
.TagLv_4{font-size:14pt;}
.TagLv_5{font-size:16pt;}
.TagLv_6{font-size:18pt;}
.TagLv_7{font-size:20pt;}
完成以上所有的步驟後執行它你可以看到以個充滿Web2.0味道的漂亮的TagCloud。
我要再強調一次，因為它還只是個beta版，所以我相信還有許多可以改善的空間，例如把標籤熱門程度修改成可以任意設定成不同程級，或者讓相對太過冷門的標籤不顯示等等，不管有什麼特別的想法你都可以去修改原始碼達到想要的樣子。
下載TagCloud Controls