不知道算不算另类的ASP.NET MVC4 Ajax分页
以往用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分页的更多相关文章
- 基于asp.net的ajax分页
直接贴代码: <html> <head> <meta http-equiv="Content-Type" content="text/htm ...
- Asp.Net Mvc4 Ajax提交数据成功弹框后跳转页面
1.cshtml页面代码 @model Model.UserInfo @{ ViewBag.Title = "Edit"; var options = new AjaxOp ...
- AspNet MVC4 教育-28:Asp.Net MVC4 Ajax技术部门四舍五入余速Demo
A.创建一个Basic项目类型. B.于Models创建一个文件夹: DivModel.cs: using System; using System.Collections.Generic; usin ...
- Asp.NET MVC4 + Ajax 实现多文件上传
本文转自http://www.cnblogs.com/freeliver54/archive/2013/05/15/3079700.html JS部分测试可以,jQuery部分没有测试先留着 HTML ...
- 从技术经理的角度算一算,如何可以多快好省的做个app
[导读]前端时间,一篇“从产品经理的角度算一算,做个app需要多少钱”的文章在网上疯传,可见大家对互联网创业的热情!这次,从一名技术经理的角度再给大家分析一下,如何使用跨平台开发技术为你节省上百万的开 ...
- 《java入门第一季》之Date类案例,算一算你的恋爱纪念日
想算你和你对象谈了多久了,还在用笔算吗,是不是很头疼?写个程序算一算吧!会变得如此简单. import java.text.ParseException; import java.text.Simpl ...
- ASP.NET MVC4入门到精通系列目录汇总(转)
序言 最近公司在招.NET程序员,我发现好多来公司面试的.NET程序员居然都没有 ASP.NET MVC项目经验,其中包括一些工作4.5年了,甚至8年10年的,许多人给我的感觉是:工作了4.5年,We ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(45)-工作流设计-设计步骤
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(45)-工作流设计-设计步骤 系列目录 步骤设计很重要,特别是规则的选择. 我这里分为几个规则 1.按自行 ...
- 构建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,对 ...
随机推荐
- HDOJ 1164 Eddy's research I(拆分成素数因子)
Problem Description Eddy's interest is very extensive, recently he is interested in prime number. Ed ...
- Linux下安装GCC5.3.0(亲测有效)
对于linux小白来说,只需要先知道怎么安装,至于为什么等学了linux再说吧..知识不系统的坏处啊! 首先,一般ubuntu上都预装了低级版本的Gcc,完全可以应付刷OJ时的C+Class+STL的 ...
- 你需要知道的12个Git高级命令
众所周知,Git目前已经是分布式版本控制领域的翘楚,围绕着Git形成了完整的生态圈.学习Git,首先当然是学习Git的基本工作流.相比于SVN等传统版本控制系统来说,Git是专为分布式版本控制而生的强 ...
- Linux 系统下查看硬件信息命令大全
有许多命令可以用来查看 Linux 系统上的硬件信息.有些命令只能够打印出像 CPU 和内存这一特定的硬件组件信息,另外一些命令可以查看多种硬件组件的信息. 这个教程可以带大家快速了解一下查看各种硬件 ...
- 关于java中private构造函数的问题
首先推荐以下下面的一篇博客: http://blog.csdn.net/my_dream_fly/article/details/3857887 本来也比较好奇,自己写构造函数总是定义public形式 ...
- socket编程2
package tcp; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.IOExceptio ...
- 关于ThinkPHP控制器的方法失效的问题
今天发现控制器的方法失效了,用了排除法,找了长时间的原因,都没有找出来,后来干脆把home模块中的控制器和视图文件都复制到bbs模块下,竟然也不行. 这说明了控制器和视图没有问题,一定是模块的配置有问 ...
- 关于使用百度ueditor时的一些问题
本来这些问题直接在百度贴吧里回答不就完事了,可是好死不死的,百度贴吧里老出现 未知错误,错误号:230274 看来还是算了,自己做一个随笔记录一下好了 关于我们获取里面的内容时,老是会有一个<p ...
- DB2 错误编码 查询(二)(转)
DB2 SQLSTATE 讯息 类代码 42 语法错误或访问规则违例表 32. 类代码 42:语法错误或访问规则违例 SQLSTATE 值 含义 42501 授权标识不具有对标识对象执行指定操作的 ...
- 路由器WAN口和LAN口详解
前一阵子做路由器的联网,由于利用了Openwrt操作系统,做起来虽然方便,但是很多原理细节都被忽略了.所以这里再来老生常谈一下wan口和lan口的区别,以及他们之间的工作原理. 首先百度一下,基本知识 ...