服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - ASP.NET教程 - ASP.NET无刷新分页简单实现

ASP.NET无刷新分页简单实现

2019-12-24 12:46lijiao ASP.NET教程

无刷新分页功能,虽然比较简单,但是涉及到的知识面蛮多的,我记录一下制作的步骤与心得,仅供参考。如有哪里不足,希望大家指出,有更好的方法,也可以提出来,大家一起学习。

下面就是和大家分享的实现无刷新分页功能的全部步骤,欢迎学习。

1、新建一个分页存储过程:

?
1
2
3
4
5
6
7
8
CREATE procedure [dbo].[P_Pager]
(@PageNumber int,
@PageSize int)
as
 declare @sql nvarchar(4000)
  set @sql = 'select top ' + Convert(varchar, @PageSize)  + ' * from T_Test where [type]=1 and id not in (select top ' + Convert(varchar, (@PageNumber - 1) * @PageSize) + ' id from T_Test order by id desc) order by id desc'
 exec sp_executesql @sql
GO

2、设置Ajax控件

想要实现无刷新,肯定会用到Ajax,首先是要放入必不可少的:

<asp:ScriptManager ID="ScriptManager1" runat="server"> 
</asp:ScriptManager>

接着把Repeater控件嵌入到UpdatePanel里面去:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
      <ContentTemplate>
          <ul>
            <asp:Repeater ID="Repeater1" runat="server">
              <ItemTemplate>
                <li>
                  <p>
                    <span><%#Eval("username") %>:</span><%#Eval("content").ToString())) %></p>
                  <p>
                    <em>发表时间:
                      <%#Eval("addtime") %>
                    </em>
                  </p>
                </li>
              </ItemTemplate>
            </asp:Repeater>
          </ul>
          <p>
              总记录:<asp:Literal ID="ltlCount" runat="server"></asp:Literal></p>
            <p>
              <webdiyer:AspNetPager ID="AspNetPager1" runat="server" AlwaysShow="true" PageIndexBoxType="DropDownList" >
              </webdiyer:AspNetPager>
            </p>
          </div>
      </ContentTemplate>
    </asp:UpdatePanel>

3、AspNetPager分页控件

可以看到以上的代码有个分页控件,我相信这个分页控件大家都不陌生了,我就不多介绍。必须有AspNetPager.dll,然后在项目中引用,在头部引入这一段代码:

<%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefix="webdiyer" %>
这时候分页控件应该就可以使用了。最后在后台绑定一下数据,同时也要绑定AspNetPager控件,完整的后台代码如下:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using Wuqi.Webdiyer;
using System.Data.SqlClient;
  
public partial class AjaxPager : System.Web.UI.Page
{
  int currentPageNumber;//当前页号 
  int pageSize = 5;//每页显示记录条数
  protected void Page_Load(object sender, EventArgs e)
  {
    if (!IsPostBack)
    {
      currentPageNumber = 1;
      ViewState["currentPageNumber"] = currentPageNumber;
      BindData();
    }
    AspNetPager1.PageChanged += new EventHandler(AspNetPager1_PageChanged); //定义控件分页事件
  }
  
  //获取记录总数
  private int GetCount()
  {
    string sql = "select COUNT(*) from T_Test";
    DataTable dt = GetTable(sql, CommandType.Text, values);
    if (dt.Rows.Count > 0)
    {
      return Convert.ToInt32(dt.Rows[0][0]);
    }
    else
    {
      return 0;
    }
  }
    
  //绑定数据
  private void BindData()
  {
    ltlCount.Text = GetCount().ToString();
    currentPageNumber = Convert.ToInt32(ViewState["currentPageNumber"]);
    SqlParameter[] values = { new SqlParameter("@PageNumber", currentPageNumber), new SqlParameter("@PageSize", pageSize) };
      
    DataTable dt = GetTable("P_Pager", CommandType.StoredProcedure, values); //调用存储过程
    if (dt.Rows.Count > 0)
    {
      AspNetPager1.PageSize = pageSize;
      AspNetPager1.RecordCount = GetCount();
      AspNetPager1.CurrentPageIndex = currentPageNumber;
      this.Repeater1.DataSource = dt.DefaultView;
      this.Repeater1.DataBind();
    }
  }
  
  //分页事件 
  void AspNetPager1_PageChanged(object sender, EventArgs e)
  {
    currentPageNumber = AspNetPager1.CurrentPageIndex;
    ViewState["currentPageNumber"] = currentPageNumber;
    BindData();
  }
    
   // 读取存储过程返回table
  private DataTable GetTable(string sql, CommandType t, params SqlParameter[] values)
  {
    using (SqlConnection conn = new SqlConnection("Data Source=127.0.0.1;Initial Catalog=testDB;Persist Security Info=True;User ID=sa;Password=123456"))
    {
      SqlCommand comm = new SqlCommand(sql, conn);
      comm.CommandType = t;
      if (values != null && values.Length > 0)
        comm.Parameters.AddRange(values);
      SqlDataAdapter da = new SqlDataAdapter(comm);
      DataSet ds = new DataSet();
      try
      {
        conn.Open();
        da.Fill(ds);
        return ds.Tables[0];
      }
      catch (Exception)
      {
        return null;
      }
      finally
      {
        conn.Close();
        conn.Dispose();
      }
    }
  }
}

至此,基本大功告成,虽然比较简单,但是涉及到存储过程,Ajax,分页控件等知识点,还是蛮值得收藏和学习的,希望我的这篇文章是抛砖引玉,让大家提供更好的方法,才是我学习的动力。

延伸 · 阅读

精彩推荐