MVC学习之一_____实现列表及分页 博客分类： MVC4
程序员文章站
2024-02-05 08:09:04
...
模板页代码:
Controller层的代码
备注：Controller层取数据库的值时用了db.AppBasicDatas 这个是用EntityFramework Reverse POCO Code First在代码中自动生成的，可参考我之前的同名博客
此外第三方分页控件是：MvcPager 官网地址是：http://www.webdiyer.com/mvcpager/relatedlinks/ 里面有对控件的使用案例，可参考
css样式表：
补充说明：
1、通过@model PagedList<AppBasicData>声明，模板页就知道要绑定数据的类型
2、模板页的数据集合，通过controller层 return View(list); 拿到对应的数据集
3、PagedList<>是MvcPager分页控件定义的类型，必须在这里面返回集合，才能被控件加载识别，否则会报错
4、如果对分页控件不熟悉，可以在@model 声明时直接定义List<AppBasicData>，这样在列表页会看到所有的表记录信息。
@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} "))
</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>，这样在列表页会看到所有的表记录信息。