ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Implement Bootstrap Star Rating using AngularJS and WebService in ASP.Net<p>Hi&nbsp;rani,</p> <p>Using&nbsp;angular ui.bootstrap.rating i have created the example.</p> <p>Check this example. Now please take its reference and correct your code.</p> <p><span style="text-decoration: underline;"><strong>Database</strong></span></p> <pre class="brush: sql">CREATE TABLE UserRatings ( Id INT PRIMARY KEY IDENTITY, Rating INT )</pre> <p><strong><span style="text-decoration: underline;">HTML</span></strong></p> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js&#34;&gt;&lt;/script&gt; &lt;link rel=&#34;stylesheet&#34; type=&#34;text/css&#34; href=&#34;//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&#34; /&gt; &lt;script type=&#34;text/javascript&#34;&gt; var app = angular.module(&#39;MyApp&#39;, [&#39;ngAnimate&#39;, &#39;ngSanitize&#39;, &#39;ui.bootstrap&#39;]); app.controller(&#39;MyController&#39;, function ($scope, $http) { GetRatings($scope, $http); $scope.rate = 0; $scope.total = 0; $scope.max = 10; $scope.hoveringOver = function (value) { $scope.overStar = value; $scope.percent = 100 * (value / $scope.max); }; $scope.saveRate = function () { Rate($scope, $http, $scope.rate) }; }); function GetRatings($scope, $http) { $http.post(&#34;WebService.asmx/GetRating&#34;, { headers: { &#39;Content-Type&#39;: &#39;application/json&#39;} }) .then(function (response) { var result = eval(response.data.d)[0]; $scope.rate = result.Average; $scope.total = result.Total; }); } function Rate($scope, $http, value) { $http.post(&#34;WebService.asmx/Rate&#34;, { rating: value }, { headers: { &#39;Content-Type&#39;: &#39;application/json&#39;} }) .then(function (response) { GetRatings($scope, $http); }); } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div ng-app=&#34;MyApp&#34; ng-controller=&#34;MyController&#34;&gt; &lt;span uib-rating ng-model=&#34;rate&#34; max=&#34;max&#34; on-hover=&#34;hoveringOver(value)&#34; on-leave=&#34;overStar = null&#34; ng-click=&#34;saveRate()&#34; aria-labelledby=&#34;default-rating&#34;&gt;&lt;/span&gt; &lt;span ng-class=&#34;{&#39;label-warning&#39;: percent&lt;30, &#39;label-info&#39;: percent&gt;=30 &amp;&amp; percent&lt;70, &#39;label-success&#39;: percent&gt;=70}&#34; class=&#34;label&#34; ng-show=&#34;overStar&#34; &gt;{{percent}}%&lt;/span&gt; &lt;br /&gt; Average Rating: {{rate}} &lt;br /&gt; Total Rating: {{total}} &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><strong><span style="text-decoration: underline;">WebService</span></strong></p> <p><strong>C#</strong></p> <pre class="brush: csharp">using System.Configuration; using System.Data; using System.Data.SqlClient; using System.Web.Services; [WebService(Namespace = &#34;http://tempuri.org/&#34;)] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. [System.Web.Script.Services.ScriptService] public class WebService : System.Web.Services.WebService { [WebMethod] public string GetRating() { string sql = &#34;SELECT ROUND(ISNULL(CAST(SUM(Rating) AS NUMERIC(5, 2)) / COUNT(Rating), 0), 1) Average&#34;; sql += &#34;, COUNT(Rating) Total FROM UserRatings&#34;; string constr = ConfigurationManager.ConnectionStrings[&#34;constr&#34;].ConnectionString; using (SqlConnection con = new SqlConnection(constr)) { using (SqlCommand cmd = new SqlCommand(sql)) { cmd.CommandType = CommandType.Text; cmd.Connection = con; con.Open(); string json = string.Empty; using (SqlDataReader sdr = cmd.ExecuteReader()) { sdr.Read(); json += &#34;[ {&#34;; json += string.Format(&#34;Average: {0}, Total: {1}&#34;, sdr[&#34;Average&#34;], sdr[&#34;Total&#34;]); json += &#34;} ]&#34;; sdr.Close(); } con.Close(); return json; } } } [WebMethod] public void Rate(int rating) { string constr = ConfigurationManager.ConnectionStrings[&#34;constr&#34;].ConnectionString; using (SqlConnection con = new SqlConnection(constr)) { using (SqlCommand cmd = new SqlCommand(&#34;INSERT INTO UserRatings VALUES(@Rating)&#34;)) { using (SqlDataAdapter sda = new SqlDataAdapter()) { cmd.CommandType = CommandType.Text; cmd.Parameters.AddWithValue(&#34;@Rating&#34;, rating); cmd.Connection = con; con.Open(); cmd.ExecuteNonQuery(); con.Close(); } } } } } </pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">Imports System.Configuration Imports System.Data Imports System.Data.SqlClient Imports System.Web.Services &#39; To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. &lt;System.Web.Script.Services.ScriptService()&gt; _ &lt;WebService(Namespace:=&#34;http://tempuri.org/&#34;)&gt; _ &lt;WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)&gt; _ &lt;Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()&gt; _ Public Class WebService Inherits System.Web.Services.WebService &lt;WebMethod()&gt; Public Function GetRating() As String Dim sql As String = &#34;SELECT ROUND(ISNULL(CAST(SUM(Rating) AS NUMERIC(5, 2)) / COUNT(Rating), 0), 1) Average&#34; sql += &#34;, COUNT(Rating) Total FROM UserRatings&#34; Dim constr As String = ConfigurationManager.ConnectionStrings(&#34;constr&#34;).ConnectionString Using con As SqlConnection = New SqlConnection(constr) Using cmd As SqlCommand = New SqlCommand(sql) cmd.CommandType = CommandType.Text cmd.Connection = con con.Open() Dim json As String = String.Empty Using sdr As SqlDataReader = cmd.ExecuteReader() sdr.Read() json += &#34;[ {&#34; json += String.Format(&#34;Average: {0}, Total: {1}&#34;, sdr(&#34;Average&#34;), sdr(&#34;Total&#34;)) json += &#34;} ]&#34; sdr.Close() End Using con.Close() Return json End Using End Using End Function &lt;WebMethod()&gt; Public Sub Rate(ByVal rating As Integer) Dim constr As String = ConfigurationManager.ConnectionStrings(&#34;constr&#34;).ConnectionString Using con As SqlConnection = New SqlConnection(constr) Using cmd As SqlCommand = New SqlCommand(&#34;INSERT INTO UserRatings VALUES(@Rating)&#34;) Using sda As SqlDataAdapter = New SqlDataAdapter() cmd.CommandType = CommandType.Text cmd.Parameters.AddWithValue(&#34;@Rating&#34;, rating) cmd.Connection = con con.Open() cmd.ExecuteNonQuery() con.Close() End Using End Using End Using End Sub End Class</pre> <p><strong><span style="text-decoration: underline;">Screenshot</span></strong></p> <p><strong><span style="text-decoration: underline;"><img src="https://i.imgur.com/x8Ctcma.gif" alt="" width="238" height="92" /></span></strong></p> <p>For more details on&nbsp;angular&nbsp;ui.bootstrap.rating refer below link.&nbsp;</p> <p><a href="http://angular-ui.github.io/bootstrap/">http://angular-ui.github.io/bootstrap/</a></p>https://www.aspforums.net:443/Threads/196115/Implement-Bootstrap-Star-Rating-using-AngularJS-and-WebService-in-ASPNet/https://www.aspforums.net:443/Threads/196115/Implement-Bootstrap-Star-Rating-using-AngularJS-and-WebService-in-ASPNet/Fri, 26 Jul 2019 05:39:01 GMT