Create Rating in ASP.NET

Here I explain how to create a rating in ASP.Net. The Ajax control toolkit Rating control provides an option to implement to rating on websites.

Introduction

Online shopping websites, online forums, deal websites and bidding websites are currently in demand and are a high priority, there are even more projects in the queue for me to develop.

I have seen that these kinds of websites require an option for rating each product, deal etc. There are many ways to do this in PHP, Wordpress or a shopping cart but since we know ASP.Net is not as easy as these, because these contain plugins just to install them and copy and paste some code, and ready, but I must say that it is a very quick solution but usually these solution create other problems.

Anyways, here I explain how to "create a rating in ASP.Net".

Requirement

Add Ajaxcontroltoolkit.dll.

Code

Write the following code in your source code:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.    
  3. <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>  
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title>AJAX Rating Control</title>  
  8.     <style type="text/css">      
  9.         .ratingStar  
  10.         {  
  11.             font-size: 0pt;  
  12.             width: 13px;  
  13.             height: 12px;            
  14.             cursor: pointer;  
  15.             display: block;  
  16.             background-repeat: no-repeat;  
  17.         }  
  18.         .filledStar  
  19.         {  
  20.             background-image: url(image/Filled_Star.png);  
  21.         }  
  22.         .emptyStar  
  23.         {  
  24.             background-image: url(Image/Empty_Star.png);  
  25.         }  
  26.         .savedStar  
  27.         {  
  28.             background-image: url(Image/Saved_Star.png);  
  29.         }  
  30.         .auto-style1 {  
  31.             height: 50px;  
  32.         }  
  33.     </style>  
  34. </head>  
  35. <body>  
  36.     <form id="form1" runat="server">  
  37.     <div>  
  38.         <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">  
  39.         </asp:ToolkitScriptManager>  
  40.         <table cellpadding="0" cellspacing="0" align="left" width="500" style="color: #333333; background-color: #F0F0F0">  
  41.             <tr>  
  42.                 <td height="40" style="font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: small;">  
  43.                      </td>  
  44.             </tr>  
  45.             <tr>  
  46.                 <td height="50" style="font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: small;">  
  47.                     Rate My Article</td>  
  48.             </tr>  
  49.             <tr>  
  50.                 <td align="center" class="auto-style1" style="font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: small;">  
  51.                     <asp:Rating ID="Rating1" runat="server" StarCssClass="ratingStar" WaitingStarCssClass="savedStar"  
  52.                         FilledStarCssClass="filledStar" EmptyStarCssClass="emptyStar" AutoPostBack="true" CurrentRating="1" MaxRating="5"  
  53.                         OnChanged="Rating1_Changed"></asp:Rating>  
  54.                 </td>  
  55.             </tr>  
  56.             <tr>  
  57.                 <td height="50" style="font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: small;">  
  58.                     <asp:Label ID="lbl_point" runat="server"></asp:Label>  
  59.                 </td>  
  60.             </tr>  
  61.         </table>         
  62.     </div>  
  63.     </form>  
  64. </body>  
  65. </html>
Add the following code for the code behind page:
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7.    
  8. public partial class _Default : System.Web.UI.Page  
  9. {  
  10.     protected void Page_Load(object sender, EventArgs e)  
  11.     {  
  12.     }  
  13.     protected void Rating1_Changed(object sender, AjaxControlToolkit.RatingEventArgs e)  
  14.     {  
  15.       lbl_point.Text="You rated " + e.Value.ToString();  
  16.     }  
  17. }  
Save all the work and run the page. It will look as in the following image:

ASP.jpg

Hope it will help .

Thanks.