建立評等控制項 (VB)

  • 發行項

作者 ：一個是一個

下載 PDF

許多網站，從電子商務到社群網站，都會提供其使用者評分文章或專案。 這通常需要一些程式碼撰寫工作，但我們確實有控制工具組可處置。

概觀

許多網站，從電子商務到社群網站，都會提供其使用者評分文章或專案。 這通常需要一些程式碼撰寫工作，但我們確實有控制工具組可處置。

步驟

首先，您需要至少 (兩種影像) ：一個用於填寫的評等專案，另一個用於空的評等專案。 評等專案通常是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">
 Sub Page_Load()
 If Page.IsPostBack Then
 Label1.Text = "Your rating: " & r1.CurrentRating
 End If
 End Sub
</script>

儲存頁面並載入瀏覽器。 當您將滑鼠停留在 (一開始空白) 評等專案時，會發生 JavaScript 效果：評等會變更。 當您按一下星形集時，會保留目前的評等。 最後，當您提交表單時，伺服器端程式碼會輸出選取的評等。

使用最少的程式碼建立評等系統

使用最少的程式碼建立評等系統 (按一下即可檢視完整大小的影像)

[上一步]