我如何使用 Asp.net MVC 5 和 Ajax 制作 Live Like 按钮

Question

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

我正在创建我的第一个博客网站，并且想要一个赞按钮，比如 facebook。

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

1. 它不会像具有相同数据 ID 的文章中的计数一样更新。我只能更新（这篇）文章链接

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

控制器：

        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>

阿贾克斯：

        $(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 处理程序中，您正在将锚标记 html 重置为一些新标记，并且已经注册的点击事件代码将无法使用。

你应该做的是，使用 jQuery on 事件委托来注册你的点击事件。它适用于当前和未来的元素（动态注入到 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

Answer 2

我刚刚解决了 1. 问题。 如果您在页面中有相同的文章，那么它将具有相同的类似按钮，其中包含相同的 id。

我可以使用多重属性过滤器对其进行更新。我的最终代码是这样的：

        //LIKE
        $(document).on("click", "a.like", function () {
            var id = $(this).data("id");
            var link = "/Article/LikeThis/" + id;
            //Choose all a tags with this class and this ID
            var a = $("a[class$='like'][data-id$='"+id+"']");
            $.ajax({
                type: "GET",
                url: link,
                success: function (result) {
                    a.html('<i class="fa fa-heart fa-lg text-danger"></i> <span>(' + result + ')</span>').removeClass("like").addClass("unlike");
                }
            });
        });

现在已经修复了！ :)