asp.net MVC4 +MVCpager 无刷新分页

本人菜鸟,最近在用MVC4和MVCpager做无刷新分页时,发现点击下一页时数据不是Ajax提交的,弄了好久终于找到原因,原来还是Jquery引用的问题,现在把代码粘出来,希望能帮到刚接触的程序员,第一次自己写博客,文才不好,有什么改进的地方还希望大神多多指教。

 控制器代码
using Webdiyer.WebControls.Mvc;
namespace MVCPage.Controllers
{
public class HomeController : Controller
{
public ActionResult Index(int?id,string name)
{
id = id ?? 1;
int pageSize =3;
DemoDBEntities db = new DemoDBEntities();
IQueryable<Person> temp = db.Person.Where(c =>true).OrderBy(c=>c.ID);
PagedList<Person> pageList = temp.AsQueryable<Person>().ToPagedList<Person>(id.Value, pageSize);
if (Request.IsAjaxRequest())
{
return PartialView("_ParIndex",pageList);
}
return View(pageList);
}
}
}
控制器代码

这是先提醒一下,新建项目后必须引用MVCpager.dll,引用时希望去下载最新的2.0版本,不然还会有其他问题。

 视图Index页面
@using Webdiyer.WebControls.Mvc
@model Webdiyer.WebControls.Mvc.PagedList<MVCPage.Models.Person>
@{
ViewBag.Title = "Index";
}
<div>
@using (Ajax.BeginForm("index", new RouteValueDictionary { { "id", "" } },
new AjaxOptions { UpdateTargetId = "articles", HttpMethod = "Get",
InsertionMode = InsertionMode.Replace}, new RouteValueDictionary { { "id", "searchForm" } }))
{
<input placeholder="请输入姓名" type="text" name="name" id="source" style="width:120px"/>
<input type="submit" value="搜索"/>
}
</div>
<div id="MVCpager">
@Html.Partial("_ParIndex", Model)
</div>
@section Scripts{@{Html.RegisterMvcPagerScriptResource();}
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"></script>
}
视图Index页面
 布局页_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
</head>
<body>
@RenderBody()
<script type="text/javascript" src="/Scripts/jquery-1.8.2.min.js"></script>
@RenderSection("Scripts",false)
</body>
</html>
布局页_Layout.cshtml
 分部视图_ParIndex
@using Webdiyer.WebControls.Mvc
@model Webdiyer.WebControls.Mvc.PagedList<MVCPage.Models.Person>
<table>
<tr>
<th>姓名
</th>
<th>年龄
</th>
<th>性别
</th>
<th></th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Age)
</td>
<td>
@Html.DisplayFor(modelItem => item.Sex)
</td>
<td>
@Html.ActionLink("Delete", "Delete", new { id = item.ID })
</td>
</tr>
}
</table>
<div style="float: left; width: 50%">共 @Model.TotalPageCount 页 @Model.TotalItemCount 条记录,当前为第 @Model.CurrentPageIndex 页</div>
</br>
<div style="float: left; width: 30%">
@Ajax.Pager(Model, new PagerOptions
{
PageIndexParameterName = "id",
ShowPageIndexBox = true,
PageIndexBoxType = PageIndexBoxType.DropDownList,
ShowGoButton = false,
}, new MvcAjaxOptions
{
UpdateTargetId = "MVCpager",
DataFormId = "searchForm"
}, new { style = "float:right" })
</div>
分部视图_ParIndex

这里需要说一下Index页面是默认加载布局页的,我们可以看到布局页已经引用了Jquery1.8,所以index页面就不用再引用了,由于加载布局页所以我们引用Jquery文件时会这样引用:

@section Scripts{@{Html.RegisterMvcPagerScriptResource();}
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"></script>
}

如果没有使用布局页,也就是说当你设置Layout = null;的时候我们直接这样引用

<script type="text/javascript" src="@Url.Content("/Scripts/jquery-1.8.2.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"></script>
@{Html.RegisterMvcPagerScriptResource();}

这里要注意一下:@{Html.RegisterMvcPagerScriptResource();}这一句必须放在最后面。不然控制器Request.IsAjaxRequest()一直会是false;到这里我们的无刷新就基本没有什么问题了

现在说一下在搜索时我是使用Ajax.BeginForm来提交表单的,在Index页面代码里可以看到这里提交时设置成了Get提交方式,而且设置了一个ID属性,new RouteValueDictionary { { "id", "searchForm" } },在分部视图_ParIndex页面的分页控件中我们也设置了一个属性 DataFormId = "searchForm",这样当我们点击下一页时搜索的参数也就可以自动带过去了。

 

asp.net MVC4 +MVCpager的更多相关文章

  1. asp.net MVC4 +MVCpager 无刷新分页

    本人菜鸟,最近在用MVC4和MVCpager做无刷新分页时,发现点击下一页时数据不是Ajax提交的,弄了好久终于找到原因,原来还是Jquery引用的问题,现在把代码粘出来,希望能帮到刚接触的程序员,第 ...

  2. Asp.net MVC4 +EF6开发

    Asp.net MVC4 +EF6开发的个人网站源码和介绍(仅供新手学习) 本项目是我去年利用业余时间开发的,采用的是asp.net mvc 4 +EF6+三层架构,适合新手进行学习,高手就没有什么价 ...

  3. ASP.Net MVC4+Memcached+CodeFirst实现分布式缓存

    ASP.Net MVC4+Memcached+CodeFirst实现分布式缓存 part 1:给我点时间,允许我感慨一下2016年 正好有时间,总结一下最近使用的一些技术,也算是为2016年画上一个完 ...

  4. CentOS上 Mono 3.2.8运行ASP.NET MVC4经验

    周一到周三,折腾了两天半的时间,经历几次周折,在小蝶惊鸿的鼎力帮助下,终于在Mono 3.2.8上运行成功MVC4.在此总结经验如下: 系统平台的版本: CentOS 6.5 Mono 3.2.8 J ...

  5. ASP.NET MVC4入门到精通系列目录汇总

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

  6. [MVC4]ASP.NET MVC4+EF5(Lambda/Linq)读取数据

    继续上一节初始ASP.NET MVC4,继续深入学习,感受了一下微软的MVC4+EF5(EntityFramework5)框架的强大,能够高效的开发出网站应用开发系统,下面就看一下如何用MVC4+EF ...

  7. 21、ASP.NET MVC入门到精通——ASP.NET MVC4优化

    本系列目录:ASP.NET MVC4入门到精通系列目录汇总 删除无用的视图引擎 默认情况下,ASP.NET MVCE同时支持WebForm和Razor引擎,而我们通常在同一个项目中只用到了一种视图引擎 ...

  8. 最新版CentOS6.5上安装部署ASP.NET MVC4和WebApi

    最新版CentOS6.5上安装部署ASP.NET MVC4和WebApi 使用Jexus5.8.1独立版 http://www.linuxdot.net/ ps:该“独立版”支持64位的CentOS ...

  9. Asp.Net MVC4 + Oracle + EasyUI 学习 第二章

    Asp.Net MVC4 + Oracle + EasyUI 第二章 --使用Ajax提升网站性能 本文链接:http://www.cnblogs.com/likeli/p/4236723.html ...

随机推荐

  1. OpenGL缓冲区

    OpenGL缓冲区 颜色缓冲区 OpenGL时,先是在一个缓冲区中完毕渲染,然后再把渲染结果交换到屏幕上. 我们把这两个缓冲区称为前颜色缓冲区(屏幕)和后颜色缓冲区.在默认情况下,OpenGL命令是在 ...

  2. 普及windows流氓程序和监控软件

    win7下载更改后无黑屏windows7激活程序v1.0 一个立即安装 美女主播节目,和流行的色情垃圾邮件 安装程序,结果装了很多垃圾节目,输入.日历.文件等. 重新启动机器后,,会弹出广告. .他的 ...

  3. SSH骨架Struts(1)——Struts执行过程

    收养Struts骨架Web应用,以举例的方式介绍的基本流程. 一.实例 Login.jsp,进行系统登录的页面 <form action="login.do" method= ...

  4. CORS

    CORS(跨域资源共享) 前言:上一篇文章提到使用JSONP实现跨域请求的时候,偶然间提到CORS,即Cross-Origin Resource Sharing(跨域资源共享).虽然前些天也看了一下, ...

  5. PL/SQL Developer下设置“长SQL自己主动换行”

    ***********************************************声明*************************************************** ...

  6. UOJ #5. 【NOI2014】动物园 扩大KMP

    第一次NOI称号. ... 扩展假设知道KMP如果. .. . 就是水题了. ... #5. [NOI2014]动物园 统计提交情况 描写叙述 提交 近日.园长发现动物园中好吃懒做的动物越来越多了.比 ...

  7. Https 客户端与服务器交互过程梳理(转)

    本文试图以通俗易通的方式介绍Https的工作原理,不纠结具体的术语,不考证严格的流程.我相信弄懂了原理之后,到了具体操作和实现的时候,方向就不会错,然后条条大路通罗马.阅读文本需要提前大致了解对称加密 ...

  8. sk_buff整理笔记(两、操作函数)

    承接上一:sk_buff 整理笔记(一.数据结构)这一篇要讲的是内核为sk_buff结构提供的一些操作函数. 第一.首先要讲的是sk_buff中的四大指针: 四大指针各自是:head.data.tai ...

  9. SQL Server 备份和还原全攻略

    原文:SQL Server 备份和还原全攻略 一.知识点 完全备份: 备份全部选中的文件夹,并不依赖文件的存档属性来确定备份那些文件.(在备份过程中,任何现有的标记都被清除,每个文件都被标记为已备份, ...

  10. 删除句子UITableView额外的底线和切割线

    于viewDidLoad添加代码功能句子: self.tableView.tableFooterView = [[UIView alloc] initWithFrame:CGRectZero]; 它可 ...