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

送上附件- -。 一个个邮  也麻烦:https://files.cnblogs.com/x-xk/PagerTest.zip