使用字體真棒心形圖標切換（MVC）將產品添加到收藏夾

Question

我需要一個ActionResult來按 id 添加我的產品給用戶最喜歡的。 頁。 我使用 jquery 在兩個圖標之間切換。 但我不知道如何將產品 ID 傳遞給控制器​​。 這是我的代碼：

這是我的具有產品 ID 的視圖：

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

這是我的 jquery 腳本：

<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>

更新

這是我要管理的生成的 html：

<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

首先，我不認為你需要兩個函數來添加和刪除。相反，一個函數應該決定是添加還是刪除。 例如，如果它已經在用戶收藏列表中，請將其刪除或添加。

其次，您還需要某種 list_id 或 user_id 以便該方法知道您要更新哪個用戶

第三，對於您的標簽：將數據附加到產品，如下所示。 另外，我相信你有不止一個標簽。 因此，不要使用 id 使用類名來標識單擊的對象。

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

然后將您的函數包裝在 a 標簽的 click 事件中。

$('.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
      }
    }
  });
});

然后在您的控制器中；

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);
}