首页 / 网页编程 / ASP.NET / ASP.NET自定义控件 第五天 真正可以评分的星级控件

ASP.NET自定义控件 第五天 真正可以评分的星级控件2011-09-02 博客园 holywolf1. 引言

在前几次任务里开发的星级控件仅适用于静态展示，例如标明某个软件的受欢 迎度，但是实际上很多网站还希望能够由用户对某一信息进行评分，最终计算出 该信息的受欢迎程度，使数据更为客观和可信，由此需要在原有的星级控件上加 以改进，使用户能够动态评分，实际的效果图看起来如下图所示：

图中第一行是经过评分后控件的状态，开发人员处理了评分事件并在页面输出 了选择的分数；图中第二行显示了另外一种评分状态——鼠标移动到了星形图案 上，此时使用红色的星形提示用户。

2. 分析

对于该控件我们要在原有控件的基础上加入两个特性：

1. 加入鼠标悬浮指示，当鼠标悬停时显示出用户选择的分数。

2. 在鼠标点击时能够回发到服务器并将相应事件暴露出来由开发人员处理。

对于第一个需求，可以处理JavaScript中的鼠标事件，当触发onmouseover事 件时判断当前鼠标悬停在第几个星形图案，接着显示红色星形图案。显示图案时 同样有一些技巧，在原有显示星形图案的层（div）中嵌套层，并将该层的背景设 置为红色星形图案，在页面加载的时候该层不应该被显示出来（设置宽度为0即可 ），并且在鼠标悬停时设置该层的宽度，我们只需要注意能够使该层将背景层覆 盖即可。

同样要考虑的是，在鼠标移出的时候需要将该层隐藏起来，那么只需要处理 onmouseout事件，将层的宽度再次设置为0即达到了隐藏层的目的。

对于第二个需求，首先要在自定义控件中暴露一个公开事件使开发人员能够订 阅该事件，接下来就是在客户端产生一个回发脚本，使得在点击（JavaScript中 的onclick事件触发）时执行此回发脚本提交到服务器即可。

为了产生回发脚本，使自定义控件实现IPostBackEventHandler接口，该接口 定义了ASP.NET服务器控件为处理回发事件而必须实现的方法。

在提交到服务器之后，自定义控件调用公开的事件，并且需要星形图案替换为 黄色背景标识用户评分，那么我们同样可以在背景层中再加入一个层，使用和第 一种需求相同的算法将背景层覆盖就可以了。

需要确认的是，在用户评分之后就不允许再次评分了（将用户当前鼠标悬停选 择评分的层隐藏起来即可）。

最后要考虑的问题是，自定义控件中使用了服务器端控件作为容器显示图片， 为了避免页面上放置多个自定义控件发生问题，需要保证此时各服务器端控件生 成的客户端编号唯一，您一定已经想到了解决方法，就是实现INamingContainer 接口。