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 ?? ;
             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"，这样当我们点击下一页时搜索的参数也就可以自动带过去了。