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

GetPage.cshtml

不知道算不算另类的ASP.NET MVC4 Ajax分页的更多相关文章

  1. 基于asp.net的ajax分页

    直接贴代码: <html> <head> <meta http-equiv="Content-Type" content="text/htm ...

  2. Asp.Net Mvc4 Ajax提交数据成功弹框后跳转页面

    1.cshtml页面代码 @model Model.UserInfo @{     ViewBag.Title = "Edit"; var options = new AjaxOp ...

  3. AspNet MVC4 教育-28:Asp.Net MVC4 Ajax技术部门四舍五入余速Demo

    A.创建一个Basic项目类型. B.于Models创建一个文件夹: DivModel.cs: using System; using System.Collections.Generic; usin ...

  4. Asp.NET MVC4 + Ajax 实现多文件上传

    本文转自http://www.cnblogs.com/freeliver54/archive/2013/05/15/3079700.html JS部分测试可以,jQuery部分没有测试先留着 HTML ...

  5. 从技术经理的角度算一算,如何可以多快好省的做个app

    [导读]前端时间,一篇“从产品经理的角度算一算,做个app需要多少钱”的文章在网上疯传,可见大家对互联网创业的热情!这次,从一名技术经理的角度再给大家分析一下,如何使用跨平台开发技术为你节省上百万的开 ...

  6. 《java入门第一季》之Date类案例,算一算你的恋爱纪念日

    想算你和你对象谈了多久了,还在用笔算吗,是不是很头疼?写个程序算一算吧!会变得如此简单. import java.text.ParseException; import java.text.Simpl ...

  7. ASP.NET MVC4入门到精通系列目录汇总(转)

    序言 最近公司在招.NET程序员,我发现好多来公司面试的.NET程序员居然都没有 ASP.NET MVC项目经验,其中包括一些工作4.5年了,甚至8年10年的,许多人给我的感觉是:工作了4.5年,We ...

  8. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(45)-工作流设计-设计步骤

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(45)-工作流设计-设计步骤 系列目录 步骤设计很重要,特别是规则的选择. 我这里分为几个规则 1.按自行 ...

  9. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(6)-Unity 2.x依赖注入by运行时注入[附源码]

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(6)-Unity 2.x依赖注入by运行时注入[附源码] Unity 2.x依赖注入(控制反转)IOC,对 ...

随机推荐

  1. linux mount命令学习

    我们在下面这篇博文中已经有笼统的学习了文件系统的一些相关知识, http://blog.csdn.net/boyxulin1986/article/details/12107113 本篇我们主要是用来 ...

  2. memcached学习——大纲简介 && 安装(基于centos6.5)、启动、关闭memcached(一)

    大纲简介 安装前,先简单介绍一下memcached. memcached是一个免费.开源.高性能的分布式缓存.设计memcached的初衷是为了加快web应用程序,减少DB负载. 安装要求:支持大多数 ...

  3. AngularJS和ReactJS对比

    Angular的特点: 优势: AngularJS是一套完整的框架,angular有自带的数据绑定.render渲染.angularUI库,过滤器,$filter,$directive(模板),$se ...

  4. Shell中特殊的变量

    $表示当前的进程,当使用echo $$是会输出当前shell的pid echo $$ 特殊变量列表 变量 含义 $0 当前脚本的文件名 $n 传递给脚本或函数的参数.n 是一个数字,表示第几个参数.例 ...

  5. CMA连续物理内存用户空间映射---(一)

    背景: 在多媒体和图像处理等应用中,经经常使用到大块内存,尤其是硬件编解码.须要内核分配大块的物理连续内存. 这里希望通过把从内核分配的连续物理内存映射到用户空间.在用户空间经过处理,又能够入队到驱动 ...

  6. cocos2d-x v3.2 FlappyBird 各个类对象详细代码分析(7)

    今天我们介绍最后两个类 GameOverLayer类 GameLayer类 GameLayer类是整个游戏中最重要的类,由于是整个游戏的中央系统,控制着各个类(层)之间的交互,这个类中实现了猪脚小鸟和 ...

  7. JavaScripts学习日记——DOM

    DOM Document Object Model 文档对象模型  整合js和html css.控制html文档行为.DOM就是把页面当中所有内容全部封装成对象.HTML文档中万物皆对象.1.对象的分 ...

  8. 服务 IntentService 前台服务 定时后台服务

    Activity public class MainActivity extends ListActivity {     private int intentNumber = 0;     @Ove ...

  9. Tree( 树) 组件[2]

    本节课重点了解 EasyUI 中 Tree(树)组件的使用方法, 这个组件依赖于 Draggable(拖动)和 Droppable(放置)组件.一. 异步加载如果想从数据库里获取导航内容, 那么就必须 ...

  10. Beacon浅析

    作者:hongbosun 一.Beacon简介 Beacon是基于BLE技术实现的物理设备.BLE(全称Bluetooth Low Energy)是蓝牙4.0技术规范的一部分.它起源于Nokia的Wi ...