How to Implement 5 star rating system in ASP.NET inside Gridview.
In this post, I am explain how to Implement 5 star rating system in ASP.NET inside Gridview.

Article IDArticle Title 
1How to Create Gmail Account?
Current Score :3
Your Score :
vote 1 vote 2 vote 3 vote 4 vote 5
2How to Create post in Bloger ?
Current Score :3
Your Score :
vote 1 vote 2 vote 3 vote 4 vote 5

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ASPRatingApp._Default" %>

<asp:Content runat="server" ID="FeaturedContent" ContentPlaceHolderID="FeaturedContent">
    
</asp:Content>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
    <script src="Scripts/jquery-1.7.1.js"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $(".rating-star-block .star").mouseleave(function () {
                $("#" + $(this).parent().attr('id') + " .star").each(function () {
                    $(this).addClass("outline");
                    $(this).removeClass("filled");
                });
            });
            $(".rating-star-block .star").mouseenter(function () {
                var hoverVal = $(this).attr('rating');
                $(this).prevUntil().addClass("filled");
                $(this).addClass("filled");
                $("#RAT").html(hoverVal);
            });
            $(".rating-star-block .star").click(function () {
                
                var v = $(this).attr('rating');
                var newScore = 0;
                var updateP = "#" + $(this).parent().attr('id') + ' .CurrentScore';
                var artID = $("#" + $(this).parent().attr('id') + ' .articleID').val();
                
                $("#" + $(this).parent().attr('id') + " .star").hide();
                $("#" + $(this).parent().attr('id') + " .yourScore").html("Your Score is : &nbsp;<b style='color:#ff9900; font-size:15px'>" + v + "</b>");
                $.ajax({
                    type: "POST",
                    url: "Default.aspx/SaveRating",
                    data: "{articleID: '" + artID + "',rate: '" + v + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        setNewScore(updateP, data.d);
                    },
                    error: function (data) {
                        alert(data.d);
                    }
                });
            });
        });
        function setNewScore(container, data) {
            $(container).html(data);
            $("#myElem").show('1000').delay(2000).queue(function (n) {
                $(this).hide(); n();
            });
        }
    </script>
    <style type="text/css">
        .rating-star-block .star.outline {
            background: url("images/star-empty-lg.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
        }
        .rating-star-block .star.filled {
            background: url("images/star-fill-lg.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
        }
        .rating-star-block .star {
            color:rgba(0,0,0,0);
            display : inline-block;
            height:24px;
            overflow:hidden;
            text-indent:-999em;
            width:24px;
        }
        a {
            color:#005782;
            text-decoration:none;
        }


    </style>
    <h3>Rating in ASP.NET</h3>
    <div>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" CellPadding="5">
            <Columns>
                <asp:BoundField HeaderText="Article ID" DataField="ArticleID" />
                <asp:BoundField HeaderText="Article Title" DataField="ArticleTitle" />
                <asp:TemplateField>
                    <ItemTemplate>
                        <div class="rating-star-block" id='div_<%#Container.DataItemIndex %>'>
                            <input type="hidden" class="articleID" value='<%#Eval("ArticleID") %>' />
                            Current Score :<span class="CurrentScore"><%#Eval("Score") %></span><br /><div class="yourScore">Your Score : </div> 
                            <a class="star outline" href="#" rating="1" title="vote 1"> vote 1</a>
                            <a class="star outline" href="#" rating="2" title="vote 2"> vote 2</a>
                            <a class="star outline" href="#" rating="3" title="vote 3"> vote 3</a>
                            <a class="star outline" href="#" rating="4" title="vote 4"> vote 4</a>
                            <a class="star outline" href="#" rating="5" title="vote 5"> vote 5</a>
                        </div>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
        <div id="myElem" style="position:absolute; top:10px; left:50%; display:none; background-color:yellow; padding:5px; border:1px solid red">
            Thank you for your rating!
        </div>
    </div>
</asp:Content>
Posted By : Sourav Mondal