續–Pager分頁控制項 Ajax局部重新整理（Mvc範例）

上次記錄了Pager分頁控制項的使用，現在，問題又來了。怎麼使頁面重新整理又不改動Url呢？Url的改動，引起頁面的改變。所以不得不又重新研究一下Pager控制項，下面開始介紹怎麼使用Pager分頁控制項的ajax實現，看不懂的可以先參考一下我的另一篇，《Pager開原始檔控制使用（MVC）》：

　　首先我們要建立一個局部視圖：

在此注意一點，需要把“建立為分部視圖”選上，因為這個Demo就是已分部視圖來實現Ajax局部重新整理。

現在建立好視圖之後我們需要做的就是改掉這個頁面的預設資料，完整的頁面就如，供參考：

 1 @using Webdiyer.WebControls.Mvc@*引用命名空間，給Model加上PageList泛型*@ 2 @model  PagedList<PagerTest.Models.View_SaleTeacherCours> 3 <div id="ProList"> 4     <table> 5     <tr> 6         <th>課程名</th> 7         <th>教師名</th> 8     </tr> 9     @{10     11         foreach(var item in Model)12         {13             <tr><td>@item.Name</td>14             <td>@item.Username</td>15             </tr>16         }17     }18     <tr>19     </tr>20     </table>21     @Ajax.Pager(Model, new PagerOptions() { PageIndexParameterName = "id" }, new AjaxOptions { UpdateTargetId = "ProList" })22  23 </div>

這個頁面很關鍵，首先命名空間引用就不說了，注意下方的：
 @Ajax.Pager(Model, new PagerOptions() { PageIndexParameterName = "id" }, new AjaxOptions { UpdateTargetId = "ProList" }) 

這句的使用的要點是，需要包裹在div id=“ProList”中，再注意這一句UpdateTargetId = "ProList"，ProList就是div的id。

好了這個頁面完成。

下面來做大家都很熟悉的事：

開啟需要分頁的Controllers：

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;using PagerTest.Models;using Webdiyer.WebControls.Mvc;namespace PagerTest.Controllers{    public class OrderController : Controller    {        DBDataContext db = new DBDataContext();        public ActionResult MsAjaxProduct(int ? id,int proid=1)        {            PagedList<View_SaleTeacherCours> list = db.View_SaleTeacherCours.ToPagedList(id ?? 1, 2);            if (Request.IsAjaxRequest())                return PartialView("ProducList", list);            return View(list);        }    }}

順帶介紹下ToPagedList(id ?? 1,2)預設顯示第1頁，每頁2行。
然後看看View：

完整代碼如下，供參考：

 1 @using Webdiyer.WebControls.Mvc 2 @model  PagedList<PagerTest.Models.View_SaleTeacherCours> 3 @{ 4     ViewBag.Title = "MsAjaxProduc"; 5 } 6  7  8 @*<script src="http://www.cnblogs.com/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>*@ 9 @*<script src="http://www.cnblogs.com/Scripts/MicrosoftAjax.js" type="text/javascript"></script>*@10 @*<script src="http://www.cnblogs.com/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>*@11 <script src="http://www.cnblogs.com/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>12  <h2>ASP.NET MVC Pager 使用 MicrosoftAjax分頁樣本</h2>13 14 @{15     Html.RenderPartial("ProducList", Model);16 }

前3個Script引用，我一一測試過，對於我沒有都沒什麼關係，頁面照樣是無重新整理，第4個Script這個就必須要引用了，沒有這個，可就不能實現局部重新整理。
當然，這些都不需要下載，在項目的Script的檔案夾中內建有，我是隨便拖過來就用上了，如果要規範點，那個src  就需要用@Url.Content(.....)來填充，順帶說一下，不要拍磚哦(^。^)。

看下我的：

 

~~~Url注意

下一頁：

Demo 造完。o(≧v≦)o~~

送上附件- -。 一個個郵  也麻煩:http://files.cnblogs.com/x-xk/PagerTest.zip