三沣开发知识 购物 网址 小说 美女秀 游戏 电影下载 图说天下 生肖星座 新闻 笑话 | IT开发 软件下载 手机论坛 三沣软件 360图书馆
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题
autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程 CSS/HTML/Xhtml
html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
站长资讯 .NET新手 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA VisualStudio ASP.NET-MVC .NET控件开发 EntityFramework WinRT-Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动 Html-Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP OracleERP DynamicsCRM K2 BPM 信息安全 企业信息 Android开发 iOS开发 WindowsPhone WindowsMobile 其他手机 敏捷开发 项目管理 软件工程 SQLServer Oracle MySQL NoSQL 其它数据库 Windows7 WindowsServer Linux
  IT知识库 -> .NET新手区 -> 关于asp.net假分页的删除操作的随笔 -> 正文阅读
 

[.NET新手区]关于asp.net假分页的删除操作的随笔

关于asp.net假分页的删除操作的随笔 作为一个新人,上周负责优化一个后台管理系统,遇到一个问题:点击删除按钮之后,页面又回到了第一页。
而我需要达到的效果是:点击了删除按钮之后,原来是那一页,删除后还是在那一页。
由于项目是已经验收了的,所以我不能改动太大。我在网上页找了很久,也有许多解决方案,但都不太适合。
这个系统数据不多,所以用的假分页,使用了Repeater控件,后台将数据库中的数据全部查询出来放到Repeater中,在通过jquery进行分页,下面是我写的一个简单的测试项目
前台代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="PagingTestDome1.Index" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="js/jquery-1.6.2.min.js"></script>
    <title></title>
    <style type="text/css">
        a{
            text-decoration:none;color:#686868;
        }
        a:hover{
            color:#6287ef;
        }
        .page_set
        {
            float: left;
            margin-top: 50px;
        }

        .table_content
        {
            text-align: center;
        }
        .page_set a
        {
            border: 0.5px solid #999;
            padding: 1px 4px;
        }
        .page_set p
        {
            display: inline;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <h3>假分页——删除</h3>
        <asp:Repeater ID="rp_news" runat="server" OnItemDataBound="rp_news_ItemDataBound" OnItemCommand="rp_news_ItemCommand">
            <HeaderTemplate>
                <table id="tableinfo" border="1px" style="border-collapse: collapse;" bordercolor="#eeeeee" cellpadding="2px" cellspacing="0">
                    <tr style="height:22px; background-color:#eeeeee;  text-align:center;">
                        <th style="width:300px; font-weight:normal;">编号</th>
                        <th style="width:300px; font-weight:normal;">商品名</th>
                        <th style="width:300px; font-weight:normal;">价格</th>
                        <th style="width:80px; font-weight:normal;">删除</th>
                    </tr>
            <tbody id="trId">
            </HeaderTemplate>
            <ItemTemplate>
                <asp:Panel ID="plItem" runat="server">
                    <tr style="height:17px; background-color:White; text-align:center;">
                        <asp:Label ID="lb_ID1" runat="server" Text='<%# Eval("id")%>'></asp:Label>
                        <td><asp:Label ID="lb_ID" runat="server" Text='<%# Eval("id")%>'></asp:Label></td>
                        <td><asp:Label ID="lb_name" runat="server" Text='<%# Eval("goodsName")%>'></asp:Label></td>
                        <td><asp:Label ID="lb_price" runat="server" Text='<%# Eval("price")%>'></asp:Label></td>
                        <td><asp:ImageButton ID="lbtDelete" ImageUrl="img/delete.png" runat="server" CommandName="Delete" /></td>
                    </tr>
                </asp:Panel>
            </ItemTemplate>
            <FooterTemplate>
            </tbody>
                </table>
            </FooterTemplate>
        </asp:Repeater>   
        <div class="page_set">
            <p id="pages"></p>
            <p id="sjzl"></p> 
            <a  href="#" id="btn_first">首页</a>
            <a  href="#" id="btn_previous">上一页</a>
            <a  href="#" id="btn_next">下一页</a>
            <a  href="#" id="btn_last">尾页</a> 
            <p>转到 </p>
            <input style="width:40px;height:16px;" maxlength="5" id="changePage" />
            <p>页 </p>
            <a  href="#" id="btn_change">跳转</a>
        </div>
        <div class="clear"></div>
        <script type="text/javascript">
        var pageSize = 5;    //每页显示的记录条数
        var curPage = 0;        //当前页
        var lastPage;        //最后页
        var direct = 0;        //方向
        var len;            //总行数
        var page;            //总页数
        var begin;
        var end;
        var cPage=0;
    $(document).ready(function display() {
            len = $("#trId tr").length;    // 求这个表的总行数,剔除第一行介绍
            page = len % pageSize == 0 ? len / pageSize : Math.floor(len / pageSize) + 1; //根据记录条数,计算页数
            curPage = 1;    // 设置当前为第一页
            displayPage(1); //显示第一页
            document.getElementById("pages").innerHTML = "当前 " + curPage + "/" + page + "";    // 显示当前多少页
            document.getElementById("sjzl").innerHTML = "数据总量 " + len + "";        // 显示数据量
        $("#btn_first").click(function firstPage() {    // 首页
                curPage = 1;
                direct = 0;
                displayPage();
            });
            $("#btn_previous").click(function frontPage() {    // 上一页
                direct = -1;
                displayPage();
            });
            $("#btn_next").click(function nextPage() {    // 下一页
                direct = 1;
                displayPage();
            });
            $("#btn_last").click(function lastPage() {    // 尾页
                curPage = page;
                direct = 0;
                displayPage();
            });
            $("#btn_change").click(function changePage() {    // 转页
                curPage = document.getElementById("changePage").value * 1;
                if (!/^[1-9]\d*$/.test(curPage)) {
                    alert("请输入正整数");
                    return;
                }
                if (curPage > page) {
                    alert("超出数据页面");
                    return;
                }
                direct = 0;
                displayPage();
            });
        });
            function displayPage() {
                if (curPage <= 1 && direct == -1) {
                    direct = 0;
                    alert("已经是第一页了");
                    return;
                } else if (curPage >= page && direct == 1) {
                    direct = 0;
                    alert("已经是最后一页了");
                    return;
                }

                lastPage = curPage;

                // 修复当len=1时,curPage计算+得0的bug
                if (len > pageSize) {
                    curPage = ((curPage + direct + len) % len);
                } else {
                    curPage = 1;
                }
                document.getElementById("pages").innerHTML = "当前 " + curPage + "/" + page + "";        // 显示当前多少页
                begin = (curPage - 1) * pageSize; // 起始记录号
                end = begin + 1 * pageSize - 1;    // 末尾记录号
          if (end > len) end = len;
                $("#trId tr").hide();    // 首先,设置这行为隐藏
                $("#trId tr").each(function (i) {    // 然后,通过条件判断决定本行是否恢复显示
                    if ((i >= begin && i <= end))//显示begin<=x<=end的记录
                        $(this).show();
                });
            }
        
    </script>
    </div>
    </form>
</body>
</html>

后台代码如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using DAL;
using BLL;
using Model;

namespace PagingTestDome1
{
    public partial class Index : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack) {
                Bind();
            }
        }
        protected void Bind() {
            BLL.tbl_goods goods = new BLL.tbl_goods();
            IList<Model.tbl_goods> List=new List<Model.tbl_goods>();
            List = goods.GetList();
            rp_news.DataSource = List;
            rp_news.DataBind();

        }

        protected void rp_news_ItemDataBound(object sender, RepeaterItemEventArgs e)
        {
            if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
            {
                Panel pn = (Panel)e.Item.FindControl("plItem");
                Label id = (Label)pn.FindControl("lb_ID1");
                Label name = (Label)pn.FindControl("lb_name");
                id.Visible = false;
                ((ImageButton)e.Item.FindControl("lbtDelete")).Attributes.Add("onclick", string.Format("JavaScript:return confirm('你确认要删除 {0} 吗');", name.Text));
            }
        }

        protected void rp_news_ItemCommand(object source, RepeaterCommandEventArgs e)
        {
            
            if (e.CommandName == "Delete")
            {
                Panel pn = (Panel)e.Item.FindControl("plItem");
                Label id = (Label)pn.FindControl("lb_ID1");
                int ID = Convert.ToInt32(id.Text);
                BLL.tbl_goods goods = new BLL.tbl_goods();
                goods.Delete(ID);
                Response.Write("<script>alert('删除成功!!!')</script>");
                Bind();
            }
        }

    }
}

这里的删除按钮是用的ImageButton,这是一个提交按钮,所以点击了之后页面会刷新。
在不能改动太大的前提下,要达到我所需要的效果。
有一个思路就是将当前的页码保存下来,点击删除按钮后,通过jquery控制它跳到保存下来的页码的那一页。
但是在前台页码中,分页处的代码都是html标签,不具有保存页码的功能,所以就需要改下前台的代码了。
将分页处的input标签:

<input style="width:40px;height:16px;" maxlength="5" id="changePage" />

改为TextBox:

<asp:TextBox ID="changePage" runat="server" Width="40" Height="16" MaxLength="5"></asp:TextBox> 

用asp.net所带的TextBox来保存页码就可以了。
那么,分页的jquery也需要改一下了:

<script type="text/javascript">
        var pageSize = 5;    //每页显示的记录条数
        var curPage = 0;        //当前页
        var lastPage;        //最后页
        var direct = 0;        //方向
        var len;            //总行数
        var page;            //总页数
        var begin;
        var end;
        var cPage=0;


        $(document).ready(function display() {
            len = $("#trId tr").length;    // 求这个表的总行数,剔除第一行介绍
            page = len % pageSize == 0 ? len / pageSize : Math.floor(len / pageSize) + 1; //根据记录条数,计算页数
            if (document.getElementById("changePage").value * 1 == "") {
                curPage = 1;    // 设置当前为第一页
                displayPage(1); //显示第一页
            } else {
                curPage = document.getElementById("changePage").value * 1;
                displayPage(curPage);//跳转到保存的页码处
            }
            
            document.getElementById("pages").innerHTML = "当前 " + curPage + "/" + page + "";    // 显示当前多少页
            document.getElementById("sjzl").innerHTML = "数据总量 " + len + "";        // 显示数据量



            $("#btn_first").click(function firstPage() {    // 首页
                curPage = 1;
                direct = 0;
                displayPage();
                $("#changePage").val(curPage);//保存页码
            });
            $("#btn_previous").click(function frontPage() {    // 上一页
                direct = -1;
                displayPage();
                $("#changePage").val(curPage);//保存页码
            });
            $("#btn_next").click(function nextPage() {    // 下一页
                direct = 1;
                displayPage();
                $("#changePage").val(curPage);//保存页码
            });
            $("#btn_last").click(function lastPage() {    // 尾页
                curPage = page;
                direct = 0;
                displayPage();
                $("#changePage").val(curPage);//保存页码
            });
            $("#btn_change").click(function changePage() {    // 转页
                curPage = document.getElementById("changePage").value * 1;
                if (!/^[1-9]\d*$/.test(curPage)) {
                    alert("请输入正整数");
                    return;
                }
                if (curPage > page) {
                    alert("超出数据页面");
                    return;
                }
                direct = 0;
                displayPage();
            });
        });
            function displayPage() {
                if (curPage <= 1 && direct == -1) {
                    direct = 0;
                    alert("已经是第一页了");
                    return;
                } else if (curPage >= page && direct == 1) {
                    direct = 0;
                    alert("已经是最后一页了");
                    return;
                }

                lastPage = curPage;

                // 修复当len=1时,curPage计算+得0的bug
                if (len > pageSize) {
                    curPage = ((curPage + direct + len) % len);
                } else {
                    curPage = 1;
                }


                document.getElementById("pages").innerHTML = "当前 " + curPage + "/" + page + "";        // 显示当前多少页

                begin = (curPage - 1) * pageSize; // 起始记录号
                end = begin + 1 * pageSize - 1;    // 末尾记录号


                if (end > len) end = len;
                $("#trId tr").hide();    // 首先,设置这行为隐藏
                $("#trId tr").each(function (i) {    // 然后,通过条件判断决定本行是否恢复显示
                    if ((i >= begin && i <= end))//显示begin<=x<=end的记录
                        $(this).show();
                });
            }
        
    </script>

好了,这样差不多就达到了我所需要的效果了。
结语:我是一个小菜鸟,第一次写随笔,欢迎大神指点,不喜勿喷。
  .NET新手区 最新文章
多线程(4)Task
多线程(5)async&await
对一个或多个实体的验证失败。有关详细信息
泛型
多线程(1)认识多线程
支付网关思考
正文提取中用到的正则表达式
抛弃jQuery 深入原生的JavaScript
微信JSAPI支付回调
mvc过滤器学习(1)
上一篇文章           查看所有文章
加:2017-06-17 01:41:44  更:2017-06-17 01:41:48 
 
技术频道: 站长资讯 .NET新手区 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA Visual Studio ASP.NET MVC .NET控件开发 Entity Framework WinRT/Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动设计 Html/Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP Oracle ERP Dynamics CRM K2 BPM 信息安全 企业信息化其他 Android开发 iOS开发 Windows Phone Windows Mobile 其他手机开发 敏捷开发 项目与团队管理 软件工程其他 SQL Server Oracle MySQL NoSQL 其它数据库 Windows 7 Windows Server Linux
脚本语言: vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题 autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程
网站开发: CSS/HTML/Xhtml html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
360图书馆 母婴/育儿 软件开发资料 网页快照 文字转语音 购物精选 软件 美食菜谱 新闻中心 电影下载 小游戏 Chinese Culture
生肖星座解梦 三沣玩客 拍拍 视频 开发 Android开发 站长 古典小说 网文精选 搜图网 天下美图 中国文化英文 多播视频
2017-6-24 23:27:05
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT知识库