最近在学习Bootstrap的分页,有一种方法用“Bootstrap-Paginator”的东西来做。

布局(Razor Layout)

先预览一下:

布局类似于APSX视图的母版页,用的是Razor语法。

bet36365注册送奖金 1

 

为了能够局部刷新页面,我创建了一个PartialView

创建布局

 

新建一个Default控制器,添加两个Action方法。

页面的HTML部分如下:

bet36365注册送奖金 2bet36365注册送奖金 3

bet36365注册送奖金 4bet36365注册送奖金 5

public class DefaultController : Controller
{
    //父视图的Action
    public ActionResult fatherPage()
    {
        return View();
    }

 1 < div class ="tableContainer">   2     < input id ="currentPage" type ="hidden" value =" @ViewData[ "currentPage"] "/>   3     < input id ="totalPages" type ="hidden" value =" @ViewData["totalPages" ] " />   4     < table class ="table table-hover table-striped">   5         < thead>   6             < tr>   7                 < th class ="col-md-4 text-center"> 乘车码 </th >   8                 < th class ="col-md-4 text-center"> 订单号 </th >   9                 < th class ="col-md-4 text-center"> 订单日期 </th >  10             </ tr>  11         </ thead>  12         < tbody>  13             @foreach ( var item in Model)  14             {  15                 < tr>  16                     < td> @item.BusNo </ td>  17                     < td> @item.OrderId </ td>  18                     < td> @item.OrderDate </ td>  19                 </ tr>  20             }  21         </ tbody>  22     </ table>  23     < ul id ="example"></ ul>  24 </ div >

    //子视图的Action
    public ActionResult chilPage()
    {
        return View();
    }
}

View Code 

View
Code

页面的JavaScript部分如下:(此处需要引用插件bootstrap-paginator,具体的使用方法也在官网能看到,这里就不再详述)

为faherPage添加视图

bet36365注册送奖金 6bet36365注册送奖金 7

bet36365注册送奖金 8

 1 @ Scripts.Render( "~/bundles/bootstrap-paginator" )   2 < script type ="text/javascript">   3     $( '#example' ).bootstrapPaginator({   4         currentPage: $( '#currentPage' ).val(),   //当前页   5         totalPages: $( '#totalPages' ).val(),     //总页数   6         bootstrapMajorVersion: 3,               //兼容Bootstrap3.x版本   7         tooltipTitles: function (type, page) {   8             switch (type) {   9                 case "first" :  10                     return "第一页" ;  11                 case "prev" :  12                     return "上一页" ;  13                 case "next" :  14                     return "下一页" ;  15                 case "last" :  16                     return "最后一页" ;  17                 case "page" :  18                     return page;  19             }  20             return "" ;  21         },  22         onPageClicked: function (event, originalEvent, type, page) {  23             $.get( '/Home/GetPaginationData' , { currentPage: page, pageSize:10 }, function (view) {  24                 $( '#tableTest' ).html(view);  25             });  26         }  27     });  28 </ script >

为chilPage添加视图,选择布局页,选择fatherPage作为自己的父页面

View Code

bet36365注册送奖金 9

上面的“#tableTest”是一个div,是< div class =”tableContainer”>的父节点,在父页面中占位,就是说当页面数据返回将刷新整个PartialView,后台是一个GET,如下:

打开chiPage.cshtml,可以看到刚才因为选择了布局页为fatherPage,所以layout就指向了fatherPage

 

bet36365注册送奖金 10bet36365注册送奖金 11

bet36365注册送奖金 12bet36365注册送奖金 13

@{
    ViewBag.Title = “chilPage”;
    Layout = “~/Views/Default/fatherPage.cshtml”;
}

 1 public ActionResult GetPaginationData( int currentPage = 1, int pageSize = 10)   2         {   3             using (var context = new TestEntities ())   4             {   5                 int count;   6                 var q = (from a in context.Tickets   7                          join b in context.Order on a.OrderId equals b.Id   8                          select new TableItem   9                          {  10                              BusNo = a.BusNumber,  11                              OrderId = b.Id,  12                              OrderDate = b.OrderDateTime,  13                          }).Pagination(currentPage, pageSize, out count);  14                 var data = q.ToList();  15                 ViewData[ "totalPages" ] = count / pageSize + 1; //计算分页后总的页面数  16                 ViewData[ "currentPage" ] = currentPage;  //当前页码  17                 return PartialView("~/Views/Home/OrderList.cshtml" ,data);  18             }  19         }

<h2>子页面</h2>

View Code

View
Code

 

 在父页面中渲染子页面需要使用RenderBody方法

      

bet36365注册送奖金 14bet36365注册送奖金 15

 其中的Pagination扩展函数用于数据库分页,请参考我的另外一篇博文 “Entity
Framework 分页处理”

bet36365注册送奖金,<!DOCTYPE html>

 

<html>
<head>
    <meta name=”viewport” content=”width=device-width” />
    <title>Index</title>
</head>
<body>
    <div style=”background:#ff5252;width:400px;height:100px;font:12px Arial;padding:10px;color:white;”>
        <h1>父页面</h1>
        <div style=”background:black; width:200px;”>@RenderBody()</div> 
    </div> 
</body>
</html>


View
Code

这样,当请求子页面的时候,会动态将父页面加载进去。但不能直接请求父视图,它只作为固定不变的内容被使用。

bet36365注册送奖金 16

 

布局的三个方法

在父视图页面中可使用以下三个方法加载子视图页面。

1.RenderBody()方法

渲染一个子视图页面,请求的子视图页面会自动加载父视图页面(布局页)。只要A视图页面是引用布局页创建的
,那么访问A视图页面就会先加载布局页,布局页的RenderBody指的就是A视图页面,如果B视图页面也引用了布局页,那么访问B视图页面也会先加载布局页,布局页RenderBody指的就是B视图页面。

2.RenderPage()方法

将一个固定的视图页面渲染到布局页中,可以在布局中多次使用。假设有一个固定不变的menu页面需要加入到布局页中,如以下所示,这样在请求任何子页面视图的时候menu页也会成为父视图页面的固定一部分被加载到子视图页面中。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图