首页 > > 网络编程 > Asp.Net编程 >

关于asp.net假分页的删除操作的随笔

2018-06-22 07:20:50来源：未知 阅读 ()

新老客户大回馈,云服务器低至5折

作为一个新人，上周负责优化一个后台管理系统，遇到一个问题:点击删除按钮之后，页面又回到了第一页。

而我需要达到的效果是：点击了删除按钮之后，原来是那一页，删除后还是在那一页。

由于项目是已经验收了的，所以我不能改动太大。我在网上页找了很久，也有许多解决方案，但都不太适合。

这个系统数据不多，所以用的假分页,使用了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 type=“text” 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 type="text" 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>

好了，这样差不多就达到了我所需要的效果了。

结语：我是一个小菜鸟，第一次写随笔，欢迎大神指点，不喜勿喷。

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：反射(4)反射性能问题：直接调用vs反射调用

下一篇：C# 并行任务——Parallel类

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签