Question

我需要一个ActionResult来按ID将我的产品添加到用户收藏。页。我使用jquery在两个icon。之间切换，但我不知道如何将产品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>

然后将函数包装在标签的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 spesific user.
            // then return true or false (or whatever) depending on your requirements
            // for this spesific scenario assume we return
            // true: if we added
            // false: if we removed
            var result = //your db outcome
            return Json(result, JsonRequestBehavior.AllowGet);
        }

通过字体真棒心脏图标切换（MVC）将产品添加到收藏夹

1 个答案: