Вызов JQuery Ajax Функции в Foreach l oop - Нужна помощь

Question

Я сейчас изучаю программирование и пытаюсь создать сайт с. Net Core. У меня есть следующая проблема. Я не очень знаком с JavaScript, и у меня есть две функции JQuery / AJAX на моей странице индекса. Одна из функций предназначена для постов «нравится / не нравится», а другая - для комментариев к постам.

Моя ViewModel содержит коллекцию постов:

    public IEnumerable<IndexPostViewModel> Posts { get; set; }

    public int PagesCount { get; set; }

    public int CurrentPage { get; set; }

На мой взгляд, я перебираю каждое сообщение и в нем, через каждый Комментарий.

И вот функции в разделе Сценарии:

@ Сценарии раздела {

    function sendVote(postId, isUpVote) {
        var json = { postId: postId, isUpVote: isUpVote };
        $.ajax({
            url: "/api/votes",
            type: "POST",
            data: JSON.stringify(json),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                $("#upVotes").html(data.upVotes);
                $("#downVotes").html(data.downVotes);
            }
        });
    }

    // wait for the DOM to be loaded
    $(document).ready(function () {
        // bind 'myForm' and provide a simple callback function
        $('#myForm').each.ajaxForm(function () {
                alert("You have just posted a comment");
                document.location.reload(true);
            });
    });
</script>

}

Моя проблема в том, что обе функции работают правильно только для первого поста. Не могли бы вы помочь, как изменить функции, которые будут применяться для каждого элемента в l oop?

Заранее спасибо.

Answer 1

проблема проста. ваш селектор и идентификаторы не являются уникальными

идентификатор может быть определен только для одного элемента, один и тот же идентификатор для нескольких / одинаковых элементов вызовет эту проблему.

тег ссылки имеет общий идентификатор для всех записей , он должен быть уникальным.

сделать идентификаторы уникальными, я добавил @ post.Id с идентификаторами, это сделает каждый уникальный

                                <div class="reaction">
                                    <a class="btn text-green" href="#" method="post" onclick="sendVote(@post.Id, true)"><div class="icon ion-thumbsup" id="upVotes_@post.Id">@post.UpVotes</div></a>
                                    <a class="btn text-red" href="#" method="post" onclick="sendVote(@post.Id, false)"><div class="fa fa-thumbs-down" id="downVotes_@post.Id">@post.DownVotes</div></a>
                                </div>

и в вас js изменит селектор, добавив id

function sendVote(postId, isUpVote) {
    var json = { postId: postId, isUpVote: isUpVote };
    $.ajax({
        url: "/api/votes",
        type: "POST",
        data: JSON.stringify(json),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            $("#upVotes_"+postId).html(data.upVotes); // change here
            $("#downVotes_"+postId).html(data.downVotes);
        }
    });
}

---

, а также для myform делают то же самое, вам не нужен идентификатор для формы, но если вы хотите просто добавить @ post.Id в id,

<form id="myForm" class="myform" asp-controller="Comment" asp-action="Create" method="post">
                                        <input type="hidden" name="PostId" id="postId" value="@post.Id" />
                                        <textarea name="text"></textarea>
                                        <input type="submit" value="Submit Comment" />
                                    </form>

и в изменении события идентификатор класса, чтобы сделать его динамичным c,

 $('.myForm').each.ajaxForm(function () {
            // $(this)  will give you access to the specific form only
                alert("You have just posted a comment");
                document.location.reload(true);
            });