本人菜鸟，最近在用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"，这样当我们点击下一页时搜索的参数也就可以自动带过去了。
时间： 2024-10-16 22:12:58