Как я могу заставить контроллер зарегистрировать значение голосов в базе данных?

Question

Я отчаянно пытаюсь найти решение для решения этой функции, но до сих пор я не получил никакой полезной помощи.

Я работаю над проектом ASP.NET Framework MVC, в котором я пытаюсь реализовать простую функцию оценки для класса Quiz. Но я немного растерялся, когда дело доходит до части AJAX и контроллера. Я не могу понять, как это реализовать, чтобы все голоса, относящиеся к конкретной викторине, регистрировались в таблице уведомлений.

Я создал класс уведомлений внутри модели для хранения результатов голосов:

  public class Notification
{
    public int  Id { get; set; }

    [Required] 
    public Quiz Quiz { get; set; }        

    public int UpVoteCount { get; private set; }

    public int DownVoteCount { get; private set; }

    public int Score => UpVoteCount - DownVoteCount;

    public void UpVote()
    {
        UpVoteCount++;
    }

    public void DownVote()
    {
        DownVoteCount++;
    }
}

Затем в папке под Controller / API / QuizsController.cs я реализовал этот метод действия, в котором я не уверен, что он реализован. Я как бы потерялся в этой части! :

 [HttpPost]
    public IHttpActionResult Vote(int id)
    {
        var userId = User.Identity.GetUserId();
        var quiz = _context.Guizzes.Single(m => m.Id == id && m.AuthorId == userId); 

        var notification = new Notification
        {
            Quiz = quiz, UpVote, DownVote, Score
        };
        _context.SaveChanges(); // save to the database
        return Ok();
    }

Затем в представлении я создал файл MyQuiz.cshtml, и там я реализовал приведенный ниже код HTML и AJAX, но, опять же, в этой части, безусловно, отсутствуют некоторые базовые конструкции для подключения контроллера для регистрации голосов в базе данных .:

    @model IEnumerable<VikingNotes.Models.Quiz>


@{
    ViewBag.Title = "Home Page";
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">

<ul class="quizs  verOffset7">
    @foreach (var quiz in Model)
    {
        @*<li> @quiz.Creation - @quiz.Author.UserName </li>*@

        <li>  
                <!-- Star Rating with font awesome-->
               <div class="rating-star ">
                    @for (int i = 0; i < 5; i++)
                    {
                        <i class="fas fa-star"></i>
                    }
                </div>   
   <!-- up-down arrow with font awesome-->
            <div class="article">
                    <a href="voteUp" i class='fas fa-caret-up' style='font-size:40px;color:darkgrey'></a> <br>
                    <a href="votedown" class='fas fa-caret-down' style='font-size:40px;color:darkgrey'></a>
             </div>  


        </li>
    }
</ul>

@section scripts
{

<script>    
        jQuery(function ($) {

            // Hook up our vote handlers
            $("a.vote").live('click', voteClick);

            function voteClick(event) {
                var voteLink, voteType, item, itemId;

                // Regardless of the below, we handle the event, so "consume" it
                event.stopPropagation();
                event.preventDefault();

                // Get the anchor element, wrapped in a jQuery instance
                voteLink = $(this);

                // See if the vote has already been done or is in progress
                if (voteLink.hasClass('done') || voteLink.hasClass('inprogress')) {
                    // Ignore the click, possibly tell the user why
                    return;
                }

                // Get the vote type
                voteType = voteLink.hasClass('up') ? 'up' : 'down';

                // Get the item we're voting on
                item = voteLink.closest('.article');

                // Get its ID
                itemId = item.attr('data-itemid');

                // If we didn't get an ID...
                if (!itemId) {
                    // ...report error
                    return;
                }

                // Mark "in progress" and initiate the vote; action continues
                // in our callbacks below
                voteLink.addClass('inprogress');
                $.ajax({
                    url: 'savevote',
                    data: { itemId: itemId, voteType: voteType },
                    type: 'POST',
                    success: votePostSuccess,
                    error: votePostError
                });

                // Called when the POST is successful
                function votePostSuccess(response) {
                    // The POST worked
                    voteLink.removeClass('inprogress');

                    // Did things work on the server?
                    if (response === "ok") { // Or whatever
                        // Yes, the vote was successfully recorded
                        voteLink.addClass('done');
                    }
                    else {
                        // Report an error to the user, the server couldn't record the vote
                    }
                }

                // Called when the POST fails for some reason (HTTP errors)
                function votePostError(xhr, statusText, err) {
                    // Not in progress anymore
                    voteLink.removeClass('inprogress');

                    // Report error to user
                }
            }
        });

</script>

}

Модель викторины выглядит следующим образом:

   public class Quiz
{
    public int Id { get; set; }
    public ApplicationUser User { get; set; }

    [Required]
    public string UserId{ get; set; }

    [Required, MaxLength(200)]
    public string Title { get; set; }

    [Required]
    [StringLength(Int32.MaxValue)]
    public string Description { get; set; }

    public DateTime Creation { get; set; }

    public Genre Genre { get; set; }

    public IEnumerable Genres { get; set; }

    [Required]
    public int GenreId { get; set; }
}

Я также попробовал другой подход: Я пытался принять этот учебник [https://www.jqueryscript.net/other/Awesome-Rating-System.html][1] с моим проектом, но я не смог получить никаких результатов. Я применил инструкции по ссылке, скачал библиотеки и добавил в проект.

Пожалуйста, несколько полезных душ! (Я должен добавить, что это мой первый проект с mvc, razor и AJAX)

Answer 1

Если то, что вы хотите сделать, это просто отправить рейтинг звезды в контроллер. Вы можете сделать следующее.

           @for (int i = 1; i <= 5; i++)
           {
               <a onclick"javascript: voteClick(@i, //ID of the quiz)">
                   <i class="fas fa-star"></i>
               </a>
           }

Это должно отправить функцию голосования и идентификатор теста в функцию. Оттуда вы можете просто использовать сообщение ajax, чтобы опубликовать его в методе контроллера.

РЕДАКТИРОВАТЬ: Обратите внимание, что вам нужно будет изменить параметры вашей функции JavaScript на:

           function voteClick(vote, id)
           {
                //Function stuff
           }