自己动手写 ASP.NET MVC 分页 part1

学习编程也有一年半载了,从来没有自己动手写过东西,都是利用搜索软件找代码,最近偶发感慨,难道真的继续做码农???

突发奇想是不是该自己动手写点东西,可是算法、逻辑思维都太弱了,只能copy网上的代码,所有就从简单的写起,以后会不定期的推出!

下面是我本周业余时间写的 ASP.NET 分页,以不同的方式去实现最终的结果,先给大家看效果图

1、这是最满意的一个分页功能(看图片是不是特别像博客园首页的分页),并且是异步实现:

自己动手写 ASP.NET MVC 分页     part1

自己动手写 ASP.NET MVC 分页     part1

自己动手写 ASP.NET MVC 分页     part1

自己动手写 ASP.NET MVC 分页     part1

自己动手写 ASP.NET MVC 分页     part1

自己动手写 ASP.NET MVC 分页     part1

2、这个是最开始写的一个分页,按钮用的是button (见笑了):

自己动手写 ASP.NET MVC 分页     part1

3、这个是1的前身,从它修改过去的

自己动手写 ASP.NET MVC 分页     part1

自己动手写 ASP.NET MVC 分页     part1

自己动手写 ASP.NET MVC 分页     part1

自己动手写 ASP.NET MVC 分页     part1

自己动手写 ASP.NET MVC 分页     part1

好了效果看完了,得贴代码了(这里声明个事情:我用的是伪数据,如果想直接使用到项目中还的做少量的修改)

如果您发现有不合理的地方希望不腻赐教,小弟先在这里谢过您了!

首先把第一个分页效果的代码贴出来(2,3和1共享的代码我将会标注:1.2.3 共享<共享的代码后面的2.3我就不贴了>)

好了,屁话不说了,文笔不好(语文体育老师教的),将就着看吧 !

1.2.3 共享   定义一个分页类对象 HTMLPager

    /// <summary>
/// 分页类的属性
/// </summary>
public class htmlPager
{
public int pageIndex { get; set; }//当前页
public int countTotal { get; set; }//总条数
public int pageBack {//上一页
get {
if (pageIndex==0)
{
pageIndex = 0;
}
else
{
pageIndex -= 1;
} return pageIndex;
}
}
public int pageNext {//下一页
get
{
if (pageIndex == pageCount)
{
pageIndex = pageCount;
}
else
{
pageIndex += 1;
}
return pageIndex;
}
}
public int pageSize//当前页第三条
{
get {
return 10;
}
}
public int pageCount//总页数
{
get {
return (int)Math.Ceiling(countTotal / (double)pageSize);
}
}
/// <summary>
/// 分页类的属性
/// </summary>
/// <param name="pageIndex">当前页</param>
/// <param name="countTotal">总条数</param>
public htmlPager(int pageIndex, int countTotal)
{
this.pageIndex = pageIndex;
this.countTotal = countTotal;
}
}

  

1.2.3 共享  数据类

  public class UserInfo
{
public string userName { get; set; }
public int userAge { get; set; }
public string userSex { get; set; }
public double userHeight { get; set; }
public double userWeight { get; set; }
}

数据对象类

 public class getUserInfo
{
private static List<UserInfo> listUserInfo = new List<UserInfo>(); public static List<UserInfo> getInfo()
{
UserInfo ui1 = new UserInfo { userName = "小明", userAge = , userSex = "男", userHeight = , userWeight = };
UserInfo ui2 = new UserInfo { userName = "张三", userAge = , userSex = "男", userHeight = , userWeight = };
UserInfo ui3 = new UserInfo { userName = "美霖", userAge = , userSex = "女", userHeight = , userWeight = };
UserInfo ui4 = new UserInfo { userName = "姜夏", userAge = , userSex = "男", userHeight = , userWeight = };
UserInfo ui5 = new UserInfo { userName = "知鸟", userAge = , userSex = "男", userHeight = , userWeight = };
UserInfo ui6 = new UserInfo { userName = "知鸟分页", userAge = , userSex = "女", userHeight = , userWeight = };
UserInfo ui7 = new UserInfo { userName = "分页", userAge = , userSex = "男", userHeight = , userWeight = }; for (int i = ; i <; i++)
{
listUserInfo.Add(ui1);
listUserInfo.Add(ui2);
listUserInfo.Add(ui3);
listUserInfo.Add(ui4);
listUserInfo.Add(ui5);
listUserInfo.Add(ui6);
listUserInfo.Add(ui7);
}
return listUserInfo;
}
}

数据类

1.  独有  action方法

 public ActionResult pagehtml(int indexpage = 1) //主要是1的视图
{
return View();
}

下面给出视图 pagehtml.cshtml 中的代码

1.2.3 共享  html代码

<html>
<head>
<title> 实现分页功能 </title>
<style type="text/css">
body {
font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; width: 60%;padding-left: 25px;
}
DIV.digg {
PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center
}
DIV.digg A {
BORDER-RIGHT: #aaaadd 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #aaaadd 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #aaaadd 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #aaaadd 1px solid; TEXT-DECORATION: none
}
DIV.digg A:hover {
BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; BORDER-BOTTOM: #000099 1px solid
}
DIV.digg A:active {
BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; BORDER-BOTTOM: #000099 1px solid
}
DIV.digg SPAN.disabled {
BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #eee 1px solid; COLOR: #ddd; PADDING-TOP: 2px; BORDER-BOTTOM: #eee 1px solid
}
.current {
BORDER-RIGHT: #000099 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #000099 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #000099 1px solid; COLOR: #FAFAFA; PADDING-TOP: 2px; BORDER-BOTTOM: #000099 1px solid; BACKGROUND-COLOR: #000000;
}
</style>
</head> <body>
<div>
<table id="testtable">
</table>
</div>
<div id="pageChangeID" class="digg">
</div>
<input type="hidden" id="hiddenPage" value="1"/> <!--存储当前页的值-->
</body>
</html>

1. 独有  js代码

<script src="../../Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function () {
$.ajax({
url: '/Home/pagehtmldata/',
type: 'post',
data: { indexpage: $("#hiddenPage").val() },
success: function (data) {
var str = data.split('|-|-|');
$("#testtable").html(str[0]);
$("#pageChangeID").html(str[1]);
}
});
}
function ChangePage(thisvalue) {
var currentvalue = $(thisvalue).text();
var hiddenPage = $("#hiddenPage").val();
if (hiddenPage != currentvalue) {//判断点击的是否是上次的那一页
$("#hiddenPage").val(currentvalue);
$(thisvalue).addClass('current');
$.ajax({
url: '/Home/pagehtmldata/',
type: 'post',
data: { indexpage: $(thisvalue).text() },
success: function (data) {
var str = data.split('|-|-|');
$("#testtable").html(str[0]);
$("#pageChangeID").html(str[1]);
}
});
}
}
function PrePage(thisvalue) {
var prePage=$("#hiddenPage").val()-1;
$("#hiddenPage").val(prePage);
$.ajax({
url: '/Home/pagehtmldata/',
type: 'post',
data: { indexpage: prePage },
success: function (data) {
var str = data.split('|-|-|');
$("#testtable").html(str[0]);
$("#pageChangeID").html(str[1]);
}
});
}
function NextPage(thisvalue) {
var nextPage =parseInt($("#hiddenPage").val()) + 1;
$("#hiddenPage").val(nextPage);
$.ajax({
url: '/Home/pagehtmldata/',
type: 'post',
data: { indexpage: nextPage },
success: function (data) {
var str = data.split('|-|-|');
$("#testtable").html(str[0]);
$("#pageChangeID").html(str[1]);
}
});
}
</script>

1. 独有    下面给出视图中js调用的的action 方法 :pagehtmldata

        [HttpPost]
public JsonResult pagehtmldata(int indexpage = 1)
{
string HTMLpage = "<thead><tr><th>序号</th><th>用户名</th><th>年龄</th> <th>性别</th><th>身高</th><th>体重</th></tr></thead> <tbody>";
List<UserInfo> userInfo = getUserInfo.getInfo();//数据来源
htmlPager hp = new htmlPager(Int32.Parse(indexpage.ToString()), userInfo.Count);//对来源数据进行分页
if (indexpage > hp.pageCount)
{
indexpage = hp.pageCount;
}
List<UserInfo> usData = userInfo.Skip((hp.pageIndex-1) * hp.pageSize).Take(hp.pageSize).ToList<UserInfo>();//分页后的数据,从0开始
for (int i = 0; i < usData.Count; i++)
{
HTMLpage += "<tr><td>" + i + "</td>" + "<td>" + usData[i].userName + "</td>" + "<td>" + usData[i].userAge + "</td>" + "<td>" + usData[i].userSex + "</td>" + "<td>" + usData[i].userHeight + "</td>" + "<td>" + usData[i].userWeight + "</td></tr>";
}
HTMLpage += "</tbody>|-|-|";//|-|-| 用于分拆数据 前面是表格数据,后面是分页标签
HTMLpage += getpage(hp, indexpage);//分页html
return Json(HTMLpage);
}

1. 独有  pagehtmldata 中调用了 getpage(它是用来处理分页效果的实现)

 public string getpage(htmlPager hp, int indexpage = 1)
{
string html = "";
string firstClassName = "";
if (indexpage==1)
{
firstClassName = " class='current'";
}
string firstpage = " <a href='javascript:void(0)'" + firstClassName + " onclick='ChangePage(this)'>" + 1 + "</a>";//第一页
string omitpage = " <a href='javascript:void(0)'>...</a>";//省略的页
string prepage = "<a href='javascript:void(0)' onclick='PrePage(this)'><<</a>";//上一页
string nextpage = " <a href='javascript:void(0)' onclick='NextPage(this)'>>></a>";//下一页
string countpage = " <a href='javascript:void(0)' onclick='ChangePage(this)'>" + hp.pageCount + "</a>";
#region 当前为第 1 页时
if (indexpage==1)
{
if (hp.pageCount==1)//如果总页数 1 , 则不显示页数!
{
return html;
}
html += firstpage;//第一页
int pageCount=hp.pageCount;
if (pageCount>5)
{
pageCount = 5;
}
for (int i = 2; i <= pageCount; i++)
{
string className = "";
if (i == indexpage)
{
className = "current";
}
html += " <a href='javascript:void(0)' class='" + className + "' onclick='ChangePage(this)'>" + i + "</a>";
}
if (hp.pageCount>5)
{
html += omitpage + countpage + nextpage;
}
}
#endregion
#region 当前页 <= 5 时
else if (indexpage<=5)
{
html += prepage + firstpage;//第一页
int pageCount = hp.pageCount;
if (pageCount > 8)
{
switch (indexpage)
{
case 2:
pageCount = 5;
break;
case 3:
pageCount = 5;
break;
case 4:
pageCount = 6;
break;
case 5:
pageCount = 7;
break;
default:
break;
}
}
for (int i = 2; i <= pageCount; i++)
{
string className = "";
if (i == indexpage)
{
className = "current";
}
html += " <a href='javascript:void(0)' class='" + className + "' onclick='ChangePage(this)'>" + i + "</a>";
}
if (hp.pageCount > 5)
{
html += omitpage + countpage + nextpage;
}
}
#endregion
#region 当前页 >5 时
else
{
html += prepage + firstpage + omitpage;//第一页
int pageCount = hp.pageCount;
if (indexpage+3<pageCount)
{
pageCount = indexpage + 3;
}
for (int i = indexpage-3; i <= pageCount; i++)
{
string className = "";
if (i == indexpage)
{
className = "current";
}
html += " <a href='javascript:void(0)' class='" + className + "' onclick='ChangePage(this)'>" + i + "</a>";
}
if (hp.pageCount > 5)
{
html += omitpage + countpage + nextpage;
}
}
#endregion
return html;
}

  对应另外2个分页 我直接把项目给打包了,如果你要看也是不错的,只是代码有点多,不易在项目中使用!

开发环境是VS2010 MVC4

望不腻赐教!

源码下载 :http://pan.baidu.com/s/1eQzYAiA

 

本篇为原创: 转载请注明出处知鸟 www.cnblogs.com/izhiniao  谢谢!

上一篇:《深入.NET平台和C#编程》内部测试题


下一篇:EasyUI form ajax submit到MVC后,在IE下提示下载内容的解决办法