Post
Ask Question

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
  1.  // This Method is Used To Post A like and Dislike    
  2. public string Like(int id, bool status) {    
  3.     using(var db = new DbEntities()) //this dbentities to access class from Model also we will get in wed.config  
  4. {    
  5.         var thread = db.Threads.FirstOrDefault(x => x.ThreadID == id);    
  6.         var toggle = false;    
  7.         Like like = db.Likes.FirstOrDefault(x => x.ThreadId == id && x.UserID == Helper.UserId);    
  8.         // here we are checking whether user have done like or dislike    
  9.         if (like == null) {    
  10.             like = new Model.Like();    
  11.             like.UserID = Helper.UserId;    
  12.             like.IsLike = status;    
  13.             like.ThreadId = id;    
  14.             if (status) {    
  15.                 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    
  16.                 {    
  17.                     thread.LikeCount = thread.LikeCount ? ? 0 + 1;    
  18.                     thread.DislikeCount = thread.DislikeCount ? ? 0;    
  19.                 } else {    
  20.                     thread.LikeCount = thread.LikeCount + 1;    
  21.                 }    
  22.             } else {    
  23.                 if (thread.DislikeCount == null) {    
  24.                     thread.DislikeCount = thread.DislikeCount ? ? 0 + 1;    
  25.                     thread.LikeCount = thread.LikeCount ? ? 0;    
  26.                 } else {    
  27.                     thread.DislikeCount = thread.DislikeCount + 1;    
  28.                 }    
  29.             }    
  30.             db.Likes.Add(like);    
  31.         } else {    
  32.             toggle = true;    
  33.         }    
  34.         if (toggle) {    
  35.             like.UserID = Helper.UserId;    
  36.             like.IsLike = status;    
  37.             like.ThreadId = id;    
  38.             if (status) {    
  39.                 // if user has click like button then need to increase +1 in like and -1 in Dislike    
  40.                 thread.LikeCount = thread.LikeCount + 1;    
  41.                 if (thread.DislikeCount == 0 || thread.DislikeCount < 0) {    
  42.                     thread.DislikeCount = 0;    
  43.                 } else {    
  44.                     thread.DislikeCount = thread.DislikeCount - 1;    
  45.                 }    
  46.             } else {    
  47.                 // if user has click dislike then need to increase +1 in dislike and -1 in like    
  48.                 thread.DislikeCount = thread.DislikeCount + 1;    
  49.                 if (thread.LikeCount == 0 || thread.LikeCount < 0) {    
  50.                     thread.LikeCount = 0;    
  51.                 } else {    
  52.                     thread.LikeCount = thread.LikeCount - 1;    
  53.                 }    
  54.             }    
  55.         }    
  56.         db.SaveChanges();    
  57.         return thread.LikeCount + "/" + thread.DislikeCount;    
  58.     }    
  59. }    
  60.   
  61. public int? Getlikecounts(int id) // to count like  
  62. {  
  63.   using (var db = new DbEntities())  
  64.   {  
  65.     var count = (from x in db.Threads where (x.ThreadID == id && x.LikeCount != null) select   x.LikeCount).FirstOrDefault();  
  66.     return count;  
  67.   }  
  68. }  
  69. //To Get DisLike Count  
  70. public int? Getdislikecounts(int id)  
  71. {  
  72.  using (var db = new DbEntities())  
  73.  {  
  74.      var count = (from x in db.Threads where x.ThreadID == id && x.DislikeCount != null select                  x.DislikeCount).FirstOrDefault();  
  75.      return count;  
  76.  }  
  77. }  
  78. // to get all users who have done like and dislike of the society  
  79. public List<Like> GetallUser(int id)  
  80. {  
  81.    using (var db = new DbEntities())  
  82.   {  
  83.    var count = (from x in db.Likes where x.ThreadId == id   select x).ToList();  
  84.    return count;  
  85.    }  
  86. }   
Code for Controller Action Method

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


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

Code for View  details.cshtml

  2. @foreach(Like user in ViewBag.AllUserlikedislike) // to get all user  
  3. {  
  4.     ViewBag.userid = user.UserID;  // checking current id is present or not 
  5.     ViewBag.userlike = user.IsLike;  
  6. }  
  7. // if User loging and if he did like or dislike then first two case will happen other wise last case will happen  
  8. @if(@ViewBag.userid == Helper.UserId && ViewBag.userlike == true)//if user did like,user can do only dislike  
  9. { < button class = "btn btn-info btn-xs like-button"  
  10.     disabled data - status = "true"  
  11.     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"  
  12.     data - status = "false"  
  13.     id = "Dislike" > Dislike < i class = "fa fa-thumbs-o-down" > < /i><span id="dislikecount">@ViewBag.Dislike</span > < /button>  
  14. } else if (@ViewBag.userid == Helper.UserId && ViewBag.userlike == false) //if user did dislike then user  can do like only  
  15. { < button class = "btn btn-info btn-xs like-button"  
  16.     data - status = "true"  
  17.     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"  
  18.     disabled data - status = "false"  
  19.     id = "Dislike" > Dislike < i class = "fa fa-thumbs-o- down" > < /i><span id="dislikecount">@ViewBag.Dislike</span > < /button>  
  20. }  
  21. //  
  22. else // if user have not done like or dislike then both options are enable  
  23. { < button class = "btn btn-info btn-xs like-button"  
  24.     data - status = "true"  
  25.     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"  
  26.     data - status = "false"  
  27.     id = "Dislike" > Dislike < i class = "fa fa-thumbs-o-down" > < /i><span id="dislikecount">@ViewBag.Dislike</span > < /button>  
  28. }  

In jQuery
  1. $("#Like").click(function() {  
  2.     debugger;  
  3.     ajaxGet("@Url.Content("~/User/Home / Like ")/?id=" + @Model.Threads.ThreadID + "&status=" + $(this).data("status"), function(data) {  
  4.         var counters = data.split('/');  
  5.         $("#likecount").text(counters[0]);  
  6.         $("#dislikecount").text(counters[1]);  
  7.         $("#Like").attr('disabled', 'disabled');  
  8.         $("#Dislike").attr('disabled', false);  
  9.     });  
  10. }); //  
  11. $("#Dislike").click(function() {  
  12.     debugger;  
  13.     ajaxGet("@Url.Content("~/User/Home / Like ")/?id=" + @Model.Threads.ThreadID + "&status=" + $(this).data("status"), function(data) {  
  14.         var counters = data.split('/');  
  15.         $("#likecount").text(counters[0]);  
  16.         $("#dislikecount").text(counters[1]);  
  17.         $("#Dislike").attr('disabled', 'disabled');  
  18.         $("#Like").attr('disabled', false);  
  19.     });  
  20. });  

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.