jquery - 我如何使用 Asp.net MVC 5 和 Ajax 制作实时点赞按钮

Question

我是 Stackoverflow 的新人，这是我的第一个问题。

我正在制作我的第一个博客网站，并且想要一个像 Facebook 一样的“赞”按钮。

我的点赞按钮有 2 个问题。

1. 它不会更新具有相同数据 ID 的文章中的计数。我只能更新(此)文章链接

2. 当用户喜欢/不喜欢一篇文章时，应该能够在不刷新页面的情况下点赞。这是因为它不会在不刷新页面的情况下检查数据库中是否有数据。我怎样才能在不刷新的情况下做到这一点？

Controller :

        public string LikeThis(int id)
    {
        Article art = DB.Articles.FirstOrDefault(x => x.ID == id);
        if (User.Identity.IsAuthenticated || Session["Username"] != null)
        {
            var Username = User.Identity.Name;
            Member m = DB.Members.FirstOrDefault(x => x.Username == Username);
            art.Likes++;
            Like like = new Like();
            like.ArticleID = id;
            like.UserID = m.ID;
            like.LikedDate = DateTime.Now;
            like.Liked = true;
            DB.Likes.Add(like);
            DB.SaveChanges();

        }

        return art.Likes.ToString();
    }
    public string UnlikeThis(int id)
    {
        Article art = DB.Articles.FirstOrDefault(x => x.ID == id);
        if (User.Identity.IsAuthenticated || Session["Username"] != null)
        {
            var username = User.Identity.Name;
            Member m = DB.Members.FirstOrDefault(x => x.Username == username);
            Like l = DB.Likes.FirstOrDefault(x => x.ArticleID == id && x.UserID == m.ID);
            art.Likes--;
            DB.Likes.Remove(l);
            DB.SaveChanges();

        }
        return art.Likes.ToString();
    }

查看:

                        <li>@{ 
                        int userid = Convert.ToInt32(Session["ID"]);

                        if (!User.Identity.IsAuthenticated)
                        {
                            <i class="fa fa-heart-o fa-lg"></i><span>(@art.Likes)</span> 
                        }
                        else if (art.Likes1.Any(x => x.UserID == userid && x.ArticleID == art.ID) || Ajax.ViewBag.Liked == true)
                        {
                            <a href="javascript:void(0)" class="unlike" data-id="@art.ID"><i class="fa fa-heart fa-lg text-danger"></i><span>(@art.Likes)u</span></a>
                        }
                        else
                        {
                            <a href="javascript:void(0)" class="like" data-id="@art.ID"><i class="fa fa-heart-o fa-lg"></i><span>(@art.Likes)l</span></a>
                        }
                        }
                    </li>

Ajax :

        $(document).ready(function () {
        //LIKE
        $("a.like").click(function () {
            var id = $(this).data("id");
            var link = "/Article/LikeThis/" + id;
            var a = $(this);
            $.ajax({
                type: "GET",
                url: link,
                success: function (result) {
                    a.html('<i class="fa fa-heart fa-lg text-danger"></i> (' + result + ')').removeClass("like").addClass("unlike");
                }
            });
        });
        //UNLIKE
        $("a.unlike").click(function () {
            var id = $(this).data("id");
            var link = "/Article/UnlikeThis/" + id;
            var a = $(this);
            $.ajax({
                type: "GET",
                url: link,
                success: function (result) {
                    a.html('<i class="fa fa-heart fa-lg text-danger"></i> (' + result + ')');
                }
            });
        });

    });

我不希望我错过任何事情。希望你们能帮忙。

Answer 1

问题是，您在文档就绪事件的 "like" 和 "unlike" css 类上注册了 click 事件。所以它将适用于当时 DOM 中存在的元素。在 ajax 调用的 success 处理程序中，您将 anchor 标记 html 重置为一些新标记，并且已注册的点击事件代码将无法使用此操作。

您应该做的是，使用 jQuery on 事件委托(delegate)来注册您的点击事件。它将适用于当前和 future 的元素(动态注入(inject)到 DOM)。

因此更改您的代码

$("a.like").click(function () {
    //do the ajax call
});

至

$(document).on("click","a.like",function () {
   //do the ajax call
});

它应该可以工作。

另一个建议是，如果您在标记中保留数据属性来确定用户是否已经喜欢以及每个的目标 url，则可以对这两个 ajax 调用使用相同的代码，以便标记与 jQuery 多个选择器一起使用( 两个 css 类)。另外，您不应该尝试将 url 硬编码到 js 代码中的操作方法。相反，您应该使用 Url.Action helper 方法，如 shown in this post