javascript - asp.net mvc3 中的“阅读更多”按钮

Question

我正在研究 asp.net mvc3 应用程序，并且有许多来自数据库的记录。我只想先显示 10 条记录，然后用户可以单击按钮查看下 10 条记录，依此类推。像脸书墙张贴更多记录。我怎样才能在我的应用程序中实现这个东西？我正在使用它来获取 10 条记录，但我想使用更多记录按钮显示所有记录

Answer 1

这应该让你去...

---

假设：

public class PostsViewModel
{
    public IEnumerable<PostViewModel> Posts { get; set; }
}

您的控制器可能如下所示：

public class BlogController
{
    public ActionResult Index()
    {
        PostsViewModel model = new PostsViewModel 
        {
            Posts = postService.GetPosts(resultsPerPage: 10, page: 1)
        };
        return View(model);
    }

    public PartialViewResult More(Int32 page = 1)
    {
        PostsViewModel model = new PostsViewModel 
        {
            Posts = postService.GetPosts(resultsPerPage: 10, page: page)
        };
        return PartialView(model);
    }
}

并查看类似：

~/Views/Blog/Index.cshtml

@model PostsViewModel
@* Other page content *@
@Html.DisplayFor(x => x.Posts)
<div id="more"></div>
@Ajax.ActionLink("Read More", "More", "Blog", new AjaxOptions {
    InsertionMode = InsertionMode.InsertBefore,
    UpdateTargetId = "more"
})
@* Other page content *@

~/Views/Blog/More.cshtml

@model PostsViewModel
@Html.DisplayFor(x => x.Posts)

~/Views/Blog/DisplayTemplates/PostViewModel.cshtml

@model PostViewModel
@* Display post itself *@