01 标准Ajax分页

第一步：引用程序集：Webdiyer.MvcPager.dll

第二步：必须设置UpdateTargetId属性，因为这个属性相于当点击知请求的内容放在那个容器中

Ajax.Pager()方法返回AjaxPager对象，您可以通过Ajax.Pager()方法的重载来传递PagerOptions和MvcAjaxOptions参数，也可以通过新的AjaxPager的Options()和AjaxOptions()方法来设置参数值。

例：

<div class="text-center">
    @Ajax.Pager(Model, new PagerOptions { PageIndexParameterName = "pageIndex", ContainerTagName = "ul", CssClass = "pagination", CurrentPagerItemTemplate = "<li class=\"active\"><a href=\"#\">{0}</a></li>", DisabledPagerItemTemplate = "<li class=\"disabled\"><a>{0}</a></li>", PagerItemTemplate = "<li>{0}</li>" }).AjaxOptions(a => a.SetUpdateTargetId("articles"))
</div>
    @Ajax.Pager(Model, new PagerOptions { PageIndexParameterName = "id", ContainerTagName = "ul", PrevPageText = "上页", NextPageText = "下页", FirstPageText = "首页", LastPageText = "尾页", CssClass = "pagination", CurrentPagerItemTemplate = "<li class=\"active\"><a href=\"#\">{0}</a></li>",DisabledPagerItemTemplate = "<li class=\"disabled\"><a>{0}</a></li>",PagerItemTemplate = "<li>{0}</li>" }, new MvcAjaxOptions { UpdateTargetId = "articles" })

前台代码：

@{
    ViewBag.Title = "AajxPage";
    Layout = "~/Views/Master/Master.cshtml";
}
@using Webdiyer.WebControls.Mvc;



@model PagedList<MvePage.Models.Article>
<html>
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<head>
    <style type="text/css">

        .table {

            border-collapse:collapse;
           
        }
        tr {
            border:1px solid red;
        }
            .table td {

                border:1px solid #f00
            }


        .text-center {

            width:100%;
           
        }


        ul {

            list-style:none;
            
        }

        li {
           float:left;
           height:15px;
           width:40px;
        }


       


    </style>
    <title></title>
</head>
<body>
   
  
    @DateTime.Now
    <div id="articles">这是请求顺应数据的容器
    @Html.Partial("_ArticleList",Model) 请求的页面
</div>

   @{Html.RegisterMvcPagerScriptResource();} 这个是需要引用的JS 
</body>
</html>

　　

 1 @{
 2     Layout = null;
 3 }
 4 @using Webdiyer.WebControls.Mvc
 5 @model PagedList<MvePage.Models.Article>
 6  <table class="table">
 7 
 8         <tr>
 9             <td>序号</td>
10             <td>创建时间</td>
11             <td>文章标题</td>
12             <td>作者</td>
13             <td>文章来源</td>
14         </tr>
15         @{
16             if (Model != null && Model.Count > 0)
17             {
18                 foreach (var item in Model)
19                 {         
20             <tr>
21                 <td>@item.ID</td>
22                   <td></td>
23                 <td></td>
24                 <td></td>
25                 <td></td>
26             </tr>
27                 }
28             }
29        
30         }
31     </table>
32 <div class="text-center">
33     @Ajax.Pager(Model, new PagerOptions { PageIndexParameterName = "pageIndex", ContainerTagName = "ul", CssClass = "pagination", CurrentPagerItemTemplate = "<li class=\"active\"><a href=\"#\">{0}</a></li>", DisabledPagerItemTemplate = "<li class=\"disabled\"><a>{0}</a></li>", PagerItemTemplate = "<li>{0}</li>" }).AjaxOptions(a => a.SetUpdateTargetId("articles"))
34 </div>
请求页面
 1 using MvePage.Models;
 2 using System;
 3 using System.Collections.Generic;
 4 using System.Linq;
 5 using System.Web;
 6 using System.Web.Mvc;
 7 
 8 using Webdiyer.WebControls.Mvc;
 9 
10 namespace MvePage.Controllers
11 {
12     public class AjaxPageController : Controller
13     {
14        
15 
16 
17         public ActionResult AajxPage(string pageIndex)
18         {
19          List<Article> articles= GetArticles();
20          PagedList<Article> model = articles.ToPagedList(Convert.ToInt32(pageIndex), 5);
21          if(Request.IsAjaxRequest())
22          {
23 
24              return PartialView("_ArticleList", model);
25          }
26          
27          return View(model);
28         }
29 
30         public List<Article> GetArticles()
31         {
32 
33             List<Article> articles = new List<Article>();
34 
35             for (int i = 0; i < 1000; i++)
36             {
37                 Article article = new Article()
38                 {
39                     ID = i,
40                     PubDate = DateTime.Now
41 
42                 };
43                 articles.Add(article);
44             }
45 
46             return articles;
47         }
48 
49     }
50 }
请求前台

posted on 2015-09-06 12:15  高达  阅读(167)  评论(0)    收藏  举报

导航