Лайки и избранное

362
08 января 2018, 12:08

Во вью у меня такой блок:

<span class="col-md-4"><a href="#" title="Мне нравится"><span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span></a></span>
<span class="col-md-4"><a href="#" title="Нажмите, чтобы добавить в избранное (повторно, чтобы отменить)"><span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span></a></span>

Модель Like и Favourite содержит 2 столбца (string UserId, int MovieId).

Как мне реализовать, чтобы при первом нажатии на кнопку "Лайк" или "Избранное" в БД записались данные, при этом картинка в этот же момент должна поменяться на "лайкнуто" или "в избранном". При повторном нажатии на кнопку, необходимо, чтобы данные удалились и картинка опять вернулась? Попробовал через Ajax, но не получилось. Что должно возвращаться в методе в контроллере?

public ActionResult Like(int id)
        {
            var userId = User.Identity.GetUserId();
            db.Likes.Add(new Like { UserId = userId, MovieId = id });
            db.SaveChanges();
            return PartialView();
        }
Answer 1

Можно сделать так:

Ваше действие контроллера должна возвращать частичную вьюшку в которую уже входит ссылка для убрать лайк / добавить лайк в зависимости от того есть ли уже лайк или нет. И сразу же возвращать количество лайков. При этом обработку ссылки сделать через ненавязчивый ajax.

То есть у вас будет два действия контроллера AddLike, RemoveLike и оба возвращать одну и туже частичную вьюшку с ссылкой и количеством лайков.

Answer 2

Вью:

@{
var userId = Session["ID"];
if (!User.Identity.IsAuthenticated)
{
<i class="glyphicon glyphicon-heart"><span>(@b.TotalLikes)</span></i>
}
else if (b.Likes.Any(a => a.UserId == userId && a.MovieId == b.Id))
{
<a href="javascript:void(0)" class="unlike" data-id="@b.Id"><i class="glyphicon glyphicon-heart text-danger"><span>(@b.TotalLikes)</span></i></a>
}
else
{
<a href="javascript:void(0)" class="like" data-id="@b.Id"><i class="glyphicon glyphicon-heart-empty"><span>(@b.TotalLikes)</span></i></a>
}
}

Контроллер:

public string LikeThis(int id)
{
    var movie = db.Movies.FirstOrDefault(a => a.Id == id);
    if (User.Identity.IsAuthenticated || Session["Username"] != null)
    {
        var username = User.Identity.Name;
        var user = db.Users.FirstOrDefault(a => a.UserName == username);
        movie.TotalLikes++;
        if (user != null)
        {
            var like = new Like
            {
                MovieId = id,
                UserId = user.Id
            };
            db.Likes.Add(like);
        }
        db.SaveChanges();
    }
    return movie.TotalLikes.ToString();
}
public string UnlikeThis(int id)
{
    var movie = db.Movies.FirstOrDefault(a => a.Id == id);
    if (User.Identity.IsAuthenticated || Session["Username"] != null)
    {
        var username = User.Identity.Name;
        var user = db.Users.FirstOrDefault(a => a.UserName == username);
        movie.TotalLikes--;
        var like = db.Likes.FirstOrDefault(a => a.MovieId == id && a.UserId == user.Id);
        if (like != null)
        {
            db.Likes.Remove(like);
        }
        db.SaveChanges();
    }
    return movie.TotalLikes.ToString();
}

Ajax:

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

Но не работает, т.к. не могу вытащить стринговое Id юзера проверить хотябы.

READ ALSO
Всплывающее окно в Visual Code

Всплывающее окно в Visual Code

При написании метода после того как ставлю скобки вылезает такое большое окно (это не окно подсказок, потому что если писать код дальше будет...

283
Сокращение js скриптов

Сокращение js скриптов

На сайте к странице подключается около 15 js скриптов и 10 css файлов, будет ли профит если свести весь js и css в один файл, те

248
Обработка button

Обработка button

Только начал изучение JS, поэтому, вероятнее всего, допустил какую-то глупую ошибкуЗамысел такой: пользователь вводит кличку, породу и вес...

232
Имитация кликов вконтакте

Имитация кликов вконтакте

Здравствуйте, у меня Вконтакте есть фотографии которые я лайкал, хочу написать скрипт, который будет перелистывать их и сохранять к себеДелать...

304