In this article I will explain with an example, how to implement 5 Star rating using jQuery in ASP.Net with C# and VB.Net.
 
 
 

jQuery Star Rating plugin

For complete documentation of jQuery Star Rating plugin, please refer the following link.
 
 

Database

I have made use of the following table UserRatings with the schema as follows.
Using jQuery Star Rating in ASP.Net
 
Note: You can download the database table SQL by clicking the download link below.
           Download SQL file
 
 

HTML Markup

The HTML Markup consists of following elements:
div – For displaying the jQuery Star Rating.
span – For displaying Average rating and Total rating.
<div class="rating_star"></div>
<hr />
<span id="rating"></span>
 
 

jQuery Star Rating plugin Implementation

Inside the HTML Markup, the following CSS file is inherited.
1. star-rating-svg.min.css
 
And then, the following JS files are inherited.
1. jquery.min.js
2. jquery.star-rating-svg.min.js
 
Inside the jQuerydocument ready event handler, the GetRatings function is called.

GetRatings

Inside the GetRatings method, an AJAX call is made to the GetRating WebMethod.
 
Note: The GetRating WebMethod is used to get the ratings saved in the SQL Server database table (discussed later).
 
The data received from the server is processed inside the jQuery AJAX call Success event handler and jQuery Star Rating plugin is applied to the HTML div.
And the following properties of jQuery Star rating plugin are set:
Properties:
initialRating – To set the initial rating value. Here it will be set based on the value returned from the GetRating WebMethod.
Note: : Here it will be set based on the value returned from the GetRating WebMethod.
 
starSize – It defines the size of each star.
useFullStars – It allows the stars to be displayed in full size.
 
When a star is clicked or rating is given, the callback function is executed which handled the submission of rating.
Inside the callback function, another AJAX call is made to the Rate WebMethod.
Note: The Rate WebMethod is used to save the ratings given by user in the SQL Server database table (discussed later).
 
Then, based on the response, an appropriate message is displayed using JavaScript Alert message Box.
<link href="https://cdn.jsdelivr.net/npm/star-rating-svg@3.5.0/src/css/star-rating-svg.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/star-rating-svg@3.5.0/dist/jquery.star-rating-svg.min.js"></script>
<script type="text/javascript">
    $(function () {
        GetRatings();
    });
 
    function GetRatings() {
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetRating",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                var result = eval(response.d)[0];
                if (result.Average > 0) {
                    $(".rating_star").starRating({
                        initialRating: result.Average,
                        starSize: 25,
                        useFullStars: true,
                        callback: function (value, $el) {
                            $.ajax({
                                type: "POST",
                                url: "Default.aspx/Rate",
                                data: "{rating: " + value + "}",
                                contentType: "application/json; charset=utf-8",
                                dataType: "json",
                                success: function (response) {
                                    alert("Your rating has been saved.");
                                },
                                failure: function (response) {
                                    alert('There was an error.');
                                }
                            });
                        }
                    });
 
                    $("#rating").html("Average Rating: " + result.Average + " Total Rating:" + result.Total);
                }
            },
            error: function (response) {
                alert('There was an error.');
            }
        });
    }
</script>
 
 

Namespaces

You will need to import the following namespaces.
C#
using System.Configuration;
using System.Data.SqlClient;
 
VB.Net
Imports System.Configuration
Imports System.Data.SqlClient
 
 

Fetching Average value based on Given Rating

Inside this GetRating WebMethod, the Average rating and the Total rating is calculated and fetched from database table.
The SQL Query is executed and the records are fetched using ExecuteReader method.
Note: For more details on ExecuteReader method, please refer my article Using SQLCommand ExecuteReader Example in ASP.Net with C# and VB.Net.
 
Finally, a JSON string is created consisting of Average rating and the Total rating and it is returned.
C#
[WebMethod]
public static string GetRating()
{
    string sql = "SELECT ROUND(ISNULL(CAST(SUM(Rating) AS NUMERIC(5, 2)) / COUNT(Rating), 0), 1) Average";
    sql += ", COUNT(Rating) Total FROM UserRatings";
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand(sql, con))
        {
            con.Open();
            string json = string.Empty;
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                sdr.Read();
                json += "[ {";
                json += string.Format("Average: {0}, Total: {1}", sdr["Average"], sdr["Total"]);
                json += "} ]";
                sdr.Close();
            }
            con.Close();
            return json;
        }
    }
}
 
VB.Net
<WebMethod()>
Public Shared Function GetRating() As String
    Dim sql As String = "SELECT ROUND(ISNULL(CAST(SUM(Rating) AS NUMERIC(5, 2)) / COUNT(Rating), 0), 1) Average"
    sql += ", COUNT(Rating) Total FROM UserRatings"
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(constr)
        Using cmd As SqlCommand = New SqlCommand(sql, con)
            con.Open()
            Dim json As String = String.Empty
            Using sdr As SqlDataReader = cmd.ExecuteReader()
                sdr.Read()
                json += "[ {"
                json += String.Format("Average: {0}, Total: {1}", sdr("Average"), sdr("Total"))
                json += "} ]"
                sdr.Close()
            End Using
            con.Close()
            Return json
        End Using
    End Using
End Function
 
 

Inserting Rating into the SQL Server Database

Inside this Rate WebMethod, the rating given by user is inserted into the UserRatings table using ExecuteNonQuery method.
Note: For more details on ExecuteNonQuery method, please refer my article Understanding SqlCommand ExecuteNonQuery in C# and VB.Net.
 
C#
[WebMethod]
public static void Rate(int rating)
{
    string sql = "INSERT INTO UserRatings VALUES(@Rating)";
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand(sql, con))
        {
            cmd.Parameters.AddWithValue("@Rating", rating);
            con.Open();
            cmd.ExecuteNonQuery();
            con.Close();
        }
    }
}
 
VB.Net
<WebMethod>
Public Shared Sub Rate(ByVal rating As Integer)
    Dim sql As String = "INSERT INTO UserRatings VALUES(@Rating)"
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(constr)
        Using cmd As SqlCommand = New SqlCommand(sql, con)
            cmd.Parameters.AddWithValue("@Rating", rating)
            con.Open()
            cmd.ExecuteNonQuery()
            con.Close()
        End Using
    End Using
End Sub
 
 

Screenshot

Using jQuery Star Rating in ASP.Net
 
 

Demo

Video Demo
 
 

Downloads