How can I make a Like/Dislike button in an Asp .net core web site like a blog? - ajax

Question

I am new to web development with .net core mvc and am building a web application that works much like Wordpress.
Basically I am building a site in which articles will be posted by an administrator and the user will come to read these articles there.
I must now make a "like" button and a "dislike" button to allow the reader to give his opinion. The process is very simple for the moment, I created an Article table in my database and I added two columns to it: NumberOfLikes and NumberOfDislikes.
Then I added the two buttons on the article page. What I want now is like I said, to make sure that when we click on the like button, it adds +1 to NumberOfLikes and conversely when we click on the dislike button, it adds +1 a NumbreOfDislikes.
I can't seem to figure out how to do this feature that's why I'm turning to you for help.
Thanks in advance.
Edit
this is the Article Model class class:
public class Article{
public long Id{ get; set; }
public long NumberOfLikes{ get; set; }
public long NumberOfDisLikes{ get; set; }
}
This is the Index action in ArticleController.cs
public async Task<IActionResult> Index(long id)
{
Article article = await _context.Articles
.Where(a => a.Id == id)
.FirstOrDefaultAsync();
if (article == null)
{
return NotFound();
}
ArticleViewModel model = new ArticleViewModel();
model.Article = article;
await GetDataForLayout(_context);
await _context.SaveChangesAsync();
return View(model);
}
and in the /Article/Index.cshtml View we have two buttons like this:
<div>
<button class="btn btn-success like-article">
<i class="fas fa-thumbs-up"></i>
<span>Like #article.NumberOfLikes</span>
</button>
<button class="btn btn-danger dislike-article">
<i class="fas fa-thumbs-down"></i>
<span>DisLike #article.NumberOfDisLikes</span>
</button>
</div>
I don't know if putting #article.NumberOfLikes can allow me to see the updated values but it's the values that I want there.
So I Want to click on these buttons and update values of NumberOfLikes/NumberOfDislikes of the article without changing the page or refresh it and make the changes visible by the reader.

Answer 1

You can use to replace buttons,try to pass id and like or dislike to action,then update the article.Here is a demo with efcore:
Article:
public class Article
{
public int Id { get; set; }
public int NumberOfLikes { get; set; }
public int NumberOfDislikes { get; set; }
}
Actions:
public async Task<IActionResult> Index()
{
return View(_context.Article.ToList());
}
public async Task<List<Article>> Edit(int id, bool like)
{
var article = await _context.Article.FindAsync(id);
if (like)
{
article.NumberOfLikes++;
}
else {
article.NumberOfDislikes++;
}
_context.Update(article);
await _context.SaveChangesAsync();
return _context.Article.ToList();
}
Index.cshtml:
#model IEnumerable<WebApplication_efcore.Models.Article>
<<table class="table">
<thead>
<tr>
<th>
#Html.DisplayNameFor(model => model.Id)
</th>
<th>
#Html.DisplayNameFor(model => model.NumberOfLikes)
</th>
<th>
#Html.DisplayNameFor(model => model.NumberOfDislikes)
</th>
<th></th>
</tr>
</thead>
<tbody id="tbody1">
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Id)
</td>
<td>
#Html.DisplayFor(modelItem => item.NumberOfLikes)
</td>
<td>
#Html.DisplayFor(modelItem => item.NumberOfDislikes)
</td>
<td>
<button onclick="Edit(#item.Id,true)">Like</button>
<button onclick="Edit(#item.Id,false)">Dislike</button>
</td>
</tr>
}
</tbody>
</table>
<script>
function Edit(id,like)
{
$.ajax({
type: "POST",
data: { id: id, like: like },
url: 'Edit',
}).done(function (result) {
var html=""
for (var i = 0; i < result.length; i++)
{
html += '<tr><td>' + result[i].id + '</td><td>' + result[i].numberOfLikes + '</td><td>' + result[i].numberOfDislikes + '</td><td><button onclick="Edit(' + result[i].id + ',true)">Like</button><button onclick="Edit(' + result[i].id +',false)">Dislike</button></td></tr>'
}
document.getElementById("tbody1").innerHTML = html;
});
}
</script>
result: