本人菜鸟，最近在用MVC4和MVCpager做无刷新分页时，发现点击下一页时数据不是Ajax提交的，弄了好久终于找到原因，原来还是Jquery引用的问题，现在把代码粘出来，希望能帮到刚接触的程序员，第一次自己写博客，文才不好，有什么改进的地方还希望大神多多指教。
1 using Webdiyer.WebControls.Mvc; 2 namespace MVCPage.Controllers 3 { 4 public class HomeController : Controller 5 { 6 public ActionResult Index(int?id,string name) 7 { 8 id = id ?? 1; 9 int pageSize =3; 10 DemoDBEntities db = new DemoDBEntities(); 11 IQueryable<Person> temp = db.Person.Where(c =>true).OrderBy(c=>c.ID); 12 PagedList<Person> pageList = temp.AsQueryable<Person>().ToPagedList<Person>(id.Value, pageSize); 13 if (Request.IsAjaxRequest()) 14 { 15 return PartialView("_ParIndex",pageList); 16 } 17 return View(pageList); 18 } 19 } 20 }
这是先提醒一下，新建项目后必须引用MVCpager.dll，引用时希望去下载最新的2.0版本，不然还会有其他问题。
1 @using Webdiyer.WebControls.Mvc 2 @model Webdiyer.WebControls.Mvc.PagedList<MVCPage.Models.Person> 3 @{ 4 ViewBag.Title = "Index"; 5 } 6 <div> 7 @using (Ajax.BeginForm("index", new RouteValueDictionary { { "id", "" } }, 8 new AjaxOptions { UpdateTargetId = "articles", HttpMethod = "Get", 9 InsertionMode = InsertionMode.Replace}, new RouteValueDictionary { { "id", "searchForm" } })) 10 { 11 <input placeholder="请输入姓名" type="text" name="name" id="source" style="120px"/> 12 <input type="submit" value="搜索"/> 13 } 14 </div> 15 <div id="MVCpager"> 16 @Html.Partial("_ParIndex", Model) 17 </div> 18 @section Scripts{@{Html.RegisterMvcPagerScriptResource();} 19 <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"></script> 20 }
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>@ViewBag.Title</title> 5 </head> 6 7 <body> 8 @RenderBody() 9 <script type="text/javascript" src="/Scripts/jquery-1.8.2.min.js"></script> 10 @RenderSection("Scripts",false) 11 </body> 12 </html>
1 @using Webdiyer.WebControls.Mvc 2 @model Webdiyer.WebControls.Mvc.PagedList<MVCPage.Models.Person> 3 <table> 4 <tr> 5 <th>姓名 6 </th> 7 <th>年龄 8 </th> 9 <th>性别 10 </th> 11 <th></th> 12 </tr> 13 @foreach (var item in Model) 14 { 15 <tr> 16 <td> 17 @Html.DisplayFor(modelItem => item.Name) 18 </td> 19 <td> 20 @Html.DisplayFor(modelItem => item.Age) 21 </td> 22 <td> 23 @Html.DisplayFor(modelItem => item.Sex) 24 </td> 25 <td> 26 @Html.ActionLink("Delete", "Delete", new { id = item.ID }) 27 </td> 28 </tr> 29 } 30 </table> 31 <div style="float: left; 50%">共 @Model.TotalPageCount 页 @Model.TotalItemCount 条记录，当前为第 @Model.CurrentPageIndex 页</div> 32 </br> 33 <div style="float: left; 30%"> 34 @Ajax.Pager(Model, new PagerOptions 35 { 36 PageIndexParameterName = "id", 37 ShowPageIndexBox = true, 38 PageIndexBoxType = PageIndexBoxType.DropDownList, 39 ShowGoButton = false, 40 }, new MvcAjaxOptions 41 { 42 UpdateTargetId = "MVCpager", 43 DataFormId = "searchForm" 44 }, new { style = "float:right" }) 45 </div>
这里需要说一下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"，这样当我们点击下一页时搜索的参数也就可以自动带过去了。