Добавить товар в избранное с помощью шрифта Awesome Heart Icon Toggle (MVC)

Question

Мне нужен ActionResult для добавления моих товаров по идентификаторам в избранные пользователи.стр.Я использовал JQuery для переключения между двумя иконками. Но я не знаю, как передать идентификатор продукта в контроллер.вот мои коды.

это мой взгляд с идентификатором продукта:

<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, чтобы метод знал, какого пользователя вы пытаетесьобновление

В-третьих, для вашего тега: добавьте данные- к продукту, как показано ниже.Кроме того, я считаю, что у вас есть несколько тегов.Поэтому вместо идентификатора используйте имя класса, чтобы идентифицировать кликаемого.

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