Как сделать разборное поле для комментариев, например, Stackoverflow

Question

Я создаю сайт, у меня есть список обновлений статуса, и я хочу, чтобы пользователи могли оставлять комментарии для каждого из элементов в списке

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

Как мне это сделать с помощью Jquery?

Примечание: ищет также пример разметки, другие слова - рабочий образец. Спасибо И да, если бы вы могли показать Async postback, это тоже было бы неплохо

Answer 1

Чтобы загрузить контент, вы можете просто подключить событие click, чтобы заполнить div, используя метод load.

Например, в представлении у вас может быть что-то вроде: -

</p> <pre><code><%= Html.ActionLink("Comments", "CommentList", "Questions", new { Id = this.ViewData.Model.Id }, new { id = "commentLink" })%> <div id="commentContainer" style="display:none;"> Loading... </div>

в то время как javascript для подключения все будет: -

</p> <pre><code> $(function() { $("#commentLink").click(function() { $("#commentContainer").toggle(); if ($("#commentContainer").is(":visible")) { $("#commentContainer").load($(this).attr("href")); } else { $("#commentContainer").html("Loading..."); //Or just leave it as is... } return false; //Prevent default action }); });

Answer 2

Быстрый подход (для отображения / скрытия области комментариев) будет выглядеть примерно так:

$(function(){
   $('#id_of_element_to_use_for_click').click(function(){
      $('#id_of_comment_area').slideToggle();
   });
});

Сайт jQuery предоставит вам документацию по различным подходам, таким как фейдеры, слайды или другие комбинированные анимации.

Ваша «Область комментариев», которую я использовал в этом примере, скорее всего, будет тегом <div>, который содержит ваши существующие комментарии, плюс поле ввода текстовой области или текста, в которое вы хотите, чтобы пользователи вводили свои ответы.

Вам нужно сделать асинхронную обратную передачу?