StarRating with Angualr UI in MVC5 ~ MiTechDev.com

Friday, 1 July 2016

StarRating with Angualr UI in MVC5

06:16:00 Posted by raviteja swayampu , , No comments
Hi every one in previous post i explained about Integrating Google Maps in ASP.NET MVC 5 application.In this post i am going explain about Implementing StartRating in MVC 5 web application using Angular UI as a part of the Angular UI series.You may in many of the websites that they are asking the 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 Angular UI

1.Create a web application using MVC template(Here i am using Visual studio 2015).
2.It is better(Recommend) to implement application in Visual studio 2015 because VS2015 shows intelligence for Angular JS.This feature is not present in previous versions.
The final output is like below screenshot.

Step1: Add Controller and View
1. Add a controller and name it(Here i named it as HomeController).
2.Create a Index Action method and Add view to it.
3.Now Add below script reference file to Index page..
<script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/angular-animate.js"></script>
    <script src="~/Scripts/angular-ui/ui-bootstrap-tpls.js"></script>
    <script src="~/Scripts/app.js"></script><!--This is application script we wrote-->
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
 Step2: Add Angular Script file
1.Now create another script file for angular code to implement StarRating in application.
2.Replace the java script file with below code.
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('RatingDemoCtrl', function ($scope) {
    //These are properties of the Rating object
    $scope.rate = 7;    //gets or sets the rating value
    $scope.max = 10;    //displays number of icons(stars) to show in UI
    $scope.isReadonly = false;  //prevents the user interaction if set to true.
    $scope.hoveringOver = function (value) {
        $scope.overStar = value;
        $scope.percent = 100 * (value / $scope.max);
    };
    //Below are the rating states
    //These are array of objects defining properties for all icons. 
    //In default template below 'stateOn&stateOff' properties are used to specify icon's class.
    $scope.ratingStates = [
      { stateOn: 'glyphicon-ok-sign', stateOff: 'glyphicon-ok-circle' },
      { stateOn: 'glyphicon-star', stateOff: 'glyphicon-star-empty' },
      { stateOn: 'glyphicon-heart', stateOff: 'glyphicon-ban-circle' },
      { stateOn: 'glyphicon-heart' },
      { stateOff: 'glyphicon-off' }
    ];
});
Step3: Create UI 
3.Replace add the below code in the Index.cshtml page.
@{
    Layout = null;
}
<h2>Star Rating in Angualr UI</h2>
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>   
    <title>www.mitechdev.com</title>
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/angular-animate.js"></script>
    <script src="~/Scripts/angular-ui/ui-bootstrap-tpls.js"></script>
    <script src="~/Scripts/app.js"></script><!--This is application script we wrote-->
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
</head>
<body style="margin-left:30px;">
    <div ng-controller="RatingDemoCtrl">
        <!--Angular element that shows rating images-->
        <uib-rating ng-model="rate" max="max"
                    read-only="isReadonly" 
                    on-hover="hoveringOver(value)"
                    on-leave="overStar = null"
                    titles="['one','two','three']" 
                    aria-labelledby="default-rating">
        </uib-rating>
        <!--span element shows the percentage of select-->
        <span class="label" ng-class="{'label-warning': percent<30, 'label-info': percent>=30 && percent<70, 'label-success': percent>=70}"
              ng-show="overStar && !isReadonly">{{percent}}%</span>
        <!--This element shows rating selected,Hovering and IS hovering or not(true/false)-->
        <pre style="margin:15px 0;width:400px;">Rate: <b>{{rate}}</b> - Readonly is: <i>{{isReadonly}}</i> - Hovering over: <b>{{overStar || "none"}}</b></pre>
        <!--button clears all the values in above <pre> tag-->
        <button type="button" class="btn btn-sm btn-danger" ng-click="rate = 0" ng-disabled="isReadonly">Clear</button>
        <!--this button toggles the selection of star rating-->
        <button type="button" class="btn btn-sm btn-default" ng-click="isReadonly = ! isReadonly">Toggle Readonly</button>
        <hr />
        <div>Mitechdev.com Application-2016</div>
    </div>
</body>
</html>
2.Here, we need to talk about some expressions used in <uib-rating> tag.
1.on-hover: This expression is called when user places mouse on particular icon.In above code hoveringOver() is called.
2.on-leave: This expression is called when user leaves the mouse on particular icon.
3.titles: Using this expression we can assign an array of titles to the each icon.
Download the source code here Source code

Conclusion

I hope this tutorial may help ful for many readers and developers.Please subscribe to this blog and follow this blog for daily updates.

0 comments:

Post a Comment