Как я могу добавить результат частичного просмотра в div?

Question

У меня есть div id = "comments" в этом я показываю 10 комментариев одновременно. когда пользователь хочет просмотреть следующие комментарии, я предоставил одну кнопку, которая будет собирать следующие 10 комментариев. для этого следующего комментария я создал частичное представление для отображения оставшихся 10 комментариев в другом div morecomments.

Моя проблема в том, что когда я отображаю следующие 10 комментариев, отображаются все 20 комментариев, но обновляется весь комментарий div, как предотвратить загрузку всего комментария div.

Мой код здесь:

<div id="comments">

 // Display Comments

 <div id="moreButton">
      <input type="submit" id="more" class="morerecords" value="More Post" />
 </div>

</div>

<div id="morecomments">

</div>

Jquery ::

$('.morerecords').livequery("click", function (e) {
            // alert("Showing more records...");
            var next = 10;            
            var url = '@Url.Action("ViewMore", "Home")'
            var data = { nextrecord: next};
             $.ajax({
                type: "POST",
                url: url,
                data: data,
                success: function (result) {
                 $("#morecomments").html(result);
                 }
             });

        });

В приведенном выше коде я получаю 10 комментариев в первый раз, и когда пользователь нажимает кнопку More Post , она показывает мне более 10 комментариев и следующие 10 комментариев. но весь div обновляется.

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

Предположим, что у пользователя есть 50-60 сообщений в его разделе, тогда все комментарии должны отображаться на 10+ больше при нажатии кнопки Больше сообщений и так далее ...

Как я могу это сделать?

Answer 1

Ошибка в:

$("#morecomments").html(result);

.html ("somevalue") удаляет содержимое, а затем заполняет его любым заданным вами параметром.Попробуйте сделать это:

$("#morecomments").html($("#morecomments").html() + result);

или даже проще:

$("#morecomments").append(result);

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

Answer 2

Если вы используете Entity Framework (что вы и делаете), вам нужно использовать что-то вроде следующего:

public JsonResult Get(
    //this is basically giving how many times you get the comments before
    //for example, if you get only one portion of the comments, this should be 1
    //if this is the first time, this should be 0
    int pageIndex, 
    //how many entiries you are getting
    int pageSize) { 

    IEnumerable<Foo> list = _context.Foos;
    list.Skip(PageIndex * PageSize).Take(pageSize);

    if(list.Count() < 1) { 
        //do something here, there is no source
    }

    return Json(list);
}

Это возвращает Json, но вы поймете идею.Вы можете изменить это в соответствии со своими потребностями.

Вы можете использовать этот способ и для нумерации страниц.Вот помощник для этого:

https://bitbucket.org/tugberk/tugberkug.mvc/src/69ef9e1f1670/TugberkUg.MVC/Helpers/PaginatedList.cs

Answer 3

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

$('.morerecords').livequery("click", function (e) {
        var next = 10;            
        var url = '@Url.Action("ViewMore", "Home")'
        var data = { nextrecord: next};
        var older_records = $("#morecomments").text();
        $.("comments").append(older_records); //When you will get next record data, older data will be filled in comment div.
         $.ajax({
            type: "POST",
            url: url,
            data: data,
            success: function (result) {
             $("#morecomments").html(result);
             }
         });

    });