Saturday, 23 February 2013

ASP.Net : Create Star Rating | Neha Sharma




Introduction:

Now a day’s online shopping website online forums, deal website, bidding website is in demand and the need is on the high priority, even there are more projects are in queue for me to develop.
I saw, these kind of website requires a rating option to rate each product, deals etc.There are many ways to do this in php or wordpress or shopping cart but as we know ASP.net is not much easy like these, because these contains plugins just to install them and copy paste some code there, and ready, but I must say here it ll be very quick method but most of the time these things create much problems.
Anyways here I tried to explain to “create rating in ASP.Net”.

Requirement:

Add Ajaxcontroltoolkit.dll

Code:

Write below code in to 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-size: 0pt;
            width: 13px;
            height: 12px;          
            cursor: pointer;
            display: block;
            background-repeat: no-repeat;
        }
        .filledStar
        {
            background-image: url(image/Filled_Star.png);
        }
        .emptyStar
        {
            background-image: url(Image/Empty_Star.png);
        }
        .savedStar
        {
            background-image: url(Image/Saved_Star.png);
        }
        .auto-style1 {
            height: 50px;
        }
    </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: #333333; background-color: #F0F0F0">
            <tr>
                <td height="40" style="font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: small;">
                    &nbsp;</td>
            </tr>
            <tr>
                <td height="50" style="font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: small;">
                    Rate My Article</td>
            </tr>
            <tr>
                <td align="center" class="auto-style1" style="font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: small;">
                    <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-family: Verdana, Geneva, Tahoma, sans-serif; font-size: small;">
                    <asp:Label ID="lbl_point" runat="server"></asp:Label>
                </td>
            </tr>
        </table>       
    </div>
    </form>
</body>
</html>

Add below code for 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();
    }
}

Save the whole work and run the page it ll look like below image:



Hope it ll help .

Thanks

No comments:

Post a Comment

Which Game Engine you should choose | Neha Sharma

Unity3D and Unreal Engine are only 2 Game engine which executes an indispensable position in Game Industry. The choice of the engine must ...