建立評等控制項 (C#)
作者 :一個是一個
許多網站,從電子商務到社群網站,都會提供其使用者評分文章或專案。 這通常需要一些程式碼撰寫工作,但我們確實有控制工具組可處置。
概觀
許多網站,從電子商務到社群網站,都會提供其使用者評分文章或專案。 這通常需要一些程式碼撰寫工作,但我們確實有控制工具組可處置。
步驟
首先,您需要至少 (兩種影像) :一個用於填寫的評等專案,另一個用於空的評等專案。 評等專案通常是star或笑臉。 在此案例中,您會找到三個檔案,smiley.png和empty.png和smiley-done.png作為本教學課程原始程式碼下載的一部分。
然後,建立新的 ASP.NET 檔案,然後從新增 ScriptManager
控制項開始:
<asp:ScriptManager ID="asm" runat="server" />
然後,從 AJAX 控制項工具組 ASP.NET 新增 Rating
控制項。 必須為此範例設定下列屬性:
CurrentRating
要使用的初始評等MaxRating
最高評等EmptyStarCssClass
當評等專案 ( star ) 空白時要使用的 CSS 類別FilledStarCssClass
填入評等專案時要使用的 CSS 類別 ( star )StarCssClass
要用於可見統計資料的 CSS 類別WaitingStarCssClass
當star評等傳回伺服器時要使用的 CSS 類別
以下是建立評等控制項的標記,其中包含五個專案 (笑臉) 一開始不會填滿:
<ajaxToolkit:Rating ID="r1" runat="server"
CurrentRating="0" MaxRating="5"
EmptyStarCssClass="emptypng" FilledStarCssClass="smileypng"
StarCssClass="smileypng" WaitingStarCssClass="donesmileypng"/>
這三個參考的 CSS 類別現在需要顯示適當的影像檔,這很容易使用 CSS:
<style type="text/css">
.emptypng { background-image: url(empty.png); width: 32px; height: 32px; }
.smileypng { background-image: url(smiley.png); width: 32px; height: 32px; }
.donesmileypng { background-image: url(smiley-done.png); width: 32px; height: 32px; }
</style>
請確定您提供三個影像的寬度和高度,否則顯示器看起來可能會有點雜亂。
最後,評等的結果應該向使用者顯示 (,或至少儲存在資料庫中) 。 因此,請新增文字訊息輸出的標籤和提交按鈕,以將評等表單回傳至伺服器:
<asp:Label ID="Label1" runat="server" />
<input type="submit" id="Submit1" runat="server" value="Rate!" />
在伺服器端程式碼中,透過其 ID
存取 Rating 控制項,然後存取其 CurrentRating
屬性,也就是所選評等專案的數目,在我們的範例中值為 0 到 5。
<script runat="server">
void Page_Load()
{
if (Page.IsPostBack)
{
Label1.Text = "Your rating: " + r1.CurrentRating;
}
}
</script>
儲存頁面並載入瀏覽器。 當您將滑鼠停留在 (一開始空白) 評等專案時,會發生 JavaScript 效果:評等會變更。 當您按一下星形集時,會保留目前的評等。 最後,當您提交表單時,伺服器端程式碼會輸出選取的評等。
使用最少的程式碼建立評等系統 (按一下即可檢視完整大小的影像)