Thursday 14 March 2013

Create Rating in ASP.NET

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".

Add Ajaxcontroltoolkit.dll.


Write the following code in your source code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>AJAX Rating Control</title>
    <style type="text/css">    
        .ratingStar
        {
            font-size0pt;
            width13px;
            height12px;          
            cursorpointer;
            displayblock;
            background-repeatno-repeat;
        }
        .filledStar
        {
            background-imageurl(image/Filled_Star.png);
        }
        .emptyStar
        {
            background-imageurl(Image/Empty_Star.png);
        }
        .savedStar
        {
            background-imageurl(Image/Saved_Star.png);
        }
        .auto-style1 {
            height50px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <table cellpadding="0" cellspacing="0" align="left" width="500" style="color#333333background-color:#F0F0F0">
            <tr>
                <td height="40" style="font-familyVerdanaGenevaTahomasans-seriffont-sizesmall;">
                    &nbsp;</td>
            </tr>
            <tr>
                <td height="50" style="font-familyVerdanaGenevaTahomasans-seriffont-sizesmall;">
                    Rate My Article</td>
            </tr>
            <tr>
                <td align="center" class="auto-style1" style="font-familyVerdanaGenevaTahomasans-seriffont-sizesmall;">
                    <asp:Rating ID="Rating1" runat="server" StarCssClass="ratingStar"WaitingStarCssClass="savedStar"
                        FilledStarCssClass="filledStar" EmptyStarCssClass="emptyStar" AutoPostBack="true"CurrentRating="1" MaxRating="5"
                        OnChanged="Rating1_Changed"></asp:Rating>
                </td>
            </tr>
            <tr>
                <td height="50" style="font-familyVerdanaGenevaTahomasans-seriffont-sizesmall;">
                    <asp:Label ID="lbl_point" runat="server"></asp:Label>
                </td>
            </tr>
        </table>       
    </div>
    </form>
</body>
</html>


Add the following code for the code behind page: 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    protected void Rating1_Changed(object sender, AjaxControlToolkit.RatingEventArgs e)
    {
      lbl_point.Text="You rated " + e.Value.ToString();
    }
}

No comments:

Post a Comment