Add product to favorite with font awesome heart icon toggle (MVC)

Question

I need an ActionResult for adding my products by id to users fav. page. I used jquery to toggle between two icons. But I don't know how to pass product id to controller. Here are my codes:

This is my view that has the product id:

<a href="#" id="addWish" class="like" product="@item.id">
  <i class="fa fa-heart-o" style="color:red;" id="wishlist"></i>
</a>

Here is my jquery script:

<script>
  function addFav() {
    var productId = $(this).attr("product");
    $.ajax({
      url: "~/home/AddToFav",
      data: { "id": productId },
      success: function() {
        $('i#wishlist')
          .addClass('active')
          .attr('class', 'fa fa-heart-o')
          .unbind('click')
          .bind('click', removeFav);
      }
    });
  }
  function removeFav() {
    var productId = $(this).attr("product");
    $.ajax({
      url: "~/home/RemoveFromFav",
      data: { "id": productId },
      success: function() {
        $('i#wishlist')
          .removeClass('active')
          .attr('class', 'fa fa-heart')
          .unbind('click')
          .bind('click', addFav);
      }
    });
  }
  //this will make the link listen to function
  // addFav (you might know this already)
  $('a#wishlist').bind('click', addFav);
</script>

UPDATE

This is the generated html that i want to manage:

<a href="#" class="addWish like" data-product="13">
  <i class="fa fa-heart-o" style="color:red;" id="wishlist"></i>
</a>
<a href="#" class="addWish like" data-product="12">
  <i class="fa fa-heart-o" style="color:red;" id="wishlist"></i>
</a>
<a href="#" class="addWish like" data-product="11">
  <i class="fa fa-heart-o" style="color:red;" id="wishlist"></i>
</a>

Answer 1

First of all, I don't think you need two functions for adding and removing.. Instead one function should decide whether to add or remove. Eg if it is already in the users fav list, remove it or else add it..

Secondly, you will also need some kind of a list_id or a user_id so that the method knows which user you are trying to update

Thirdly, for your a tag: append data- to the product as below. Also, I believe you have more than one tags. So instead of an id use a class name to identify the clicked one..

<a href="#" class="addWish like" data-product="@item.id">
  <i class="fa fa-heart-o" style="color:red;" id="wishlist"></i>
</a>

then wrap your function inside the click event of the a tag.

$('.addWish').click(function(e) {
  e.preventDefault();
  var el = $(this),
    icon = el.find('i'), // <-- new
    productId = el.data("product"),
    some_user_id = 3; // get user id.. 
  $.ajax({
    url: '@Url.Action("toggleFavorite", "User")',
    data: {
      "id": productId,
      "user_id": some_user_id
    },
    done: function(result) {
      // our methods return true or false
      if (result) {
        alert('added to fav');
        icon.removeClass().addClass('fa fa-heart-o'); // <-- new
      } else {
        alert('removed from fav');
        icon.removeClass().addClass('fa fa-heart'); // <-- new
      }
    }
  });
});

Then in your controller;

public JsonResult toggleFavorite(int id, int user_id)
{
    // your db logic to check if the id is already in favourites
    // for this specific user.
    // then return true or false (or whatever) depending on your
    // requirements for this specific scenario assume we return
    // true: if we added
    // false: if we removed
    var result = // your db outcome
    return Json(result, JsonRequestBehavior.AllowGet);
}