如所示的等級控制項(這個控制項主要指定樣式):
頁面代碼:
<head runat="server"><br /> <title>無標題頁</title><br /> <mce:style type ="text/css"><!--<br /> .ratingStar<br /> {<br /> font-size:0pt;<br /> width:15px;<br /> height:12px;<br /> padding:1px;<br /> margin:1px;<br /> cursor:pointer;<br /> display:block;<br /> background-repeat:no-repeat;<br /> background-color:#99CC99;<br /> }<br /> .filledRatingStar<br /> {<br /> background-image:url(image/star1.gif);<br /> }<br /> .emptyRatingStar<br /> {<br /> background-image:url(image/star2.gif);<br /> }<br /> .savedRatingStar<br /> {<br /> background-image:url(image/star3.gif);<br /> }</p><p>--></mce:style><style type ="text/css" mce_bogus="1"> .ratingStar<br /> {<br /> font-size:0pt;<br /> width:15px;<br /> height:12px;<br /> padding:1px;<br /> margin:1px;<br /> cursor:pointer;<br /> display:block;<br /> background-repeat:no-repeat;<br /> background-color:#99CC99;<br /> }<br /> .filledRatingStar<br /> {<br /> background-image:url(image/star1.gif);<br /> }<br /> .emptyRatingStar<br /> {<br /> background-image:url(image/star2.gif);<br /> }<br /> .savedRatingStar<br /> {<br /> background-image:url(image/star3.gif);<br /> }<br /> </style><br /></head><br /><body><br /> <form id="form1" runat="server"><br /> <div><br /> <asp:ScriptManager ID="ScriptManager1" runat="server"><br /> </asp:ScriptManager></p><p> </div><br /> <asp:UpdatePanel ID="UpdatePanel1" runat="server"><br /> <ContentTemplate><br /> <cc1:Rating ID="Rating1" runat="server" Width="96px" WaitingStarCssClass="emptyRatingStar" EmptyStarCssClass="emptyRatingStar" FilledStarCssClass="filledRatingStar" StarCssClass="ratingStar" CurrentRating="2"><br /> </cc1:Rating><br /> <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /><br /> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br /> </ContentTemplate><br /> </asp:UpdatePanel><br /> </form><br /></body>
後台代碼:
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = Rating1.CurrentRating.ToString();
}
Rating控制項時的常用屬性標籤
屬性標籤名 描 述
CurrentRating 該Rating控制項當前的評級,即當前選中了幾顆星
MaxRating 該Rating控制項支援的最高評級數,即最多有幾顆星
RatingAlign 星形表徵圖的排列方向,可選Vertical(垂直)和Horizontal(水平)
RatingDirection 星形表徵圖的起始方向,可選LeftToRightTopToBottom(從左至右/從上到下)和 RightToLeftBottomToTop(從右至左/從下到上)
ReadOnly 若該屬性值設定為true,則該Rating控制項為唯讀,使用者不能對評級進行修改
StarCssClass 星形表徵圖所應用的CSS Class
WaitingStarCssClass 在使用者對評級有所改變,且這個改變尚處於非同步提交回伺服器儲存的過程中時星形表徵圖所應用的 CSS Class
FilledStarCssClass 選中的星形表徵圖所應用的CSS Class
EmptyStarCssClass 未選中的星形表徵圖所應用的CSS Class
OnChanged 指定Changed事件的處理函數。Changed事件將在使用者改變評級時觸發,並通過非同步而不是整頁 地回送發送回伺服器。這樣,在伺服器端的事件處理函數中即可得到當前的所選值,並做後續操作
Tag 一個作為附加資訊的上下文字串,該附加資訊將傳遞給Changed事件的伺服器端處理常式,這樣 即可在其中根據需要使用這個值。
注意,在WaitingStarCssClass、FilledStarCssClass和EmptyStarCssClass屬性所指定的CSS Class中,一般應該使用background-image屬性為不同類型的星形表徵圖指定相應圖片。這樣,Rating控制項就沒有必要直接暴露出各種情況下星形表徵圖檔案的URL屬性