ASP.NET Ajax 实现无刷新分页

原创 2013年12月04日 17:34:53

使用Ajax的UpdatePanel控件和DataList控件 实现的无刷新分页。

详细过程:

1.1.  启动sqlserver,创建数据库ajax数据库中创建sale表,点击新建查询,写入代码:
create table sale
(
    sid char(5)  primary key,    --销售编号
    pid char(5),        --商品编号
    pname varchar(50),    --商品名称
    unit varchar(4),    --单位
    number int,        --销售数量
    price decimal,        --单价
    sdate datetime,        --销售日期
    people varchar(20)    --经手人
)
go
2.1  点击文件-新建-网站,命名WebAjax,点击确定按钮。

2.2.在默认项目中 添加个web窗体,命名为Default

2.3.在Default页面中,拖入一个ScriptManager控件,再拖入一个UpdatePanel控件

2.4.在UpdatePanel中拖入一个DataList控件,用来显示和分页 数据库中的商品数据;

2.5.写好DataList中数据模版和 模版样式

2.6.拖入三个个Lable控件,Lable1用来显示当前页,Lable2用来显示总页数,Lable3存储当前页码


2.7.拖入四个Button控件,Button1用来控制 显示首页数据,Button2用来控制 显示上一页数据,

Button3用来控制 显示下一页数据,Button4用来控制 显示尾页数据,

2.8,写后台cs代码,调试并成功。

1.前台:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ajax实验</title>
    <style type="text/css">
        .style1
        {
            width: 100%;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">

            <ContentTemplate>
                <asp:DataList ID="DataList1" runat="server" BackColor="White" 
                    BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px" CellPadding="3" 
                    GridLines="Horizontal">
                    <AlternatingItemStyle BackColor="#F7F7F7" />
                    <FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" />
                    <HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" />
                    <ItemStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" />
                    <HeaderTemplate>
                    <table class="style1">
                            <tr>
                                                        <tr>
                                <td>
                                    销售编号</td>
                                <td>
                                    商品编号</td>
                                    <td>
                                    商品名称</td>
                                    <td>
                                    单位</td>
                                    <td>
                                    销售数量</td>
                                    <td>
                                    单价</td>
                                    <td>
                                    销售日期</td>
                                    <td>
                                    经手人</td>
                            </tr>
                            </tr>
                    </HeaderTemplate>
                    <ItemTemplate>
                            <tr>
                                <td>
                                    <%# DataBinder.Eval(Container.DataItem, "sid")%></td>
                                <td>
                                    <%# DataBinder.Eval(Container.DataItem, "pid")%></td>
                                    <td>
                                    <%# DataBinder.Eval(Container.DataItem, "pname")%></td>
                                    <td>
                                    <%# DataBinder.Eval(Container.DataItem, "unit")%></td>
                                    <td>
                                    <%# DataBinder.Eval(Container.DataItem, "number")%></td>
                                    <td>
                                    <%# DataBinder.Eval(Container.DataItem, "price")%></td>
                                    <td>
                                    <%# DataBinder.Eval(Container.DataItem, "sdate")%></td>
                                    <td>
                                    <%# DataBinder.Eval(Container.DataItem, "people")%></td>
                            </tr>
                    </ItemTemplate>
                    <FooterTemplate>
                    </table>
                    </FooterTemplate>
                    <SelectedItemStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" />
                </asp:DataList>
          <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
          <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
                <asp:Button ID="Button1" runat="server" Text="首页" onclick="Button1_Click" />
                <asp:Button ID="Button2" runat="server" Text="上一页" onclick="Button2_Click" />
                <asp:Button ID="Button3" runat="server" Text="下一页" onclick="Button3_Click" />
                <asp:Button ID="Button4" runat="server" Text="尾页" onclick="Button4_Click" />
                <br />
                <asp:Label ID="Label3" runat="server" Text="1"></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
    
</body>
</html>
2.后台
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;

public partial class _Default : System.Web.UI.Page
{
    SqlConnection sqlcon = new SqlConnection(@"server=.\sqlexpress;database=ajax;integrated security=SSPI");
    public string strsql = "SELECT * FROM sale";
    PagedDataSource page = new PagedDataSource();
    protected void Page_Load(object sender, EventArgs e)
    {
        BindList(1);
    }

    private void BindList(int index)
    {
        SqlDataAdapter adp = new SqlDataAdapter(strsql, sqlcon);
        sqlcon.Open();
        DataSet dst = new DataSet();
        adp.Fill(dst, "table");
        DataTable tab = new DataTable();
        tab = dst.Tables["table"];
        page.DataSource = tab.DefaultView;
        //分页实现
        page.PageSize = 3;
        page.AllowPaging = true;

        page.CurrentPageIndex = index - 1;
        this.Label1.Text = index.ToString();
        this.Label2.Text = page.PageCount.ToString();
        DataList1.DataSource = page;
        DataList1.DataBind();
        sqlcon.Close();
    }


    protected void Button1_Click(object sender, EventArgs e)
    {
        BindList(1);
        Label3.Text = "1";
    }
    protected void Button2_Click(object sender, EventArgs e)//上一页
    {
        if (Convert.ToInt32(Label3.Text) == 1)
        {
            BindList(1);
            Label3.Text = "1";
        }
        else
        {
            BindList(Convert.ToInt32(Label3.Text)-1);
            Label3.Text = (Convert.ToInt32(Label3.Text)-1).ToString();
        }
    }
    protected void Button3_Click(object sender, EventArgs e)//下一页
    {
        if (Convert.ToInt32(Label3.Text) == (page.PageCount - 1))
        {
            BindList(page.PageCount);
            Label3.Text = page.PageCount.ToString();
        }
        else
        {
            BindList(Convert.ToInt32(Label3.Text) + 1);
            Label3.Text = (Convert.ToInt32(Label3.Text) + 1).ToString();
        }
    }
    protected void Button4_Click(object sender, EventArgs e)
    {
        BindList(page.PageCount);
        Label3.Text = page.PageCount.ToString();
    }
}


asp.net mvc基于jQuery+Ajax实现无刷新分页

自己写了个采用asp.net mvc框架的Demo,分页功能采用的是jQuery+Ajax实现的无刷新分页。 解决方案思想:页面数据的初始加载和按页加载都是通过ajax来进行,页面分页链接点击后利用...
  • wangzl1163
  • wangzl1163
  • 2016年06月22日 15:05
  • 5149

asp.net Mvc4 使用ajax结合分页插件实现无刷新分页

本文为在mvc4中使用ajax实现无刷新分页demo,记录一下。 解决方案思想:页面数据的初始加载和按页加载都是通过ajax来进行,页面分页链接点击后利用ajax技术发送当前页码到后端控制器...
  • u013924731
  • u013924731
  • 2016年10月25日 17:02
  • 1594

ajax实现无刷新分页功能

原理:前台换用ajax将页码以post的方式传到后台,后台接收页码,后台的操作与用php实现分页功能大致一样,只是还需将总页数传到前台,以便在前台输出分页链接。 那么前台怎样传页码呢???只需用aja...
  • zls986992484
  • zls986992484
  • 2016年08月05日 23:14
  • 3983

ASP.NET C#+Ajax+json无刷新分页参考

先html代码 ...
  • bianjing40
  • bianjing40
  • 2015年12月15日 21:51
  • 1397

PHP-Ajax实现无刷新分页

1.创建数据库并插入数据 create database shop; use shop; CREATE TABLE ecs_goods ( goods_id INT UNSIGNED NOT NU...
  • bbs375
  • bbs375
  • 2016年08月15日 13:58
  • 1083

Jquery+ajax+PHP 基于thinkPHP的无刷新分页

功能描述:以带着参数的形式加载Listinfo页面,形如: http://无法访问的链接/index.php?g=Baoliao&m=Index&a=listinfo&id=1 或者是: htt...
  • CSDN_GOON
  • CSDN_GOON
  • 2015年12月28日 18:06
  • 2493

jquery ajax 无刷新分页

jquery ajax 无刷新分页 + 进度条显示
  • codercwm
  • codercwm
  • 2016年05月26日 17:03
  • 3094

MVC4中ajax分页技术实例

在这之前一直没有写过碰过MVC,更别说ajax,
  • szstephenzhou
  • szstephenzhou
  • 2014年06月28日 08:58
  • 5926

分页处理,使用ajax局部刷新列表

第一个jsp页面加载初始资源 第二个jsp页面处理分页 分页展示简历列表 第一个jsp页面加载初始资源,并且页面一加载请求服务端加载第一页数据 ...
  • qq_35661734
  • qq_35661734
  • 2016年09月19日 16:48
  • 3068

asp.net中利用Jquery+Ajax+Json实现无刷新分页(二)

Jquery+Ajax分页测试 $(function () { InitPage(1, 10); $(".nextP...
  • smartsmile2012
  • smartsmile2012
  • 2015年01月21日 18:03
  • 1914
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ASP.NET Ajax 实现无刷新分页
举报原因:
原因补充:

(最多只允许输入30个字)