1. 引言
在前幾次任務裡開發的星級控件僅適用於靜態展示,例如標明某個軟件的受歡 迎度,但是實際上很多網站還希望能夠由用戶對某一信息進行評分,最終計算出 該信息的受歡迎程度,使數據更為客觀和可信,由此需要在原有的星級控件上加 以改進,使用戶能夠動態評分,實際的效果圖看起來如下圖所示:
圖中第一行是經過評分後控件的狀態,開發人員處理了評分事件並在頁面輸出 了選擇的分數;圖中第二行顯示了另外一種評分狀態——鼠標移動到了星形圖案 上,此時使用紅色的星形提示用戶。
2. 分析
對於該控件我們要在原有控件的基礎上加入兩個特性:
1. 加入鼠標懸浮指示,當鼠標懸停時顯示出用戶選擇的分數。
2. 在鼠標點擊時能夠回發到服務器並將相應事件暴露出來由開發人員處理。
對於第一個需求,可以處理JavaScript中的鼠標事件,當觸發onmouseover事 件時判斷當前鼠標懸停在第幾個星形圖案,接著顯示紅色星形圖案。顯示圖案時 同樣有一些技巧,在原有顯示星形圖案的層(div)中嵌套層,並將該層的背景設 置為紅色星形圖案,在頁面加載的時候該層不應該被顯示出來(設置寬度為0即可 ),並且在鼠標懸停時設置該層的寬度,我們只需要注意能夠使該層將背景層覆 蓋即可。
同樣要考慮的是,在鼠標移出的時候需要將該層隱藏起來,那麼只需要處理 onmouseout事件,將層的寬度再次設置為0即達到了隱藏層的目的。
對於第二個需求,首先要在自定義控件中暴露一個公開事件使開發人員能夠訂 閱該事件,接下來就是在客戶端產生一個回發腳本,使得在點擊(JavaScript中 的onclick事件觸發)時執行此回發腳本提交到服務器即可。
為了產生回發腳本,使自定義控件實現IPostBackEventHandler接口,該接口 定義了ASP.NET服務器控件為處理回發事件而必須實現的方法。
在提交到服務器之後,自定義控件調用公開的事件,並且需要星形圖案替換為 黃色背景標識用戶評分,那麼我們同樣可以在背景層中再加入一個層,使用和第 一種需求相同的算法將背景層覆蓋就可以了。
需要確認的是,在用戶評分之後就不允許再次評分了(將用戶當前鼠標懸停選 擇評分的層隱藏起來即可)。
最後要考慮的問題是,自定義控件中使用了服務器端控件作為容器顯示圖片, 為了避免頁面上放置多個自定義控件發生問題,需要保證此時各服務器端控件生 成的客戶端編號唯一,您一定已經想到了解決方法,就是實現INamingContainer 接口。