以往用Ajax来实现无刷新分页,用户一按F5,页数就记不住了,点了一个链接也是同一个问题,再想回退回来,就回到第一页了。上次看到一篇文章,说到window.location.hash的用途,于是萌生了这么一个想法,把这个用来保存Ajax的状态。
大概的实现思路是这样的:页面监听window.onhashchange事件,然后通过Ajax向后台请求分页内容,再替换掉原来的分页结果。当然这个方法要一开始也执行一下,用来应对回退功能。
代码大概如下:
@{
ViewBag.Title = "Index";
}<h2>Index</h2>
<div id="MainDiv"></div>@section scripts{
<script>
function GoToPage(PageIndex) {
$.ajax({
url: '@Url.Action("GetPage")',
data: { Page: PageIndex },
success: function (data) {
$("#MainDiv").html(data);
}
});
} function GetLocationHash() {
//var IsGotoPage = false;
var PageIndex = 1;
var m = window.location.hash.slice(1).split("&");
for (var i = 0; i < m.length; i++) {
var item = m[i];
if (item.indexOf("Page=") > -1) {
PageIndex = item.slice(5);
}
}
GoToPage(PageIndex);
//alert(values);
}
window.onhashchange = GetLocationHash;
GetLocationHash();
</script>
}
Index.cshtml
@model IEnumerable<dynamic>
<table>
<thead>
<tr>
<th>编号</th>
<th>内容</th>
<th>日期</th>
<th>操作</th>
</tr>
</thead>
@foreach (var item in Model)
{
<tr>
<td>
@item.ID
</td>
<td>
@item.Content
</td>
<td>
@item.UpdateDate
</td>
<td>
@Html.ActionLink("查看", "Detail", new { ID = item.ID })
</td>
</tr>
}
</table>
<ul>
@for (int i = 1; i <= ViewBag.PageCount; i++)
{
if (i == ViewBag.PageIndex)
{
<li style="display: inline-block"><span>@i</span></li>
}
else
{
<li style="display: inline-block"><a href="#Page=@i" rel="external nofollow" >@i</a></li>
} }
</ul>
GetPage.cshtml