How to Implement 5 star rating system in ASP.NET inside Gridview

Step - 1 : Create New Project.

Go to File > New > Project > Select asp.net web forms application > Entry Application Name > Click OK.

Step-2: Add a Database.

Go to Solution Explorer > Right Click on App_Data folder > Add > New item > Select SQL Server Database Under Data > Enter Database name > Add.

Step-3: Create 2 table for Save/ Fetch Data.

Open Database > Right Click on Table > Add New Table > Add Columns > Save > Enter table name > Ok.

In this example, I have used two tables as below

Table1

Table2

Step-4: Add Entity Data Model.

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select ADO.net Entity Data Model under data > Enter model name > Add.
A popup window will come (Entity Data Model Wizard) > Select Generate from database > Next >

Chose your data connection > select your database > next > Select tables > enter Model Namespace > Finish.

Step-5: Add a Class.

Right Click on Solution Explorer > Add > Class > Enter Class Name > Add.
Here is the class. 

            namespace ASPRatingApp
            {
                public class ArticleWithScore
                {
                    public int ArticleID { get; set; }
                    public string ArticleTitle { get; set; }
                    public int Score { get; set; }
                }
            }
        

Step-6: Add a Webpage and Design for show/save rating from/to database.

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select web form/ web form using master page under Web > Enter page name > Add.

JS Code 

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

HTML Code 

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

Step-7: Write code in page_load event for fetch data from database and show in Gridview.

            
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    PopulateArticle();
                }
            }
        

Here is the function

        
            private void PopulateArticle()
            {
                using (MyDatabaseEntities dc = new MyDatabaseEntities())
                {
                    var v = (from a in dc.Articles
                             join b in dc.ArticleScores on a.ArticleID equals b.ArticleID into bb
                             from b in bb.DefaultIfEmpty()
                             group new { a, b } by new { a.ArticleID, a.ArticleTitle } into AA
                             select new
                             {
                                 AA.Key.ArticleID,
                                 AA.Key.ArticleTitle,
                                 Score = AA.Sum(a => a.b.Score) == null ? 0 : AA.Sum(a => a.b.Score),
                                 Count = AA.Count()
                             });
                    List<ArticleWithScore> AWS = new List<ArticleWithScore>();
                    foreach (var i in v)
                    {
                        AWS.Add(new ArticleWithScore
                        {
                             ArticleID = i.ArticleID,
                              ArticleTitle = i.ArticleTitle,
                               Score = i.Score/i.Count
                        });
                        GridView1.DataSource = AWS;
                        GridView1.DataBind();
                    }
                }
            }
        

Step-8: Write code(function) for Save users rating into database which is calling from Jquery.

               Import this 2 Namespace 

             using System.Web.Services;
            using System.Web.Script.Services;
            

            
            [WebMethod]
            [ScriptMethod(ResponseFormat= ResponseFormat.Json)]
            public static int SaveRating(int articleID, int rate)
            {
                int result = 0;
                using (MyDatabaseEntities dc = new MyDatabaseEntities())
                {
                    dc.ArticleScores.Add(new ArticleScore
                    {
                         ArticleID = articleID,
                          ScoreID = 0,
                           Score = rate,
                            CreateDate = DateTime.Now
                    });
                    dc.SaveChanges();
 
                    var newScore = (from a in dc.ArticleScores
                                    where a.ArticleID.Equals(articleID)
                                    group a by a.ArticleID into aa
                                    select new
                                    {
                                        Score = aa.Sum(a=>a.Score)/aa.Count()
                                    }).FirstOrDefault();
                    result = newScore.Score;
                }
                return result;
            }
        

Step-9: Run Application