asp.net MVC4 +MVCpager 无刷新分页

本人菜鸟，最近在用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="width: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  }

视图Index页面

 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>

布局页_Layout.cshtml

 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; width: 50%">共 @Model.TotalPageCount 页 @Model.TotalItemCount 条记录，当前为第 @Model.CurrentPageIndex 页</div>
32 </br>
33 <div style="float: left; width: 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>

分部视图_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 无刷新分页

相关文章