Display progressive percentage on RadioButton selection using AngularJS in ASP.Net MVC

mahesh213
 
on Dec 14, 2020 11:04 PM
Sample_517766.zip
786 Views

Hi,

my requirement is that after selecting relevant option at particular question need to display progress bar.

Display (Show) records on Previous and Next Button Click using AngularJS in ASP.Net MVC

can you please check code

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/angular-utils-pagination@0.11.1/dirPagination.js"></script>
    <script type="text/javascript">
        var app = angular.module('surveyApp', ['angularUtils.directives.dirPagination']);
        app.controller('surveyCtrl', function ($scope, $http) {
            $scope.Data = [];
            $scope.questionSet = [];
            $scope.Index = 0;
            $http({
                method: 'Get',
                url: '/home/GetData'
            }).then(function (result) {
                $scope.Data = result.data;
                for (var i = 0; i < $scope.Data.length; i++) {
                    if (i < $scope.Index + 1) {
                        $scope.questionSet.push($scope.Data[i]);
                    }
                }
            });
            $scope.NextPrev = function (nextprev) {
                if (nextprev == 'next') {
                    $scope.Index = $scope.Index + 1;
                } else if (nextprev == 'prev') {
                    $scope.Index = $scope.Index - 1;
                }
                $scope.questionSet = [];
                for (var i = 0; i < $scope.Data.length; i++) {
                    if (i >= $scope.Index) {
                        if (i < $scope.Index + 1) {
                            $scope.questionSet.push($scope.Data[i]);
                        }
                    }
                }
            }
            $scope.Percentage = 0;
            $scope.Select = function () {
                $scope.Answered = 0;
                var ele = document.getElementsByName('gender');
                for (i = 0; i < ele.length; i++) {
                    if (ele[i].checked) {
                        $scope.Answered = $scope.Answered + 1;
                    }
                }
                $scope.Answered = $scope.Answered + 1;
                $scope.Percentage = Math.round(parseInt(100) - ((parseInt($scope.Data.length - $scope.Answered)
                    / parseInt($scope.Data.length)) * parseInt(100)));
            }
        });
    </script>
</head>
<body>
    <div>
        <div class="container" ng-app="surveyApp" ng-controller="surveyCtrl">
            <div ng-repeat="customer in questionSet">
                {{$index+1}}.{{customer.Questions.QName}}
                <form action="">
                    <div ng-repeat="options in customer.Questionoptions" style="display: inline;">
                        <input type="radio" name="gender" ng-model="question.random" ng-value="options.Options"
                               ng-click="Select()">
                        {{options.Options}}
                    </div>
                </form>
            </div>
            <br />
            <button type="button" ng-click="NextPrev('prev')" ng-disabled="Index == 0">Previous</button>
            <button type="button" ng-click="NextPrev('next')" ng-disabled="Index == questionSet.length+1">Next</button>
            <hr />
            <div ng-style="{'width' : '100%','background-color':'#E9E9E9' }">
                <div ng-style="{'width' : Percentage+'%','background-color':'#337AB7','text-align': 'center' }">
                    <span style="color: White;">{{Percentage}}%</span>
                </div>
            </div>
        </div>

    </div>
</body>
</html>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Dec 15, 2020 05:51 AM
on Dec 22, 2020 12:45 AM

Hi mahesh213,

Check with below sample.

Controller

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }

    public JsonResult GetData()
    {
        List<Question> questions = new List<Question>();
        questions.Add(new Question { QId = 1, QName = "question#1" });
        questions.Add(new Question { QId = 2, QName = "question#2" });
        questions.Add(new Question { QId = 3, QName = "question#3" });

        List<QuestionOptions> questionOptions = new List<QuestionOptions>();
        questionOptions.Add(new QuestionOptions { QopId = 1, QId = 1, Options = "answer#1" });
        questionOptions.Add(new QuestionOptions { QopId = 2, QId = 1, Options = "answer#2" });
        questionOptions.Add(new QuestionOptions { QopId = 3, QId = 1, Options = "answer#3" });
        questionOptions.Add(new QuestionOptions { QopId = 4, QId = 2, Options = "answer#4" });
        questionOptions.Add(new QuestionOptions { QopId = 5, QId = 2, Options = "answer#5" });
        questionOptions.Add(new QuestionOptions { QopId = 6, QId = 2, Options = "answer#6" });
        questionOptions.Add(new QuestionOptions { QopId = 7, QId = 3, Options = "answer#7" });
        questionOptions.Add(new QuestionOptions { QopId = 8, QId = 3, Options = "answer#8" });
        questionOptions.Add(new QuestionOptions { QopId = 9, QId = 3, Options = "answer#9" });
        List<QuizModel> CO = new List<QuizModel>();

        var cust = questions.OrderBy(a => a.QId).ToList();
        foreach (var i in cust)
        {
            var orders = questionOptions.Where(a => a.QId.Equals(i.QId)).OrderBy(a => a.QopId).ToList();
            CO.Add(new QuizModel
            {
                Questions = i,
                Questionoptions = orders
            });
        }

        return new JsonResult { Data = CO, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
    }

    public class Question
    {
        public int QId { get; set; }
        public string QName { get; set; }
        public string IsSelected { get; set; }
    }

    public class QuestionOptions
    {
        public int QopId { get; set; }
        public int QId { get; set; }
        public string Options { get; set; }
    }

    public class QuizModel
    {
        public Question Questions { get; set; }
        public List<QuestionOptions> Questionoptions { get; set; }
    }
}

View

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('surveyApp', []);
        app.controller('surveyCtrl', function ($scope, $http) {
            $scope.Data = [];
            $scope.questionSet = [];
            $scope.Index = 0;
            $http({
                method: 'Get',
                url: '/Home/GetData'
            }).then(function (result) {
                $scope.Data = result.data;
                for (var i = 0; i < $scope.Data.length; i++) {
                    if (i < $scope.Index + 1) {
                        $scope.questionSet.push($scope.Data[i]);
                    }
                }
            });

            $scope.NextPrev = function (nextprev) {
                if (nextprev == 'next') {
                    $scope.Index = $scope.Index + 1;
                } else if (nextprev == 'prev') {
                    $scope.Index = $scope.Index - 1;
                }
                $scope.questionSet = [];
                for (var i = 0; i < $scope.Data.length; i++) {
                    if (i >= $scope.Index) {
                        if (i < $scope.Index + 1) {
                            $scope.questionSet.push($scope.Data[i]);
                        }
                    }
                }
            }

            $scope.Percentage = 0;
            $scope.Select = function () {
                $scope.Answered = 0;
                for (i = 0; i < $scope.Data.length; i++) {
                    if ($scope.Data[i].Questions.IsSelected != null) {
                        $scope.Answered += 1;
                    }
                }

                $scope.Percentage = Math.round(parseInt(100) - ((parseInt($scope.Data.length - $scope.Answered)
                    / parseInt($scope.Data.length)) * parseInt(100)));
            }
        });
    </script>
    <div class="container" ng-app="surveyApp" ng-controller="surveyCtrl">
        <div ng-repeat="questionSet in questionSet">
            {{questionSet.Questions.QId}}.{{questionSet.Questions.QName}}
            <form action="">
                <div ng-repeat="options in questionSet.Questionoptions" style="display: inline;">
                    <input type="radio" name="gender" ng-model="questionSet.Questions.IsSelected" ng-value="options.Options"
                           ng-click="Select()">
                    {{options.Options}}
                </div>
            </form>
        </div>
        <br />
        <button type="button" ng-click="NextPrev('prev')" ng-disabled="Index == 0">Previous</button>
        <button type="button" ng-click="NextPrev('next')" ng-disabled="Index == questionSet.length+1">Next</button>
        <hr />
        <div ng-style="{'width' : '100%','background-color':'#E9E9E9' }">
            <div ng-style="{'width' : Percentage+'%','background-color':'#337AB7','text-align': 'center' }">
                <span style="color: White;">{{Percentage}}%</span>
            </div>
        </div>
    </div>
</body>
</html>

Screenshot