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

 using Webdiyer.WebControls.Mvc;
namespace MVCPage.Controllers
{
public class HomeController : Controller
{
public ActionResult Index(int?id,string name)
{
id = id ?? ;
int pageSize =;
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版本,不然还会有其他问题。

 @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页面

 <!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

 @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..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. MvcPager无刷新分页,包含搜索和跳转功能

    1.MVC无刷新分页和搜索(第一版)  http://pan.baidu.com/s/1eRQ7Ml8  密码:uqf7 出现的问题: 1)程序不走判断条件一直为false, 错误原因:1)可能没有引 ...

  2. asp.net练习②——Paginaton无刷新分页

    aspx代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server" ...

  3. asp.net MVC4 +MVCpager

    asp.net MVC4 +MVCpager 无刷新分页 本人菜鸟,最近在用MVC4和MVCpager做无刷新分页时,发现点击下一页时数据不是Ajax提交的,弄了好久终于找到原因,原来还是Jquery ...

  4. ASP.NET中无刷新分页

    上次介绍了我们代码写的刷新分页,这次就来说说无刷新分页. 这次我们是在上次的基础上改动了一些,我们都知道想要无刷新,就需要Ajax,在我们的ASP.NET中AJax是和一般处理程序配合着用的. 无刷新 ...

  5. MvcPager.dll使用实现无刷新分页以及MvcPager的Nuget程序包实现刷新分页

    无刷新分页: 1.引入JQuery的NuGet程序包 2.引入程序包 3.引入MvcPager.dll  ,MvcPager.dll文件下载链接http://pan.baidu.com/s/1hsvB ...

  6. ASP.NET Ajax简单的无刷新分页

    最近练习了一些AJAX无刷新分页,写得比较简单,性能不知道怎么样,求大神指点,如有更好的分页提供,欢迎交流! 发话不多说了,直接上代码! 首先从网上下了一个JS分页,感觉挺好用的 (function( ...

  7. MVC无刷新分页

    MVC无刷新分页(即局部刷新,带搜索,页数选择,排序功能)   我查看了很多网站,大部分评论分页都是局部刷新的,可大部分电商商品展示分页都是有刷新页面的,于是我便做了一个商品展示无刷新分页的例子.接下 ...

  8. MVC无刷新分页(即局部刷新,带搜索,页数选择,排序功能)

    我查看了很多网站,大部分评论分页都是局部刷新的,可大部分电商商品展示分页都是有刷新页面的,于是我便做了一个商品展示无刷新分页的例子.接下来我就将做一个模仿淘宝已买到的宝贝功能,不过我的是无刷新分页的. ...

  9. 自己动手用Javascript写一个无刷新分页控件

    .NET技术交流群:337901356 ,欢迎您的加入! 对 于一个用户体验好的网站来说,无刷新技术是很重要的,无刷新,顾名思义,就是局部刷新数据,有用过Asp.net Web Form技术开发网页的 ...

随机推荐

  1. CentOS 6.4 LNMP 环境编译安装

    1.关闭 SELinux 编辑 /etc/selinux/config SELINUX="disabled" 2.安装编译器 yum install gcc gcc-c++ -y ...

  2. python运维开发(二十二)---JSONP、瀑布流、组合搜索、多级评论、tornado框架简介

    内容目录: JSONP应用 瀑布流布局 组合搜索 多级评论 tornado框架简介 JSONP应用 由于浏览器存在同源策略机制,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. ...

  3. 负载均衡集群之LVS持久链接

    原理--> 通过构建一个hash表,利用CIP与RS的对应关系,来保持来自一个CIP的各种服务都走同一个RS 目的--> 保持持久链接的同时,将多个服务合并起来,例如http和https ...

  4. Java Spring MVC

    Spring MVC的实现包括 实现Controller类和基于注解的Controller RequstMapping方式 依赖: <!-- https://mvnrepository.com/ ...

  5. javascript string对象的属性与方法

    一 创建string对象 new string('string'); 更直接的定义方法是var str = 'string'; 二 string属性 1.constructor 2.lenght 字符 ...

  6. 处理事件的方式:两种类的覆盖处理(自己管理,覆盖专用事件函数;自己统一管理,覆盖QWidget::Event通用函数),一种对象的处理(父控件统一管理,即安装过滤器),两种全局处理(QCoreApplication安装过滤器;覆盖notify方法)

    虽然只有一句话,但却是我自己的心得. 特别注意,bool QCoreApplication::notify(QObject *receiver, QEvent *event) 明确指明了要发送的对象, ...

  7. MVC 模型绑定

    在WebForm,获取提交表单的值一般都是Request.Form["Title"]这样的方式.在MVC中,提供了模型绑定机制.让后台获取表单或Url中的参数变得更加简单. 一.基 ...

  8. 序列化与反序列化 - BinaryFormatter二进制(.dat)、SoapFormatter(.soap)、XmlSerializer(.xml)

    序列化的作用是什么?为什么要序列化? 1.在进程下次启动时读取上次保存的对象的信息. 2.在不同的应用程序域或进程之间传递数据. 3.在分布式应用程序中的各应用程序之间传输对象. 所为序列化,就是将对 ...

  9. ServerProperties

    Spring Boot 其默认是集成web容器的,启动方式由像普通Java程序一样,main函数入口启动.其内置Tomcat容器或Jetty容器,具体由配置来决定(默认Tomcat).当然你也可以将项 ...

  10. elasticsearch 搜索不支持单词的部分进行匹配

    zjtest7-frontend:/usr/local/logstash-2.3.4/config# curl -XGET http://192.168.32.80:9200/logstash-201 ...