Implementing Star Rating in MVC Using AngularUI

In my previous post, I explained about:

• Integrating Google Maps in ASP.NET MVC 5

In this post, I am going to explain about implementing Star Rating in MVC 5 Web Applications, using AngularUI, as a part of the AngularUI series.You may have seen in many websites, that they ask for feedback in the form of rating stars. No problem -- it very easy to implement. Just follow the below steps to create a StarRating system in your Web Application.

Implementing StarRating in MVC using AngularUI

1. Create a Web Application using the MVC template (Here, I am using Visual studio 2015).
2. It is better (Recommended) to implement an Application in Visual studio 2015 because VS2015 shows intelligence for Angular JS. This feature is not present in the previous versions.

The final output is like the screenshot shown below:

Step 1: Add Controller and View

1. Add a controller and name it (Here, I named it HomeController).
2. Create an Index Action method and add view to it.
3. Now, add the script ,given below, and reference file to an Index page.
   
   1. <script src="~/Scripts/angular.js"></script>
   2. <script src="~/Scripts/angular-animate.js"></script>
   3. <script src="~/Scripts/angular-ui/ui-bootstrap-tpls.js"></script>
   4. <script src="~/Scripts/app.js"></script><!--This is application script we wrote-->
   5. <link href="~/Content/bootstrap.css" rel="stylesheet" />

Step 2: Add Angular Script file

1. Now, create another script file for Angular code to implement StarRating in the Application.
2. Replace the Java Script file, with the code, given below:
   
   1. angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
   2. angular.module('ui.bootstrap.demo').controller('RatingDemoCtrl', function ($scope) {
   3. //These are properties of the Rating object
   4. $scope.rate = 7; //gets or sets the rating value
   5. $scope.max = 10; //displays number of icons(stars) to show in UI
   6. $scope.isReadonly = false; //prevents the user interaction if set to true.
   7. $scope.hoveringOver = function (value) {
   8. $scope.overStar = value;
   9. $scope.percent = 100 * (value / $scope.max);
   10. };
   11. //Below are the rating states
   12. //These are array of objects defining properties for all icons.
   13. //In default template below 'stateOn&stateOff' properties are used to specify icon's class.
   14. $scope.ratingStates = [
   15. { stateOn: 'glyphicon-ok-sign', stateOff: 'glyphicon-ok-circle' },
   16. { stateOn: 'glyphicon-star', stateOff: 'glyphicon-star-empty' },
   17. { stateOn: 'glyphicon-heart', stateOff: 'glyphicon-ban-circle' },
   18. { stateOn: 'glyphicon-heart' },
   19. { stateOff: 'glyphicon-off' }
   20. ];
   21. });

Step 3: Create UI