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条评论，当用户点击更多帖子按钮时，它会显示10条评论以及接下来的10条评论。但整个div正在变得清新。

我必须做哪些更改才能获得用户评论，而不会影响之前显示的评论？

假设用户在他的部分中有50-60帖子，那么所有评论应该在更多帖子按钮点击上显示10+等等...

我该怎么做？

Answer 1

你需要过滤你的记录并把它放在评论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);
             }
         });

    });

Answer 2

错误在：

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

.html（“somevalue”）删除内容，然后使用您提供的任何参数填充它。试着这样做：

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

甚至更容易：

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

我知道如果你传递字符串会有效，而部分视图基本上是一个html字符串。我不知道部分视图带来的标签是否会出现任何冲突问题。无论哪种方式，这是添加到元素的最简单方法，而不是写入。

Answer 3

如果您正在使用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

如何将部分视图结果附加到div？

3 个答案: