續--Pager分頁控件 Ajax局部刷新（Mvc樣例）

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

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

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

現在創建好視圖之后我們需要做的就是改掉這個頁面的默認數據，完整的頁面就如下圖，供參考：

@using Webdiyer.WebControls.Mvc@*引用命名空間，給Model加上PageList泛型*@
@model  PagedList<PagerTest.Models.View_SaleTeacherCours>
<div id="ProList">
    <table>
    <tr>
        <th>課程名</th>
        <th>教師名</th>
    </tr>
    @{
    
        foreach(var item in Model)
        {
            <tr><td>@item.Name</td>
            <td>@item.Username</td>
            </tr>
        }
    }
    <tr>
    </tr>
    </table>
    @Ajax.Pager(Model, new PagerOptions() { PageIndexParameterName = "id" }, new AjaxOptions { UpdateTargetId = "ProList" })
 
</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：

完整代碼如下，供參考：

@using Webdiyer.WebControls.Mvc
@model  PagedList<PagerTest.Models.View_SaleTeacherCours>
@{
    ViewBag.Title = "MsAjaxProduc";
}


@*<script src="http://www.cnblogs.com/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>*@
@*<script src="http://www.cnblogs.com/Scripts/MicrosoftAjax.js" type="text/javascript"></script>*@
@*<script src="http://www.cnblogs.com/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>*@
<script src="http://www.cnblogs.com/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
 <h2>ASP.NET MVC Pager 使用 MicrosoftAjax分頁示例</h2>

@{
    Html.RenderPartial("ProducList", Model);
}

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

看下我的效果圖：

 

~~~Url注意

下一頁：

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

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