MVC学习之一_____实现列表及分页

*YH*

浏览: 191628 次
性别:
来自: 广州

最近访客更多访客>>

ccsxin201

watertonylzc

xx5333

chenyanbin

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

MVC4

模板页代码:

@model PagedList<AppBasicData>   //这里通过绑定PagedList数据给分页提供数据源
@using Webdiyer.WebControls.Mvc; //这个是第三方分页控件的引用
@{

}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>IndexPage</title>
    <link rel="stylesheet" type="text/css" href="~/Content/BasicData/div_table.css" />
</head>
<body>
    <div> 
        <div class="table">
            <div class="tab_tr">
                    <div class="tab_th">名称</div>
                    <div class="tab_th">key值</div>
                    <div class="tab_th">value值</div>
                    <div class="tab_th">创建时间</div>
                    <div class="tab_th">操作</div>
            </div>
            
                @foreach (var item in Model)
                {
                    <div class="tab_tr">
                        <div class="tab-td">@item.Name</div>
                        <div class="tab-td">@item.Key</div>
                        <div class="tab-td">@item.Value</div>
                        <div class="tab-td">@item.CreateDate</div>
                        <div class="tab-td">@Html.ActionLink("编辑", "Edit",new {key = @item.Key}) |@Html.ActionLink("删除", "Delete", new { id = @item.Key})</div>
                    </div>
                }
        </div>
        <div class="text-right">  //这里是第三方分页控件的使用
            @Html.Pager(Model).Options(o => o.SetPageIndexParameterName("id").SetHorizontalAlign("right").SetPagerItemTemplate("{0}&nbsp;"))
        </div>
    </div>
</body>
</html>

Controller层的代码

[HttpGet]
        public ActionResult IndexPage(int id = 1)
        {
            //读取配置的分页条数
            int pageSize = int.Parse(ConfigurationManager.AppSettings["PageSize"].ToString());
            using (var db = new MyDbContext())
            {
                PagedList<AppBasicData> list = db.AppBasicDatas.Where(x => x.DeleteFlag == false).OrderByDescending(a => a.CreateDate).ToPagedList(id, pageSize);
                return View(list);
            }
        }

备注：Controller层取数据库的值时用了db.AppBasicDatas 这个是用EntityFramework Reverse POCO Code First在代码中自动生成的，可参考我之前的同名博客
此外第三方分页控件是：MvcPager 官网地址是：http://www.webdiyer.com/mvcpager/relatedlinks/ 里面有对控件的使用案例，可参考

css样式表：

.table, .table * {
    margin: 0 auto;
    padding: 0;
    font-size: 12px;
    font-family: Arial, 宋体, Helvetica, sans-serif;
}

.table {
    display: table;
    width: 80%;
    border-collapse: collapse;
}

.tab_tr {
    display: table-row;
    height: 30px;
}

.tab_th {
    display: table-cell;
    font-weight: bold; /*给标题字体加粗*/
    height: 100%;
    border: 1px solid gray; /*设置单元格边框*/
    text-align: center;
    vertical-align: middle;
}

.tab-td {
    display: table-cell;
    height: 100%;
    border: 1px solid gray;
    text-align: center;
    vertical-align: middle;
}

补充说明：
1、通过@model PagedList<AppBasicData>声明，模板页就知道要绑定数据的类型
2、模板页的数据集合，通过controller层 return View(list); 拿到对应的数据集
3、PagedList<>是MvcPager分页控件定义的类型，必须在这里面返回集合，才能被控件加载识别，否则会报错
4、如果对分页控件不熟悉，可以在@model 声明时直接定义List<AppBasicData>，这样在列表页会看到所有的表记录信息。

分享到：

MVC学习之三_____跳转到编辑页提交信息 | H5实现滑动切换图片功能

2018-08-29 11:05
浏览 1020
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论