本人菜鳥，最近在用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 }
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; 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>
這裏需要說一下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"，這樣當我們點擊下一頁時搜索的參數也就可以自動帶過去了。