ASP.NET Core MVC-通过AJAX调用更改Bootstrap按钮

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

该按钮是一个空虚的心，但是我希望每当调用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>