Пользовательская реализация кнопки «Мне нравится» в ASP .NET CORE с SignalR - PullRequest
0 голосов
/ 27 мая 2019

Hy каждый,

извините, если мой вопрос дублирует некоторые, но я не нашел решения для моей проблемы.

Тем не менее, я пытаюсь реализовать пользовательскую кнопку «Мне нравится» для сообщений в моем приложении mvc для ядра asp.net, и все работает отлично, за исключением того, что когда я нажимаю кнопку «Мне нравится», она меняет цвет (как на Facebook, синий цвет и т. Д.) не только для текущего зарегистрированного пользователя, но и для всех зарегистрированных пользователей. Но когда другие пользователи обновляют окно, все возвращается в нормальное состояние ...

Что я хочу, так это когда я нажимаю кнопку «Мне нравится», чтобы обновить «как счетчик» ДЛЯ КАЖДОГО и изменить цвет ТОЛЬКО ДЛЯ МЕНЯ (когда я вернулся в другой день, я знаю, что мне понравился этот пост. )

Кто-нибудь знает, как это сделать? Вот мой код

Index.cshtml

@using Fitness_Centar.Data
@using Fitness_Centar.Data.Models
@using Fitness_Centar.Web.Areas.ModulClan.ViewModels
@using Fitness_Centar.Web.Helper
@model List<TimelineVM>

@{
    ViewData["Title"] = "Index";
    MyContext _ctx = (MyContext)ViewData["_ctx"];

User u = Context.GetLoggedUser();
int userId = -1;
if (u.Coach != null)
{
    userId = u.Coach.CoachId;
}
if (u.Employee != null)
{
    userId = u.Employee.EmployeeId;
}
if (u.Member != null)
{
    userId = u.Member.MemberId;
}
}

<div class="row">
<div class="col-sm-12 col-md-9 col-lg-9">
    <div class="box box-info custom aktivnosti">
        <div class="box-header with-border padding-l-25">
            <h3 class="box-title">Activities</h3>
        </div>

        <div class="box-body">
            @foreach (var p in Model)
            {
                <div id="@p.Post.PostClanovaId" class="post">
                    <div class="user-info">
                        <img class="img-circle img-bordered-sm" src="~/AdminLTE/dist/img/avatar5.png" />
                        <div class="desc">
                            <span class="username">@p.Post.User.Name @p.Post.User.LastName</span>
                            <span class="post-description">Published: @p.Post.PostDate</span>
                        </div>
                    </div>
                    <div class="post-content text-justify">
                        <p>@p.Post.Content</p>
                    </div>
                    <div class="post-footer">
                        @{int n = p.Post.PostId + 1594;}
                        @{
                            var c = _ctx.Likes.Where(x => x.UserId == userId && x.PostId == p.Post.PostId).FirstOrDefault();

                            if (c != null && c.UserId == userId)
                            {
                                <a href="" id="post-@n" class="likeButton link-black liked" data-postid="@p.Post.PostId" data-userid="@userId">
                                    <i class="fa fa-thumbs-o-up margin-r-5"></i>
                                    Like
                                </a>
                            }
                            else
                            {
                                <a href="" id="post-@n" class="likeButton link-black" data-postid="@p.Post.PostId" data-userid="@userId">
                                    <i class="fa fa-thumbs-o-up margin-r-5"></i>
                                    Like
                                </a>
                            }
                        }
                        <div class="num-of-likes" id="post-@n-numOfLikes">
                            @p.Likes.Count()
                            <span class="usersThatLiked">
                                @{
                                    string g = "";
                                    foreach (var l in p.Likes)
                                    {
                                        g += l.User.Ime + " " + l.Clan.Prezime;
                                    }
                                    @g;
                                }
                            </span>
                        </div>
                        <div class="comment pull-right">
                            <a href="#" class="link-black">
                                <i class="fa fa-comments-o margin-r-5"></i>
                                Comments
                            </a>
                        </div>
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Komentiraj...">
                            <span class="input-group-btn">
                                <button type="button" class="btn btn-info btn-flat"><i class="fa fa-check"></i></button>
                            </span>
                        </div>
                    </div>
                </div>
            }
        </div>
    </div>
</div>

javascript.js

"use strict";
var $connection = new signalR.HubConnectionBuilder().withUrl("/ModulClan/Helper/LajkHub").build();

$(".likeButton").prop("disabled", true);

$connection.on("ReceiveMessage", function (numOfLikes, postId) {
    var x = postId + 1594;
    var s = "#post-" + x;
    if ($(s).hasClass("liked")) {
        $(s).removeClass("liked");
    } else {
        $(s).addClass("liked");
    }
    $(s + "-num-of-likes").text(numOfLikes);
});

$connection.start().then(function () {
    $(".likeButton").prop("disabled", false);
}).catch(function (err) {
    return console.error(err.toString());
});


$(".likeButton").bind("click", function (event) {
    var userId = $(this).attr("data-userid");
    var postId = $(this).attr("data-postid");    

    $connection.invoke("SetLike", userId, postId).catch(function (err) {
        return console.error(err.toString());
    });
    event.preventDefault();
});

LikeHub.cs

public class LikeHub : Hub
{
    private readonly MyContext _ctx;
    public LikeHub (MyContext context)
    {
        _ctx = context;
    }

    public async Task SetLike(int userId, int postId)
    {
        Likes l = new Likes();
        Likes temp = _ctx.Likes.Where(x => x.PostId == postId && x.UserId == userId).FirstOrDefault();

        if(temp != null)
        {
            _ctx.Likes.Remove(temp);
        }
        else
        {
            _ctx.Likes.Add(l);

            l.UserId = userId;
            l.PostId = postId;
        }

        _ctx.SaveChanges();

        int numOfLikes= _ctx.Likes.Where(x => x.PostId == postId).Count();

        await Clients.All.SendAsync("ReceiveMessage", numOfLikes, postId);
    }
}

1 Ответ

1 голос
/ 28 мая 2019

Вы можете идентифицировать текущего пользователя (который нажал like button) с помощью

var userId = $(this).attr("data-userid"); (как вы делали, когда кто-то нажимал like button).

Но проблема в том,это означает, что вы не проверяете userId при успешном выполнении SetLike (внутри функции javascript on ReceiveMessage).

, поэтому для решения этой проблемы вам необходимо отправить userId пользователя, которыйщелкнул like button от бэкэнда до внешнего интерфейса (для функции on("ReceiveMessage"..))

например: await Clients.All.SendAsync("ReceiveMessage", numOfLikes, postId, userId);

и на ReciveMessage проверьте, получили ли вы userIdиз внутреннего интерфейса сопоставьте текущего пользователя, который просматривает по var currentUserId = $(this).attr("data-userid");

, если они равны, тогда раскрасьте like button, в противном случае просто обновите like counter.

таким образом, чтобы решить вашу проблему.


Другим решением было бы отправить 2 запроса, один из которых предназначен для пользователя, который нажал like button, а другой - для всех, чтобы обновить the like counter.

.
...