我正在使用 x.PagedList在我的 ASP.NET MVC 页面中使用分页。我对插件的唯一问题是,当我在页面之间导航时它使用了页面刷新。
为了避免我使用 jQuery 调用来替换页面内容,如 article 中所述.
我的 View 和 javascript 看起来像这样。
<div id="circuitsContent">
<table class="table">
<tr>
--Header
</tr>
@foreach (var item in Model)
{
<tr>
--Loop through and create content
<td>
@Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
@Html.ActionLink("Details", "Details", new { id = item.ID }) |
@Html.ActionLink("Delete", "Delete", new { id = item.ID })
</td>
</tr>
}
</table>
</div>
<div id="circuitContentPager">
@Html.PagedListPager((IPagedList)Model, page => Url.Action("Circuits", new { page }))
</div>
@section scripts
{
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$(document).on("click", "#circuitContentPager a[href]", function () {
$.ajax({
url: $(this).attr("href"),
type: 'GET',
cache: false,
success: function (result) {
$('#circuitsContent').html(result);
}
});
return false;
});
});
</script>
这是我的 Controller 代码:
public ActionResult Circuits(int? page)
{
var pageNumber = page ?? 1;
var circuits = _repo.GetAllCircuits().OrderBy(circ=>circ.ID).ToList();
var pagedCircuits = circuits.ToPagedList(pageNumber, 25);
return View(pagedCircuits);
}
我在这里错过了什么?
最佳答案
您的 ajax 调用从 Circuits()
返回 html方法与您最初用于呈现页面的 View 相同,其中包括所有初始 html,但您仅替换现有页面的一部分,因此由 @Html.PagedListPager()
生成的分页按钮等元素方法将被重复。由于重复 id
,您还会生成无效的 html属性(你将有多个 <div id="circuitsContent">
元素
有两种方法可以解决这个问题。
创建一个单独的 Controller 方法,只返回 <table>
的部分 View 并调用该方法,但是您需要提取 href
的页码值你的寻呼机按钮的属性也可以传递它。
使用您当前的 Circuits()
方法,测试请求是否为 ajax,如果是,则仅返回 <table>
的部分 View .
public ActionResult Circuits(int? page)
{
var pageNumber = page ?? 1;
var circuits = _repo.GetAllCircuits().OrderBy(circ=>circ.ID);
var pagedCircuits = circuits.ToPagedList(pageNumber, 25);
if (Request.IsAjaxRequest)
{
return PartialView("_Circuits", pagedCircuits);
}
return View(pagedCircuits);
}
注意:不要使用 .ToList()
在您的查询中。这违背了使用服务器端分页的全部目的,因为 .ToList()
立即从数据库下载所有记录。
在哪里_Circuits.cshtml
会是
@model IEnumerable<yourModel>
<table class="table">
<thead>
<tr>
// <th> elements
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
.... // Loop through and create content
</tr>
}
</tbody>
</table>
请注意,您的 header 元素应位于 <thead>
中元素和 <tbody>
中的记录元素。
关于javascript - Ajax 分页在使用分页替换页面内容时复制 _layout 页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48332269/