续--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

 

转载于:https://www.cnblogs.com/x-xk/archive/2012/11/23/2783812.html