ASP.NET Core MVC - смена кнопки начальной загрузки при вызове AJAX

Question

У меня сейчас есть кнопка :

@model IEnumerable<bytme.Models.Item>
...
    @foreach (var item in Model)
    {
        @if(ie++ < 21)
        {
         ...
         <a onclick="AddToWishList(@item.id)" class="btn btn-default">
               <span style="color:#8F6B93;" class="glyphicon glyphicon-heart-empty"></span>
         </a>
         ...
        }
    }

и этот AJAX вызов:

function AddToWishList(item_id) {

        $.ajax({
            type: "POST",
            data: {
                itm_id: item_id
            },
            url: "/WishList/AddToWishList",
            success: function (data) {
                //
            },
            error: function () {
                return "error";
            }
        });
}

Кнопка пустое сердце, но я хочу, чтобы сердце наполнялось всякий раз, когда вызывается URL AJAX.Я также хочу, чтобы URL "/WishList/RemoveFromWishList" снова очищал сердце всякий раз, когда он заполняется и снова щелкает.Как мне это сделать?

Некоторый дополнительный код при необходимости дополнительная информация:

AddToWishList (из WishlistController):

public async Task<ActionResult> AddToWishList(int itm_id, int recordId)
        {
            string userId = User.FindFirstValue(ClaimTypes.NameIdentifier);
            var wishMain = _context.WishMains.Where(w => w.user_ad == userId).FirstOrDefault();

            if (wishMain != null)
            {
                recordId = wishMain.id;
            }
            else
            {
                WishMains wish = new WishMains();
                wish.user_ad = userId;
                wish.dt_created = DateTime.Now;
                _context.Add(wish);
                await _context.SaveChangesAsync();

                recordId = wish.id;
            }

            var check = (from m in _context.WishLines
                         where m.itm_id == itm_id && m.Wishmain_id == recordId
                         select m).FirstOrDefault();

            if (check == null)
            {
                WishLines wishline = new WishLines();
                wishline.itm_id = itm_id;
                wishline.Wishmain_id = recordId;
                wishline.dt_created = DateTime.Now;

                _context.Add(wishline);
                await _context.SaveChangesAsync();
            }

            return RedirectToAction(nameof(Index));
        }

RemoveFromWishList (из WishlistController):

public async Task<ActionResult> RemoveFromWishList(int ordline_id)
        {
            var result = (from wishlines in _context.WishLines
                          where wishlines.id == ordline_id
                          select wishlines).FirstOrDefault();
            if (result != null)
            {
                _context.WishLines.Remove(result);
                await _context.SaveChangesAsync();
            }
            else
            {
                ViewBag.ErrorMessage = "Product cannot be removed!";
            }

            return RedirectToAction(nameof(Index));
        }

Answer 1

Мне удалось сделать это следующим образом:

HTML

<a onclick="AddToWishList(@item.id)" class="btn btn-default swapHeart">
   <span style="color:#8F6B93;" class="glyphicon glyphicon-heart-empty"></span>
</a>

jQuery & AJAX

<script src="~/lib/jquery/dist/jquery.min.js">
</script>
<script>
    jQuery(function ($) {
        $('.swapHeart').on('click', function () {
            var $el = $(this),
                textNode = this.lastChild;
            $el.find('span').toggleClass('glyphicon-heart glyphicon-heart-empty');
        });
    });
</script>
<script>
    function AddToWishList(item_id) {
        $.ajax({
            type: "POST",
            data: {
                itm_id: item_id
            },
            url: "/WishList/AddToWishList",
            error: function () {
                return "error";
            }
        });
    }
</script>