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 ?? 1;
int pageSize =3;
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版本，不然还会有其他问题。
视图Index页面@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页面
布局页_Layout.cshtml<!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
分部视图_ParIndex@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.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"，这样当我们点击下一页时搜索的参数也就可以自动带过去了。
