例如，在 ASP.NET MVC 中加载索引视图的IEnumerable 的前 25 项的最佳方法是什么？
我有一个模型，并使用脚手架创建了一个控制器和视图。在索引页面中，我创建了一个div，其中包含视图模型中每个实例的一些信息（问题对象的List）。我想显示前 25 个项目，并让用户可以使用底部的链接“加载接下来的 25 个问题...”来加载更多项目。
这怎么可能？
【问题讨论】：
标签： c# jquery html asp.net-mvc scaffolding
这类似于分页，不同之处在于您保留以前的提取。你的视图模型还需要一个辅助类的属性：
public class PagingInfo
{
public int TotalItems { get; set; }
public int ItemsPerPage { get; set; }
public int CurrentPage { get; set; }
public int TotalPages
{
get { return (int)Math.Ceiling((decimal)TotalItems / ItemsPerPage); }
}
}
public class QuestionsListViewModel
{
public IEnumerable<Question> Questions { get; set; }
public PagingInfo PagingInfo { get; set; }
}
当你渲染 QuestionsListViewModel 时，使用类似的 Razor Code：
@foreach (var p in Model.Questions)
{
// render Questions
}
@Html.ActionLink("Load next 25 items", "Questions", "Controller", new { page = Model.PagingInfo.CurrentPage + 1 }))
问题是您的控制器操作，如下所示：
public ViewResult Questions(int page = 1)
{
QuestionsListViewModelmodel = new QuestionsListViewModel
{
// we need to get all items till now to render again
Questions = repository.Questions
.Take(page * PageSize),
PagingInfo = new PagingInfo
{
CurrentPage = page,
ItemsPerPage = 25,
TotalItems = repository.Questions.Count()
}
};
return View(model);
}
您实际上可以使用 TotalItems 属性为加载下一个项目提供智能消息。
如果您不想采用 MVC 方式，那么您可以利用客户端脚本来实现相同的目标。
【讨论】：
@Html.PageLinks(Model.PagingInfo, x => Url.Action("Questions", new { page = x }))，这是为什么呢？有其他选择吗？
PageSize 必须在 Questions = repository.Questions .Take(page * PageSize) 行中，因为这对我来说不是很清楚。
您是否考虑过用于分页的 PagedList 库？ 您所要做的就是在您的 ASP.NET MVC 应用程序中引用 PagedList 库
要安装 PagedList.Mvc，请在包管理器控制台中运行以下命令。你也可以使用 NuGet 来获取这个包。
PM> Install-Package PagedList.Mvc
你的视图模型
public class QuestionViewModel
{
public int QuestionId { get; set; }
public string QuestionName { get; set; }
}
在您的控制器中，引用 PagedList
using PagedList;
您的控制器的 Index 方法将类似于
public ActionResult Index(int? page)
{
var questions = new[] {
new QuestionViewModel { QuestionId = 1, QuestionName = "Question 1" },
new QuestionViewModel { QuestionId = 1, QuestionName = "Question 2" },
new QuestionViewModel { QuestionId = 1, QuestionName = "Question 3" },
new QuestionViewModel { QuestionId = 1, QuestionName = "Question 4" }
};
int pageSize = 3;
int pageNumber = (page ?? 1);
return View(questions.ToPagedList(pageNumber, pageSize));
}
还有你的索引视图
@model PagedList.IPagedList<ViewModel.QuestionViewModel>
@using PagedList.Mvc;
<link href="/Content/PagedList.css" rel="stylesheet" type="text/css" />
<table>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.QuestionId)
</td>
<td>
@Html.DisplayFor(modelItem => item.QuestionName)
</td>
</tr>
}
</table>
<br />
Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount
@Html.PagedListPager( Model, page => Url.Action("Index", new { page }) )
【讨论】：
简而言之，您需要在后端有一些端点，逐页返回信息，例如http://my-website.com/questions/list?start=0&count=25。假设它以 JSON 格式返回信息。之后，您可以使用 AJAX 从前端（浏览器）端调用此端点。我建议使用 jQuery AJAX。一旦你在浏览器端获取数据，你可以再次使用 jQuery 并呈现你想要的任何信息。
【讨论】：
如果您需要从数据库中提取项目，您可以修改索引方法如下：
public ActionResult Index(int? page)
{
var question = (from e in db.Ques
select new
{
QuestionId = e.QuestionId,
QuestionName = e.QuestionName
}).ToList()
.Select(x => new QuestionViewModel()
{
QuestionId = x.QuestionId ,
QuestionName = x.QuestionName
});
int pageSize = 2;
int pageNumber = (page ?? 1);
return View(question.ToPagedList(pageNumber, pageSize));
}
请注意视图和模型，应保持如上创建的状态
【讨论】：