How To Implement Like And Dislike Function In MVC

Introduction

While working on a forum project, I implemented like and dislike for a given topic. The user has the option to either Like or Dislike one item at a time. If the user clicks on Like, the Like option should be disabled and if the user clicks on Dislike, the Dislike option should be disabled. After selecting, it will increase the number of Likes or Dislikes.

this is output of implementation

Create tabel- like to store the status (islike => true(like) or false(dislike)), threadid => for which given topic like or dislike done as shown below.

Table -thread
In this table, we are storing the total number of likes and dislikes.

in this table others columns are subject , description and pasteddate etc

Create like function to implement Like and Dislike functionality ,Getlikecounts to count likes and Getdislikecounts to count dislikes and GetallUser to to get all users(completed like&dislike) in datafunction.cs

// This Method is Used To Post A like and Dislike
public string Like(int id, bool status) {
using(var db = new DbEntities()) //this dbentities to access class from Model also we will get in wed.config
{
var thread = db.Threads.FirstOrDefault(x => x.ThreadID == id);
var toggle = false;
Like like = db.Likes.FirstOrDefault(x => x.ThreadId == id && x.UserID == Helper.UserId);
// here we are checking whether user have done like or dislike
if (like == null) {
like = new Model.Like();
like.UserID = Helper.UserId;
like.IsLike = status;
like.ThreadId = id;
if (status) {
if (thread.LikeCount == null) // if no one has done like or dislike and first time any one doing like and dislike then assigning 1 and 0
{
thread.LikeCount = thread.LikeCount ? ? 0 + 1;
thread.DislikeCount = thread.DislikeCount ? ? 0;
} else {
thread.LikeCount = thread.LikeCount + 1;
}
} else {
if (thread.DislikeCount == null) {
thread.DislikeCount = thread.DislikeCount ? ? 0 + 1;
thread.LikeCount = thread.LikeCount ? ? 0;
} else {
thread.DislikeCount = thread.DislikeCount + 1;
}
}
db.Likes.Add(like);
} else {
toggle = true;
}
if (toggle) {
like.UserID = Helper.UserId;
like.IsLike = status;
like.ThreadId = id;
if (status) {
// if user has click like button then need to increase +1 in like and -1 in Dislike
thread.LikeCount = thread.LikeCount + 1;
if (thread.DislikeCount == 0 || thread.DislikeCount < 0) {
thread.DislikeCount = 0;
} else {
thread.DislikeCount = thread.DislikeCount - 1;
}
} else {
// if user has click dislike then need to increase +1 in dislike and -1 in like
thread.DislikeCount = thread.DislikeCount + 1;
if (thread.LikeCount == 0 || thread.LikeCount < 0) {
thread.LikeCount = 0;
} else {
thread.LikeCount = thread.LikeCount - 1;
}
}
}
db.SaveChanges();
return thread.LikeCount + "/" + thread.DislikeCount;
}
}
public int? Getlikecounts(int id) // to count like
{
using (var db = new DbEntities())
{
var count = (from x in db.Threads where (x.ThreadID == id && x.LikeCount != null) select x.LikeCount).FirstOrDefault();
return count;
}
}
//To Get DisLike Count
public int? Getdislikecounts(int id)
{
using (var db = new DbEntities())
{
var count = (from x in db.Threads where x.ThreadID == id && x.DislikeCount != null select x.DislikeCount).FirstOrDefault();
return count;
}
}
// to get all users who have done like and dislike of the society
public List<Like> GetallUser(int id)
{
using (var db = new DbEntities())
{
var count = (from x in db.Likes where x.ThreadId == id select x).ToList();
return count;
}
}

Code for Controller Action Method

public ActionResult details(int id) //id is threadid this id we are getting from other page index
{
var societyid=(int Sesion["SocietyId"])//
ViewBag.like = RB.Getlikecounts(id);
ViewBag.Dislike = RB.Getdislikecounts(id);
ViewBag.AllUserlikedislike = RB.GetallUser(id);
return View();
}

public ActionResult Like(int id, bool status) {
var Db = new datafunction(); //created datafunction.cs and there implemented like function
var result = Db.Like(id, status); // calling and sending data to like function using Db
return Content(result);
}

Code for View details.cshtml

@foreach(Like user in ViewBag.AllUserlikedislike) // to get all user
{
ViewBag.userid = user.UserID; // checking current id is present or not
ViewBag.userlike = user.IsLike;
}
// if User loging and if he did like or dislike then first two case will happen other wise last case will happen
@if(@ViewBag.userid == Helper.UserId && ViewBag.userlike == true)//if user did like,user can do only dislike
{ < button class = "btn btn-info btn-xs like-button"
disabled data - status = "true"
id = "Like" > Like < i class = "fa fa-thumbs-o-up" > < /i> <span id="likecount">@ViewBag.like</span > < /button> < button class = "btn btn-info btn-xs like-button"
data - status = "false"
id = "Dislike" > Dislike < i class = "fa fa-thumbs-o-down" > < /i><span id="dislikecount">@ViewBag.Dislike</span > < /button>
} else if (@ViewBag.userid == Helper.UserId && ViewBag.userlike == false) //if user did dislike then user can do like only
{ < button class = "btn btn-info btn-xs like-button"
data - status = "true"
id = "Like" > Like < i class = "fa fa-thumbs-o-up" > < /i> < span id = "likecount" > @ViewBag.like < /span></button > < button class = "btn btn-info btn-xs like-button"
disabled data - status = "false"
id = "Dislike" > Dislike < i class = "fa fa-thumbs-o- down" > < /i><span id="dislikecount">@ViewBag.Dislike</span > < /button>
}
//
else // if user have not done like or dislike then both options are enable
{ < button class = "btn btn-info btn-xs like-button"
data - status = "true"
id = "Like" > Like < i class = "fa fa-thumbs-o-up" > < /i> <span id="likecount">@ViewBag.like</span > < /button> < button class = "btn btn-info btn-xs like-button"
data - status = "false"
id = "Dislike" > Dislike < i class = "fa fa-thumbs-o-down" > < /i><span id="dislikecount">@ViewBag.Dislike</span > < /button>
}

In jQuery

$("#Like").click(function() {
debugger;
ajaxGet("@Url.Content("~/User/Home / Like ")/?id=" + @Model.Threads.ThreadID + "&status=" + $(this).data("status"), function(data) {
var counters = data.split('/');
$("#likecount").text(counters[0]);
$("#dislikecount").text(counters[1]);
$("#Like").attr('disabled', 'disabled');
$("#Dislike").attr('disabled', false);
});
}); //
$("#Dislike").click(function() {
debugger;
ajaxGet("@Url.Content("~/User/Home / Like ")/?id=" + @Model.Threads.ThreadID + "&status=" + $(this).data("status"), function(data) {
var counters = data.split('/');
$("#likecount").text(counters[0]);
$("#dislikecount").text(counters[1]);
$("#Dislike").attr('disabled', 'disabled');
$("#Like").attr('disabled', false);
});
});

Summary

In this blog, we learned how we can implement the Like and Dislike functions in an MVC project.

I hope this will be helpful for you. Your thoughts and comments are always welcome.

8 Comments

Join the conversation! Your thoughts help the community grow.

rick sanchez6y ago
Helper make error in c# class! (the name 'Helper' does not exist in the current context).
- Anshu Kumar6y ago
  Helper.UserId is ( logged user 's Userid ,kept in session) . In project we can't call session all place ,so kept in helper.cs.
rick sanchez6y ago
What is Helper.UserId;
Daniel Wood7y ago
Having problems with the jQuery code for the project. Specifically the line ajaxGet()
kiran sai8y ago
I need this code can you share this total please
shiva bollepally8y ago
I want this project in without entity framework code please
Satyaprakash Samantaray9y ago
Can u add ur project file . It is not clearly understandable....
- Anshu Kumar9y ago
  I can 't share project file now .. where u r getting problem . first table name is like where to store status (like as true and dislike as false)