0

I'm trying to implement a voting system for a project I am working on.

I used this script in my Quiz.cshtml. The ajax part is an adaptition of a piece of code that I found on the SO side. I am not sure where the select, answer come from. Or, how it was implemented in the Controller?

I have these issues:

  1. Save the action upon voting. Not sure how it should look like in the Controller. Or, basically get the AJAX code to work.

  2. How can I link font awesome instead of image? The below code with font awesome works fine, seperately.

        @*<div class="votecell post-layout--left">
        <div class="votes">
            <i class='fas fa-caret-up' style='font-size:48px;color:darkgrey'></i> 
            <br/>
            <i class='fas fa-caret-down' style='font-size:48px;color:darkgrey'></i>
        </div>
    </div>*@

Notes: I use a MVC ASP.NET project coding in C#.

Cshtml file with AJAX code below:

    <ul class="quizs">
    @foreach (var quiz in Model)
    {              
        <li>          
            <div class="details">

                <div class="rating-star">
                    @for (int i = 0; i < 5; i++)
                    {
                        <i class="fas fa-star"></i>
                    }
                </div>
            </div>

            <div id=@quiz.Id class="answer">
                <img src="Vote_up.png">
                <div class="score">0</div>
                <img src="Vote_down.png">>
            </div>
        </li>
    }
</ul>


@section scripts
{
    <script>
        $(function() {
            $('div.answer img.vote').click(function() {
                var id = $(this).parents('div.answer').attr('id').split('_')[1];
                var vote_type = $(this).hasClass('up') ? 'up' : 'down';
                if($(this).hasClass('selected')) {
                    $.post('/vote/', {id: id, type: vote_type}, function(json) {
                        if(json.success == 'success') {
                            $('#answer_' + id)
                                .find('img.' + vote_type);
                            .attr('src', 'vote_' + vote_type + '_selected.png')
                                .addClass('selected');
                            $('div.score', '#answer_' + id).html(json.score);
                        }
                    });
                } else {
                    $.post('/remove_vote/', {id: id, type: vote_type}, function(json) {
                        if(json.success == 'success') {
                            $('#answer_' + id)
                                .find('img.' + vote_type);
                            .attr('src', 'vote_' + vote_type + '.png')
                                .removeClass('selected');
                            $('div.score', '#answer_' + id).html(json.score);
                        }
                    });                
                }
            });
        });
    </script>
}

For the moment I get the following result, where it's not showing the up/down image

enter image description here

  • From the code that handles the ajax response it looks like the image filenames are vote_up.png and vote_down.png not upvote.png and downvote.png. You say you want to save it but the work has been done to send the vote info to /vote/ and /remove_vote/, did you write this or are you trying to adapt it for your own use? What files handle those endpoints? – James Nov 06 '18 at 13:59
  • I changded the image names, yet the same output. I adapted this code to my own use with some changes. –  Nov 06 '18 at 14:30
  • With endpoints do you mean the selected, answer? I only have a Quiz class so far. –  Nov 06 '18 at 14:50
  • I would assume you have some server-side code set up to handle ajax requests to /vote/ and /remove_vote/ as your code indicates. – James Nov 06 '18 at 14:53
  • Oh, no. I dont have the server side. It is obviously due to lack of the action handling it is not working. Could you suggest some tips how it would look like,please? –  Nov 06 '18 at 15:01
  • Not off the top of my head, it's been a while since .NET MVC and what you are asking for is a fair bit of work. Some similar questions that may help [here](https://stackoverflow.com/questions/16186083/making-a-simple-ajax-call-to-controller-in-asp-net-mvc), [here](https://stackoverflow.com/questions/14091194/calling-a-c-sharp-method-with-jquery), [here](https://stackoverflow.com/questions/227624/asp-net-mvc-controller-actions-that-return-json-or-partial-html) – James Nov 06 '18 at 15:58

0 Answers0