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

阅读更多

模板页代码:

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

}





    
    
    


    
 
        

            

                    
名称
                    
key值
                    
value值
                    
创建时间
                    
操作
            
            
                @foreach (var item in Model)
                {
                    

                        
@item.Name
                        
@item.Key
                        
@item.Value
                        
@item.CreateDate
                        
@Html.ActionLink("编辑", "Edit",new {key = @item.Key}) |@Html.ActionLink("删除", "Delete", new { id = @item.Key})
                    
                }
        
        
  //这里是第三方分页控件的使用
            @Html.Pager(Model).Options(o => o.SetPageIndexParameterName("id").SetHorizontalAlign("right").SetPagerItemTemplate("{0} "))
        
    

Controller层的代码

[HttpGet]
        public ActionResult IndexPage(int id = 1)
        {
            //读取配置的分页条数
            int pageSize = int.Parse(ConfigurationManager.AppSettings["PageSize"].ToString());
            using (var db = new MyDbContext())
            {
                PagedList 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声明，模板页就知道要绑定数据的类型
2、模板页的数据集合，通过controller层  return View(list); 拿到对应的数据集
3、PagedList<>是MvcPager分页控件定义的类型，必须在这里面返回集合，才能被控件加载识别，否则会报错
4、如果对分页控件不熟悉，可以在@model 声明时直接定义List，这样在列表页会看到所有的表记录信息。