以往用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> }
@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">@i</a></li> } } </ul>