6.5 实现团队信息分页显示

实现团队信息分页显示

 

1 新建一个Controller TeamInfoController.cs

 

 

成功创建后，会看见：

 

 

TeamInfoController代码如下：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace TeamManager.Controllers

{

    public class TeamInfoController : Controller

    {

        public ActionResult List(int page=1)

        {

            var data = TeamManager.Models.TeamInfoService.GetPage(page);

            return View(data);

        }

    }

}

 

 

 

2 添加对应的View页面

鼠标放在View()那，右键弹出菜单，点击'Add View...'

 

会自动新建对应的View文件

 

List.cshtml代码如下：

@model TeamManager.Models.TeamInfo

@{

    ViewBag.Title = "List";

}

@section style{

    <link href="~/Content/css/c02.css" type="text/css" rel="stylesheet" />

}

@section js{

    <script src="~/Content/js/team.js"></script>

}

@if (null == Model.Data)

{

    <div class="info">无数据</div>

}else{

    <div class="info">

        <div class="title">

            <span>工号</span>

            <span>姓名</span>

            <span>电话</span>

        </div>

        @foreach(var item in Model.Data){

            <div class="row">

                <span>@item.Number</span>

                <span>@item.Name</span>

                <span>@item.Tel</span>

            </div>

        }

        @{

            var canPre = Model.Page > 1;

            var canNext = Model.Page < Model.LastPage;

            var preclass = canPre ? "canop" : "noop";

            var nextclass = canNext ? "canop" : "noop";

            var pre = canPre ? Model.Page - 1 : 1;

            var next = canNext ? Model.Page + 1 : Model.LastPage;

        }

        <div class="ops">

            <span n="@pre" class="@preclass">上一页</span>

            <span>@Model.Page/@Model.LastPage</span>

            <span n="@next" class="@nextclass">下一页</span>

        </div>

    </div>

}

 

 

在Content目录下新建css和js文件

 

 /css/c02.css 模板的css式样

.info {

    width: 500px;

    padding:20px;

    margin:20px auto;

    border: 0px solid gray;

    color: #333;

    font-size: 13px;

}

.info .title span, .info .row span{

    display:block;

    width:150px;

    float:left;

    text-align:center;

    height:30px;

    line-height:30px;

}

.info .title {

    font-weight:bold;

    background-color: #e1dddd;

    width:100%;

    overflow:hidden;

    border-bottom: 0px solid gray;

}

.info .row{

    width:100%;

    overflow:hidden;

    border-bottom: 1px solid gray;

}

.info .ops {

    margin-top:10px;

    text-align:right;

}

.info .ops span{

    margin-left:10px;

}

.info .ops .noop{

    color: #e1dddd;

}

.info .ops .canop{

    color: #0026ff;

    cursor:pointer;

}

 

 /js/team.js 用于翻页操作

$(".canop").click(function () {

    window.location.href = '/TeamInfo/List?page='+ $(this).attr('n');

});