How To Implement Like And Dislike Function In MVC

We are implementing Like and Dislike function in MVC. On Facebook or any other social media sites, there are like or dislike options for any given topic. The same function is implemented in MVC project.

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.