创建Rating控件

2021-10-20

Christian Wenz

本文档是Visual Basic 教程（转至 Visual C# 教程）

许多网站（从电子商务网站到社区网站）都允许它们的用户对文章或产品进行评价。这通常需要我们编写一些代码。但在本教程中，我们将利用Control Toolkit 完成这项任务。

« 前一篇教程 | 下一篇教程 »

概述

许多网站（从电子商务网站到社区网站）都允许它们的用户对文章或产品进行评价。

这通常需要我们编写一些代码。但在本教程中，我们将利用Control Toolkit 完成这项任务。

步骤

首先，我们需要（至少）两种图像：一种用于显示填写过的评分项，另一种显示空白评分项。“评分项”通常是星号或笑脸符号。在本教程的源代码下载中，我们能够找到三个文件： smiley.png、 empty.png 和 smiley-done.png。

然后，创建一个新的ASP.NET文件，并在其中添加一个 ScriptManager 控件：

<asp:ScriptManager ID="asm" runat="server" />

CurrentRating — 所使用的初始评分
MaxRating — 最高评分
EmptyStarCssClass — 评分项（“ 星号 ”）为空时使用的 CSS 类
FilledStarCssClass — 评分项（“ 星号 ”）已填写时使用的 CSS 类
StarCssClass — 为一个 visible stat 使用的 CSS 类
WaitingStarCssClass — 将星级评分发送回服务器时使用的 CSS 类

使用以下标记，我们将创建一个rating 控件，该控件有5个评分项（笑脸），且没有提供初始评分：

<asp:ScriptManager ID="asm" runat="server" />

接下来，通过ASP.NET AJAX Control Toolkit 添加一个Rating控件。对于本示例，我们需要设置以下属性：

<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!" />

在服务器端代码中，通过Rating 控件的ID 来访问该控件，然后访问它的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效果：评分随鼠标悬停的位置而改变。

如果单击某个评分项，则相应的评分保存到数据库中。最后，在我们提交表单时，服务器端代码会输出所选的评分。

使用最少代码创建一个分级系统

下一篇教程

通过

创建Rating控件

概述

步骤

其他资源