自己动手写 ASP.NET MVC 分页 part1
学习编程也有一年半载了，从来没有自己动手写过东西，都是利用搜索软件找代码，最近偶发感慨，难道真的继续做码农？？？
突发奇想是不是该自己动手写点东西，可是算法、逻辑思维都太弱了，只能copy网上的代码，所有就从简单的写起，以后会不定期的推出！
下面是我本周业余时间写的 ASP.NET 分页，以不同的方式去实现最终的结果，先给大家看效果图
1、这是最满意的一个分页功能（看图片是不是特别像博客园首页的分页），并且是异步实现：
2、这个是最开始写的一个分页，按钮用的是button (见笑了)：
3、这个是1的前身，从它修改过去的
好了效果看完了，得贴代码了(这里声明个事情：我用的是伪数据，如果想直接使用到项目中还的做少量的修改)
如果您发现有不合理的地方希望不腻赐教，小弟先在这里谢过您了！
首先把第一个分页效果的代码贴出来(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 谢谢！
自己动手写 ASP.NET MVC 分页 part1的更多相关文章
- 基于Bootstrap的Asp.net Mvc 分页
基于Bootstrap的Asp.net Mvc 分页的实现 最近写了一个mvc 的 分页,样式是基于 bootstrap 的 ,提供查询条件,不过可以自己写样式根据个人的喜好,以此分享一下.首先新建一 ...
- ASP.NET MVC分页组件MvcPager 2.0版发布暨网站全新改版
MvcPager分页控件是在ASP.NET MVC Web应用程序中实现分页功能的一系列扩展方法,该分页控件的最初的实现方法借鉴了网上流行的部分源代码, 尤其是ScottGu的PagedList< ...
- ASP.NET MVC分页实现之改进版-增加同一个视图可设置多个分页
我之前就已经实现了ASP.NET MVC分页(查看该博文),但它有局限性,必须确保在同一个视图中只能有一处分页,若需要在同一个视图中设置多个分页,却无能为力,为此,我重新对原先的代码进行了优化,增加了 ...
- ASP.NET MVC分页实现
ASP.NET MVC中不能使用分页控件,所以我就自己写了一个分页局部视图,配合PageInfo类,即可实现在任何页面任意位置呈现分页,由于采用的是基于POST分页方式,所以唯一的限制就是必须放在FO ...
- Asp.net MVC分页实例
分页是网页基本功能,这里主要讨论在Asp.net MVC环境下分页的前端实现,不涉及后台分页.实现效果如下图显示: Step 1.建立分页信息类 public class PagingInfo { p ...
- 基于Bootstrap的Asp.net Mvc 分页的实现
最近写了一个mvc 的 分页,样式是基于 bootstrap 的 ,提供查询条件,不过可以自己写样式根据个人的喜好,以此分享一下.首先新建一个Mvc 项目,既然是分页就需要一些数据,我这边是模拟了一些 ...
- 基于Bootstrap的Asp.net Mvc 分页的实现(转)
最近写了一个mvc 的 分页,样式是基于 bootstrap 的 ,提供查询条件,不过可以自己写样式根据个人的喜好,以此分享一下.首先新建一个Mvc 项目,既然是分页就需要一些数据,我这 边是模拟了一 ...
- 自己用的一个ASP.Net MVC分页拿出来分享下（转）
实例懒得做.切几个图把代码发上要用的自己搞啦~ 下面是一个helper类. namespace System.Web.Mvc { public enum BarStyle { yahoo, digg, ...
- asp.net MVC分页
.Net MVC 分页代码,分页的关键就是在于这几个参数pageIndex ,recordCount,pageSize ,下面是张林的网站做的一个简单的分页代码 效果如图 public class ...
随机推荐
- 练习一下linux中的list函数。
所有的list函数见 include/linux/list.h 自己从 include/linux/list.h 拷贝了一些函数到自己的list.c中, 然后练习了一下. 没有别的目的,就是想熟练一下 ...
- Sprite Kit编程指南中文版下载
下载地址:http://download.csdn.net/detail/xin814/6032573 关于Sprite Kit 重要提示: 这是API或开发技术的一个初版文档.虽然本文档的技术准确 ...
- Android Popupwindow 拖动
版本号:1.0 日期:2014.4.29 版权:© 2014 kince 转载注明出处 关于View的拖动大家应该比較了解了,比方对一个控件IamgeView拖动,或者一个视图View拖动,实现方式也 ...
- prototype演变
setp1 var Person = function () {}; //构造器 var p = new Person(); setp1 演变: var Person = function () {} ...
- android webview点击返回键回到上一个html
android webview点击返回键返回上一个html @Override public boolean onKeyDown(int keyCode, KeyEvent event) { if ( ...
- matlab改变GUI和figure左上角图标的方法，并生成exe文件
1. GUI左上角图标的更改,假设GUI的Tag为figure1,在其OpeningFcn里添加h = handles.figure1; %返回其句柄newIcon = javax.swing.Ima ...
- 【攻防实战】SQL注入演练！
这篇文章目的是让初学者利用SQL注入技术来解决他们面临的问题, 成功的使用它们,并在这种攻击中保护自己. 1.0 介绍 当一台机器只打开了80端口, 你最依赖的漏洞扫描器也不能返回任何有用的内容, 并 ...
- cocos2d-X-3.X 场景与层
1场景与层的相关函数 1. void runWithScene(Scene * scene). 该函数可以运行场景.只能在启动第一个场景时调用该函数.如果已经有一个场景运行,则不能调用该函数. 2. ...
- php-fpm 开启错误日志
#php-fpm.conf #open catch_workers_output = yes #php.ini log_errors = On error_log=/data/logs/php-fpm ...
- 初来乍到--------smarty
Smarty Day01-----smarty的使用 作用:把php+html分离,程序和美工 使用: 1.下载源码包 2.目录结构 libs 源码文件 Smarty.class.php templa ...