这几天抽空写第二部分。很高兴今天能够和大家分享下。我这是个asp.net mvc的新手。。。希望各位提出宝贵的意见。
你可以在这里查看第一部分的内容。http://www.cnblogs.com/n-pei/archive/2010/08/30/1812981.html
按照之前计划，这一部分的内容如下：
1. 对电影的打分功能实现
2. 评论的功能实现和对输入的评论内容的验证
3. 电影列表的展示和分页功能
4. 电影详细内容显示
在说明功能实现的同时会和大家分享思路。
1。打分功能的实现(Rating):
这个功能不管怎么说都得使用AJAX方法实现，不然当某个人看电影看到鸡动处给打了5分，结果页面刷新了就杯具了。
因为打分部分好几个页面都会用到它，或者用来显示某个电影的平均分，或者提供打分功能，所以我们把它单独写出来，如下图：
创建一个HTMLHeplers类，使用StringBuilder来拼接html，最后这段html将会显示如上图中的星状打分图。代码如下：
| 1 | public static class HTMLHelpers |
| 2 | { |
| 3 | |
| 4 | public static string Ratings(this HtmlHelper helper, int Id) |
| 5 | { |
| 6 | float average = 0; |
| 7 | mediaEntities mediaDB = new mediaEntities(); |
| 8 | var video = mediaDB.Videos.Single(v => v.Id == Id); |
| 9 | |
| 10 | if (video.Ratings.Any()) |
| 11 | average = video.Ratings.Average(x => x.Rating1); |
| 12 | |
| 13 | StringBuilder sb = new StringBuilder(); |
| 14 | sb.AppendFormat("<span class='rating' rating='{0}' video='{1}' title='{2}'>", average, video.Id, "Click to rating"); |
| 15 | string formatStr = "<img src='http://images.cnblogs.com/{0}' alt='star' width='5' height='12' class='star' value='{1}' />"; |
| 16 | |
| 17 | for (double i = .5; i <= 5.0; i = i + .5) |
| 18 | { |
| 19 | if (i <= (double)average) |
| 20 | { |
| 21 | sb.AppendFormat(formatStr, (i * 2) % 2 == 1 ? "star-left-on.gif" : "star-right-on.gif", i); |
| 22 | } |
| 23 | else |
| 24 | { |
| 25 | sb.AppendFormat(formatStr, (i * 2) % 2 == 1 ? "star-left-off.gif" : "star-right-off.gif", i); |
| 26 | } |
| 27 | } |
| 28 | |
| 29 | if (video.Ratings.Any()) |
| 30 | sb.AppendFormat(" <span>Currently rated {0:f2} by {1} people</span>", average, video.Ratings.Count); |
| 31 | else |
| 32 | sb.AppendFormat(" <span>{0}</span>", "Be the first to rate this post"); |
| 33 | sb.Append("</span>"); |
| 34 | return sb.ToString(); |
| 35 | } |
| 36 | } |
Ratings方法从参数Id可以得到当前打分的是哪个Video，然后从数据库找到这个Video的Comment数量，再计算平均值，通过平均值来确定最终的分数显示哪些图片：
如何在View中使用它呢？
首先需要在需要用到的View中或者是Master模板中添加HTMLHelpers类所在的命名空间：
Import命名空间后，添加如下代码就可以显示出来这个Video
| 1 | <div class="video_rating"><%= Html.Ratings(Model.Video.Id)%></div> |
实接下来需要做的是在鼠标移动到星星上时替换图片，也就是显示出来当前的分数。
| 1 | $(".star").mouseover(function () { |
| 2 | var span = $(this).parent("span"); |
| 3 | var newRating = $(this).attr("value"); |
| 4 | setRating(span, newRating); |
| 5 | }); |
| 6 | |
| 7 | |
| 8 | $(".star").mouseout(function () { |
| 9 | var span = $(this).parent("span"); |
| 10 | var rating = span.attr("rating"); |
| 11 | setRating(span, rating); |
| 12 | }); |
| 13 | function setRating(span, rating) { |
| 14 | span.find('img').each(function () { |
| 15 | var value = parseFloat($(this).attr("value")); |
| 16 | var imgSrc = $(this).attr("src"); |
| 17 | if (value <= rating) |
| 18 | $(this).attr("src", imgSrc.replace("-off.gif", "-on.gif")); |
| 19 | else |
| 20 | $(this).attr("src", imgSrc.replace("-on.gif", "-off.gif")); |
| 21 | }); |
| 22 | } |
点击事件，当鼠标点击时，我们还需要把结果Post到服务器端，,在服务器端添加数据后再计算平均值，最终以json方式返回到客户端显示出来。
点击事件发生时执行如下操作:
| 1 | $(".star").click(function () { | ||
| 2 | var span = $(this).parent("span"); | ||
| 3 | var newRating = $(this).attr("value"); | ||
| 4 | var text = span.children("span"); | ||
| 5 | var vId = span.attr("video"); | ||
| 6 | $.post("/Home/SaveRating", { videoId: vId, rating: newRating }, | ||
| 7 | function (data) { | ||
| 8 | var obj = eval('(' + data + ')'); | ||
| 9 | if (obj.Success) { | ||
| 10 | text.html("Currently rated " + obj.Result.AverageScore + " by " + obj.Result.Votes + " people"); //modify the text | ||
| 11 | span.attr("rating"
|