Question

我正拼命寻找解决此功能的解决方案，但到目前为止，我在任何地方都没有得到任何有用的帮助。

我正在研究ASP.NET Framework MVC项目，在这里我尝试为Quiz类实现简单的评级功能。但是当涉及到AJAX部分和Controller时，我有点迷失了。我无法弄清楚如何实现此目的，因此与特定测验有关的每张选票都会在Notification表中注册。

我在Model内部创建了一个Notification类来存储投票的结果：

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

应将投票评分和测验ID发送给该功能。从那里您可以简单地使用ajax发布将其发布到controller方法。

编辑：请注意，您需要将javascript函数的参数更改为：

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

如何使控制器将投票值注册到数据库？

1 个答案: