如何为该AJAX代码实现Controller?

时间:2018-11-06 13:50:17

标签: javascript ajax asp.net-mvc razor

我正在为正在从事的项目实施投票系统。

我在Quiz.cshtml中使用了此脚本。 Ajax部分是我在SO端找到的一段代码的改编。我不确定选择答案来自何处。或者,如何在Controller中实现它?

我有这些问题:

  1. 保存投票操作。不确定控制器中的外观。或者,基本上可以使用AJAX代码。

  2. 如何链接超棒的字体而不是图像?下面的字体真棒的代码可以单独很好地工作。

        @*<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>*@
    

注意:我在C#中使用MVC ASP.NET项目编码。

  

具有以下AJAX代码的CSHTML文件:

    <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>
}

目前,我得到以下结果,但未显示上/下图像

enter image description here

0 个答案:

没有答案