How Can I Get the Controller to Register the Value of Votes to the Database? - ajax

Question

I'm desperately trying to find out a solution towards solving this feature, but I haven't really got any useful help anywhere so far.
I'm working on a ASP.NET Framework MVC project, where I try to implement a simple rating feature for a Quiz class. But I'm kind of lost when it comes to the AJAX part and the Controller.
I can't figure it out how to implement this so every votes related to a specific Quiz gets registered in the Notification table.
I created a Notification class inside Model to store the results of Votes:
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++;
}
}
Then in the folder under Controller/API/QuizsController.cs I have implemented this action method, which I'm unsure of it's implementation. I'm kind of lost in this part! :
[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();
}
Then in the View I created MyQuiz.cshtml file and in there I have implemented the below html and AJAX code, but again this part certainly lacks some basic constructions to connect the controller to register the votes in the database.:
#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>
}
The Quiz Model looks like this:
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; }
}
I also tried another approach:
I tried to adopt this tutorial [https://www.jqueryscript.net/other/Awesome-Rating-System.html][1]
with my project, but I couldn't get any results. I applied the instructions on the link and I downloaded the libraries and added to the project.
Please, some helpful souls!
(I've to add that it's my first project with mvc, razor and AJAX)

Answer 1

If what you want to do is simply send the star rating to the controller. You can do the following.
#for (int i = 1; i <= 5; i++)
{
<a onclick"javascript: voteClick(#i, //ID of the quiz)">
<i class="fas fa-star"></i>
</a>
}
That should send the vote rating and the id of the quiz to the function. From there you can simply use an ajax post to post it to the controller method.
EDIT: Note that you will need to change the parameters of your javascript function to:
function voteClick(vote, id)
{
//Function stuff
}