Question

我是MVC和Ajax开发的初学者，并希望在我的网络中使用类似按钮，它应该是这样的：如果用户点击它，总喜欢将增加1并且如果用户再次点击它（不喜欢）然后它会减少1。到目前为止我所做的是：

这是模型：

public class Like
{
    public int Id { get; set; }
    public virtual Video Video { get; set; }
    public int VideoID { get; set; }
    public string UserId { get; set; }
    public virtual ApplicationUser ApplicationUser { get; set; }
}

这是控制器：发布方法

[HttpPost]
    public ActionResult Like(int Id, Like like)
        {
            if (ModelState.IsValid && User.Identity.IsAuthenticated == true)
            {
                like.Video = storeDB.Videos.Find(Id);
                like.UserId = User.Identity.GetUserId();

                var userlike = storeDB.Likes.Where(l => l.UserId == like.UserId && l.VideoID == Id);

                if (userlike.Count() == 0)
                {
                    storeDB.Likes.Add(like);
                    storeDB.SaveChanges();
                }
                else if (userlike.Count() == 1)
                {
                    var likeDel = storeDB.Likes.FirstOrDefault(l => l.UserId == like.UserId && l.VideoID == Id);
                    storeDB.Likes.Remove(likeDel);
                    storeDB.SaveChanges();
                }
                List<Like> videoLikes = storeDB.Likes.Where(v => v.VideoID == Id).ToList();
                int nooflikes = videoLikes.Count();
                ViewBag.noLikes = nooflikes;
                return Json(ViewBag.noLikes, JsonRequestBehavior.AllowGet);
            }
            else
            {
                ViewBag.Message = "Login to like this video";
                return PartialView("Like", ViewBag.noLikes);
            }

这是Like的方法：

public ActionResult Like(int id)
    {
        List<Like> videoLikes = storeDB.Likes.Where(v => v.VideoID == id).ToList();
        int nooflikes = videoLikes.Count();
        ViewBag.noLikes = nooflikes;
        return Json(ViewBag.noLikes, JsonRequestBehavior.AllowGet);
    }

我为此创建了一个部分视图：

    @if (ViewBag.Message != null)
{
    <script>
        $(document).ready(function () {
            alert('@ViewBag.Message');
        });

    </script>
}
//to display total likes
        <input type="text" id="likes" name="likes" value='@ViewBag.noLikes' readonly="readonly" style="border:none; background-color:transparent; width:20px"  /><span style="color:black">likes</span>

这是我使用Ajax.BeginForm（）

的主视图

 @using (Ajax.BeginForm("Like", "VOD", new { Id = Model.Id },
             new AjaxOptions
            {
                HttpMethod = "Post",
                InsertionMode = InsertionMode.Replace,
                UpdateTargetId = "likecount"
            }))
                        {

                            <button type="submit" id="like" value="Like" class=" btn btn-primary btn-xs"> Like &nbsp; <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> </button>
                        }
                        <span id="likecount">
                            @Html.Partial("Like", new Models.Like())
                        </span>

现在的问题是，当首次加载页面时，它不显示总喜欢，当我点击like按钮时它会返回1，当我再次单击like按钮时它会返回0但是当我刷新页面或当我回复到另一个页面时，总喜欢再次消失。

有人能帮助我吗？

Answer 1

您可以通过简单的方式执行上述功能，而不是执行如此多的代码。您需要执行以下操作，

2动作方法， 1.像计数一样增量。 2.减少数量。

网页上的2个按钮 1.像按钮（最初可见） 2. DisLike按钮（最初不可见）

你可以在两个按钮上创建ajax请求，如bellow，

$("#btnLike").click(function () {
            $.ajax({
                type: "POST",
                url: "Controller/LikeAction",
                data: { /* Your Data */ };
                success: function (result) {
                   // Hide Like Button & Show Dislike Button
                },
                error: function (error) {
                    alert("error = " + error);
                }
            });
});

同样，您也可以为不喜欢按钮创建ajax请求。你只需要隐藏和显示按钮。

像MVC中的按钮一样，使用'Ajax.Beginform（）'无法在页面上显示总喜欢

1 个答案: