创建分级控件 (C#)

  • 项目

作者 ：Christian Wenz

下载 PDF

许多网站（从电子商务到社区网站）为用户提供对文章或项目进行评分。 这通常需要一些编码工作，但我们确实拥有可处置的控制工具包。

概述

许多网站（从电子商务到社区网站）为用户提供对文章或项目进行评分。 这通常需要一些编码工作，但我们确实拥有可处置的控制工具包。

步骤

首先，需要 (至少) 两种图像：一种用于已填写的分级项目，一种用于空分级项。 分级项目通常是star或笑脸。 对于此方案，可以找到三个文件，smiley.png和empty.png和smiley-done.png作为本教程的源代码下载的一部分。

然后，创建一个新的 ASP.NET 文件，并从向其添加控件 ScriptManager 开始：

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

然后，从 ASP.NET AJAX 控件工具包添加 Rating 控件。 需要为此示例设置以下属性：

  • CurrentRating 要使用的初始分级
  • MaxRating 最大分级
  • EmptyStarCssClass当分级项 ( star ) 为空时要使用的 CSS 类
  • FilledStarCssClass填充分级项 ( star ) 时要使用的 CSS 类
  • 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!" />

在服务器端代码中，通过 它访问 Rating 控件， ID 然后访问其 CurrentRating 属性（即所选分级项的数目），在我们的示例中，值介于 0 和 5 之间。

<script runat="server">
 void Page_Load()
 {
 if (Page.IsPostBack)
 {
 Label1.Text = "Your rating: " + r1.CurrentRating;
 }
 }
</script>

保存页面并将其加载到浏览器中。 将鼠标悬停在最初为空的 () 分级项上时，将出现 JavaScript 效果：评级更改。 单击星形集时，会保留当前分级。 最后，提交表单时，服务器端代码会输出所选分级。

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

使用最少代码创建分级系统 (单击以查看全尺寸图像)

下一页