AJAX ASP.NET 评分控件

Miroslav Sommer

4.48/5 (90投票s)

2007年1月30日

CPOL

3分钟阅读

330887

13935

一篇关于如何使用 AJAX Control Toolkit 中的 Rating 控件，并创建 CSS 和图像来将其显示为仪表盘或温度计的文章。

Sample Image - AjaxRating.png

引言

这是一篇关于如何使用 AJAX Control Toolkit 中的 Rating 控件，并创建 CSS 和图像来将其显示为仪表盘或温度计的文章。这对于那些需要在 ASP.NET 中更具图形化地显示评分的人来说非常有用。

背景

曾经有一个需求，需要在某个 AJAX ASP.NET 网站上创建一个温度计。需要简单的参数范围配置和不同的图形。

设置

使用 Rating 控件和创建仪表盘/温度计的前提条件

Windows（XP 或更高版本）
Visual Studio（2005 或更高版本）
ASP.NET AJAX 启用的网站（Microsoft ASP.NET AJAX v1.0）
AJAX Control Toolkit（v1.0.10123.0）
CSS 中级知识
如何绘制简单图形的知识

使用代码

您需要做的第一件事是将 Rating 控件添加到您的 aspx 页面中。页面应该如下所示

<%@ Page Language="VB" AutoEventWireup="true" 
                       CodeFile="Default.aspx.vb" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
                         "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Untitled Page</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server" />
            <div>
                <cc1:Rating ID="Rating1" runat="server">
                </cc1:Rating>
            </div>
        </form>
    </body>
</html>

您需要设置 Rating 控件的基本属性。您可以从控件的网站上描述的属性开始。

    <ajaxToolkit:Rating runat="server" ID="Rating1"
        MaxRating="5"
        CurrentRating="2"
        CssClass="ratingStar"
        StarCssClass="ratingItem"
        WaitingStarCssClass="Saved"
        FilledStarCssClass="Filled"
        EmptyStarCssClass="Empty"
        >
    </ajaxToolkit:Rating>

该控件提供了五颗星的选择，因此可以选择 1 到 5 的评分。有三种基本图像用于显示控件的状态，由 CSS 类名识别

Empty - 当值未被选中时。
Filled - 当值被选中时。
Saved - 当值通过异步回发被保存时。

此外，还有另外两种样式

ratingStar - 指定控件，这个 Rating 是“星形”类型。
ratingItem - 指定评分中的每个“星形”。

控件的渲染效果如下：

但是如果我们想使用其他图形呢？如果我们想有一个 1 到 10 的比例呢？如果我们想能够选择零值或“未选中”值呢？

很简单，Rating 控件允许这样做。您只需要编写一些 CSS 并绘制一些图形。

主要思路是

在背景上放一些漂亮的图形。
使用透明框来显示 Filled “星形”。这些框将显示背景图形。
使用填充框来显示 Empty “星形”。这些框将覆盖背景。
使用 padding 在 CSS 中定位 Rating 控件，以便将“星形”放置在背景的所需区域上。
更改 MaxRating 值。如果要包含“零”值，则将该值加一。
对于 CSS 属性 - 只更改 CssClass 属性的值，保持其他 CSS 属性不变。

示例 Rating 控件的属性具有这些值

MaxRating="21"
CssClass="ratingThermometer"
StarCssClass="ratingItem"
WaitingStarCssClass="Saved"
FilledStarCssClass="Filled"
EmptyStarCssClass="Empty"

... 并显示一个从 0 到 10、步长为 0.5 的温度计。因此，MaxRating 计算为 (10 / 0.5 ) + 1。

修改后的控件渲染效果如下：

最后，您需要根据控件的 CurrentValue、MaxRating 以及所需的 MinimumRange 和 MaximumRange 来计算与您的图形相对应的值。

    Public Shared Function EvaluateRating(ByVal CurrentValue As Integer, _
                      ByVal MaxRating As Integer, _
                      ByVal MinimumRange As Integer, _
                      ByVal MaximumRange As Integer) As Double

        ' If MinimumRange = 0 than compute value differently otherwise not
        Dim FromZero As Integer = IIf(MinimumRange = 0, 1, 0)
        Dim Delta As Double = (MaximumRange - MinimumRange) / (MaxRating - 1)
        Dim Result As Double = Delta * CurrentValue - Delta * FromZero
        
        Return result

    End Function

关注点

您不需要使用 cc1 前缀，也不需要在每个页面上不必要地注册程序集。您可以在 Web.config 中一次性注册 AjaxControlToolkit 程序集。将以下内容添加到 configuration/system.web/pages/controls 节点中
```
<add tagPrefix="ajaxToolkit" namespace="AjaxControlToolkit" 
                             assembly="AjaxControlToolkit"/>
```
然后，您可以将 cc1 前缀替换为更易读的 ajaxToolkit 前缀，并从任何 aspx 页面中完全删除 Register 指令。源代码看起来比以前好多了。
目前 Rating 控件（AJAX Control Toolkit v1.0.10123.0）存在一个 bug。当您从源代码视图切换到设计视图时，会出现一个错误：“value” 无法设置为属性 'CurrentRating'，如果 value 大于 5。尽管如此，一切都正常工作。
而且，如果您愿意，当然也可以用 C# 编写代码。创建和评估的想法不会改变。

历史

2007-01-30: 发布第一个版本。
2007-06-04: 更新了文本。